修改样式和动态加载3D模型

main
fanluyan 6 months ago
parent 01f5f22e17
commit 9cd3d98d5e

@ -8,7 +8,15 @@
<div class="public"> <div class="public">
<div class="nav"> <div class="nav">
<ul> <ul>
<li v-for="(item, index) in navList1" :key="index" :class="{active:isACtive1 === index}" class="backgroundImage" @click="jump(item, index)"><span>{{ item.name }}</span></li> <li
v-for="(item, index) in navList1"
:key="index"
:class="{ active: isACtive1 === index }"
class="backgroundImage"
@click="jump(item, index)"
>
<span>{{ item.name }}</span>
</li>
</ul> </ul>
</div> </div>
<div class="public-content"> <div class="public-content">
@ -25,11 +33,18 @@
<div v-if="isACtive1 == 0" class="public"> <div v-if="isACtive1 == 0" class="public">
<div class="nav nav-long"> <div class="nav nav-long">
<ul> <ul>
<li v-for="(item, index) in navList2" :key="index" :class="{active:isACtive2 === index}" class="backgroundImage"><span>{{ item.name }}</span></li> <li
v-for="(item, index) in navList2"
:key="index"
:class="{ active: isACtive2 === index }"
class="backgroundImage"
>
<span>{{ item.name }}</span>
</li>
</ul> </ul>
<div class="amplification" @click="amplification"> <div class="amplification" @click="amplification">
<p> <p>
<img src="../../../assets/image/bigNumber/big.png"> <img src="../../../assets/image/bigNumber/big.png" />
<span>放大</span> <span>放大</span>
</p> </p>
</div> </div>
@ -43,134 +58,138 @@
</div> </div>
</template> </template>
<script> <script>
import casingDrivepipe from '../components/secondary/casingDrivepipe' import casingDrivepipe from "../components/secondary/casingDrivepipe";
import thresholdCase from '../components/secondary/thresholdCase' import thresholdCase from "../components/secondary/thresholdCase";
import statistical from '../components/secondary/statistical' import statistical from "../components/secondary/statistical";
export default { export default {
components: { casingDrivepipe, thresholdCase, statistical }, components: { casingDrivepipe, thresholdCase, statistical },
data() { data() {
return { return {
titleName1: '气体PPM', titleName1: "气体PPM",
titleName2: '温度C', titleName2: "温度C",
statisticalId1: 'main1', statisticalId1: "main1",
statisticalId2: 'main2', statisticalId2: "main2",
navList1: [{ navList1: [
name: '套管报警' {
}, name: "套管报警",
{ },
name: '阈值' {
}], name: "阈值",
navList2: [{ },
name: '油色谱数据统计' ],
}], navList2: [
{
name: "油色谱数据统计",
},
],
isACtive1: 0, isACtive1: 0,
isACtive2: 0, isACtive2: 0,
isPageList: [casingDrivepipe, thresholdCase], isPageList: [casingDrivepipe, thresholdCase],
tabTit: [ tabTit: [
{ name: '数据', data: '#1红外设备' }, { name: "数据", data: "#1红外设备" },
{ name: '实际值', data: '50' }, { name: "实际值", data: "50" },
{ name: '阈值(℃)', data: '30' }, { name: "阈值(℃)", data: "30" },
{ name: '工作状态', data: '发电' }, { name: "工作状态", data: "发电" },
{ name: '安装位置', data: '#1变压器' }, { name: "安装位置", data: "#1变压器" },
{ name: '标牌', data: '' }, { name: "标牌", data: "" },
{ name: '生产厂家', data: '' }, { name: "生产厂家", data: "" },
{ name: '投运时间', data: '2019-05-18 12' }, { name: "投运时间", data: "2019-05-18 12" },
{ name: '维修次数', data: '' }, { name: "维修次数", data: "" },
{ name: '收集时间', data: '2019-05-18 12:30:00' }, { name: "收集时间", data: "2019-05-18 12:30:00" },
{ name: '缺失率(%)', data: '' }, { name: "缺失率(%)", data: "" },
{ name: '例行实验', data: '' } { name: "例行实验", data: "" },
], ],
tabTitBottom: [ tabTitBottom: [
{ name: '安装位置', data: '#1变压器' }, { name: "安装位置", data: "#1变压器" },
{ name: '标牌', data: '' }, { name: "标牌", data: "" },
{ name: '生产厂家', data: '' }, { name: "生产厂家", data: "" },
{ name: '投运时间', data: '' }, { name: "投运时间", data: "" },
{ name: '维修次数(次/半年内)', data: '' }, { name: "维修次数(次/半年内)", data: "" },
{ name: '收集时间', data: '2019-05-18 12:30:00' }, { name: "收集时间", data: "2019-05-18 12:30:00" },
{ name: '缺失率(%)', data: '' }, { name: "缺失率(%)", data: "" },
{ name: '例行实验', data: '连接到距当前最近一次的例行实验详情页面' } { name: "例行实验", data: "连接到距当前最近一次的例行实验详情页面" },
] ],
} };
}, },
methods: { methods: {
jump(item, index) { jump(item, index) {
this.isACtive1 = index this.isACtive1 = index;
}, },
amplification() { amplification() {
window.open('/#/statisticalPage') window.open("/#/statisticalPage");
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../assets/stylesheet/index'; @import "../../../assets/stylesheet/index";
.main{ .main {
width: 100%; width: 100%;
height: 90%; height: 92%;
padding:vw(123) vw(40) vw(60) vw(40); padding: vw(123) vw(40) vw(60) vw(40);
position: relative; position: relative;
.top{ .top {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top:0; top: 0;
.back{ .back {
width: vw(400); width: vw(400);
height: vw(86); height: vw(86);
margin: 0 auto; margin: 0 auto;
// background-image: url('../../../assets/image/bigNumber/back.png'); // background-image: url('../../../assets/image/bigNumber/back.png');
} }
} }
.content{ .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.public{ .public {
margin-bottom: vw(50); margin-bottom: vw(50);
.nav{ .nav {
ul{ ul {
display: flex; display: flex;
li{ li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: url('../../../assets/image/bigNumber/unchoose.png'); background-image: url("../../../assets/image/bigNumber/unchoose.png");
width: vw(200); width: vw(200);
height: vw(70); height: vw(70);
margin-right: vw(10); margin-right: vw(10);
color: rgba(229,243,255,0.6); color: rgba(229, 243, 255, 0.6);
font-size: vw(34); font-size: vw(34);
cursor: pointer; cursor: pointer;
&.active{ &.active {
background-image: url('../../../assets/image/bigNumber/choose.png'); background-image: url("../../../assets/image/bigNumber/choose.png");
color: rgba(229,243,255,1); color: rgba(229, 243, 255, 1);
} }
} }
} }
&.nav-long{ &.nav-long {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
ul{ ul {
li{ li {
width: vw(300); width: vw(300);
} }
} }
.amplification{ .amplification {
width: vw(180); width: vw(180);
height: vw(70); height: vw(70);
background: #fff; background: #fff;
color: #0C2050; color: #0c2050;
font-size: vw(30); font-size: vw(30);
cursor: pointer; cursor: pointer;
padding: vw(10) vw(20); padding: vw(10) vw(20);
p{ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
border:1px solid rgba(12,32,80,0.5); border: 1px solid rgba(12, 32, 80, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ img {
width: vw(34); width: vw(34);
height: vw(34); height: vw(34);
} }
@ -178,7 +197,7 @@ export default {
} }
} }
} }
.public-content{ .public-content {
padding: vw(50) vw(108); padding: vw(50) vw(108);
background: #fff; background: #fff;
} }

@ -5,7 +5,15 @@
<div class="back" /> <div class="back" />
<div class="nav"> <div class="nav">
<ul> <ul>
<li v-for="(item, index) in navList" :key="index" :class="{active:isACtive === item.id}" class="backgroundImage" @click="jump(item, index)"><span>{{ item.name }}</span></li> <li
v-for="(item, index) in navList"
:key="index"
:class="{ active: isACtive === item.id }"
class="backgroundImage"
@click="jump(item, index)"
>
<span>{{ item.name }}</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -18,77 +26,79 @@
export default { export default {
data() { data() {
return { return {
navList: [{ navList: [
id: 0, {
name: '图像数据', id: 0,
path: '/videoList' name: "图像数据",
}], path: "/videoList",
isACtive: 0 },
} ],
isACtive: 0,
};
}, },
methods: { methods: {
jump(item, index) { jump(item, index) {
this.isACtive = index this.isACtive = index;
this.$router.push(item.path) this.$router.push(item.path);
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../assets/stylesheet/index'; @import "../../../assets/stylesheet/index";
.main{ .main {
width: 100%; width: 100%;
height: 90%; height: 92%;
padding:vw(123) vw(40) vw(60) vw(40); padding: vw(123) vw(40) vw(60) vw(40);
position: relative; position: relative;
.top{ .top {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top:0; top: 0;
.back{ .back {
width: vw(400); width: vw(400);
height: vw(86); height: vw(86);
margin: 0 auto; margin: 0 auto;
// background-image: url('../../../assets/image/bigNumber/back.png'); // background-image: url('../../../assets/image/bigNumber/back.png');
} }
.nav{ .nav {
margin-top: vw(-35); margin-top: vw(-35);
margin-left: vw(40); margin-left: vw(40);
ul{ ul {
display: flex; display: flex;
z-index: 100; z-index: 100;
padding: 0 0 vw(40) 0; padding: 0 0 vw(40) 0;
li{ li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: url('../../../assets/image/bigNumber/unchoose.png'); background-image: url("../../../assets/image/bigNumber/unchoose.png");
width: vw(300); width: vw(300);
height: vw(70); height: vw(70);
margin-right: vw(10); margin-right: vw(10);
color: rgba(229,243,255,0.6); color: rgba(229, 243, 255, 0.6);
font-size: vw(34); font-size: vw(34);
cursor: pointer; cursor: pointer;
&.active{ &.active {
background-image: url('../../../assets/image/bigNumber/choose.png'); background-image: url("../../../assets/image/bigNumber/choose.png");
color: rgba(229,243,255,1); color: rgba(229, 243, 255, 1);
border-bottom: 3px solid #cc750f; border-bottom: 3px solid #cc750f;
} }
} }
} }
} }
} }
.content{ .content {
width: 100%; width: 100%;
height:100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
} }
@media screen and (max-width:1440px){ @media screen and (max-width: 1440px) {
.main { .main {
height: 90%; height: 90%;
} }
} }
</style> </style>

@ -109,7 +109,17 @@ export default {
if (element.modelType == "211") { if (element.modelType == "211") {
this.modelDataObj = JSON.parse(element.modelParams); this.modelDataObj = JSON.parse(element.modelParams);
this.modelSiteId = element; this.modelSiteId = element;
this.filePath = element.filePath; if (
window.location.hostname === "localhost" &&
window.location.port === "9528"
) {
const currentUrl = "http://192.168.1.190:92";
this.filePath = currentUrl + element.filePath;
} else {
const currentUrl = window.location.origin;
this.filePath = currentUrl + element.filePath;
}
// this.filePath = element.filePath;
break; break;
} }
} }
@ -130,7 +140,17 @@ export default {
const element = modelParameter[index]; const element = modelParameter[index];
if (element.modelType == type) { if (element.modelType == type) {
this.modelDataObj = JSON.parse(element.modelParams); this.modelDataObj = JSON.parse(element.modelParams);
this.filePath = element.filePath; if (
window.location.hostname === "localhost" &&
window.location.port === "9528"
) {
const currentUrl = "http://192.168.1.190:92";
this.filePath = currentUrl + element.filePath;
} else {
const currentUrl = window.location.origin;
this.filePath = currentUrl + element.filePath;
}
break; break;
} }
} }

File diff suppressed because it is too large Load Diff

@ -124,7 +124,8 @@ export default {
.siteAdministrationItem { .siteAdministrationItem {
width: 100%; width: 100%;
height: 90%; height: 90%;
padding: vw(123) vw(126) vw(60) vw(126); // padding: vw(123) vw(126) vw(60) vw(126);
padding: 1.20312vw 1.28125vw 0.5625vw 1.28125vw;
position: relative; position: relative;
.top { .top {
width: 100%; width: 100%;
@ -150,7 +151,8 @@ export default {
margin-left: vw(60); margin-left: vw(60);
position: relative; position: relative;
padding: vw(70) 0 0 0; padding: vw(70) 0 0 0;
width: calc(100% - 440px); width: calc(100% - 10.88542vw);
//width: calc(100% - 440px);
// width: restVw(478); // width: restVw(478);
height: 100%; height: 100%;
> p { > p {

@ -63,70 +63,74 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
openeds: ['1'], openeds: ["1"],
dialogVisible: false, dialogVisible: false,
titleText: '', titleText: "",
isACtive: 0 isACtive: 0,
} };
}, },
computed: { computed: {
menus: function() { menus: function () {
console.log("0000",this.$store.state.app.interfaceRouter.filter(item => item.path === 'system')); console.log(
return this.$store.state.app.interfaceRouter.filter(item => item.path === 'system') "0000",
} this.$store.state.app.interfaceRouter.filter(
(item) => item.path === "system"
)
);
return this.$store.state.app.interfaceRouter.filter(
(item) => item.path === "system"
);
},
}, },
created() { created() {
// console.log(this.$store.state.app.interfaceRouter,'2'); // console.log(this.$store.state.app.interfaceRouter,'2');
}, },
methods: { methods: {
// 退 // 退
async logout() { async logout() {
await this.$store.dispatch('logout') await this.$store.dispatch("logout");
this.$router.push('/login') this.$router.push("/login");
}, },
dialogVisibleClose() { dialogVisibleClose() {
this.dialogVisible = false this.dialogVisible = false;
}, },
logoutDialog() { logoutDialog() {
this.dialogVisible = true this.dialogVisible = true;
this.$confirm("此操作将退出当前系统, 是否继续退出?", "提示", { this.$confirm("此操作将退出当前系统, 是否继续退出?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
this.logout() this.logout();
}) })
.catch(() => {}); .catch(() => {});
}, },
addTitle() { addTitle() {},
},
jump(item, index) { jump(item, index) {
this.isACtive = index this.isACtive = index;
this.$router.push(item.path) this.$router.push(item.path);
}, },
handleOpen(key, keyPath) { handleOpen(key, keyPath) {
// console.log(key, keyPath) // console.log(key, keyPath)
}, },
handleClose(key, keyPath) { handleClose(key, keyPath) {
// console.log(key, keyPath) // console.log(key, keyPath)
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../assets/stylesheet/index"; @import "../../assets/stylesheet/index";
.siteAdministrationItem { .siteAdministrationItem {
width: 100%; width: 100%;
height: 90%; height: 90%;
padding: vw(123) vw(126) vw(60) vw(126); // padding: vw(123) vw(126) vw(60) vw(126);
padding: 1.20312vw 1.28125vw 0.5625vw 1.28125vw;
position: relative; position: relative;
.top { .top {
width: 100%; width: 100%;

Loading…
Cancel
Save