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

main
fanluyan 6 months ago
parent 01f5f22e17
commit 9cd3d98d5e

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

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

@ -109,7 +109,17 @@ export default {
if (element.modelType == "211") {
this.modelDataObj = JSON.parse(element.modelParams);
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;
}
}
@ -130,7 +140,17 @@ export default {
const element = modelParameter[index];
if (element.modelType == type) {
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;
}
}

File diff suppressed because it is too large Load Diff

@ -124,7 +124,8 @@ export default {
.siteAdministrationItem {
width: 100%;
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;
.top {
width: 100%;
@ -150,7 +151,8 @@ export default {
margin-left: vw(60);
position: relative;
padding: vw(70) 0 0 0;
width: calc(100% - 440px);
width: calc(100% - 10.88542vw);
//width: calc(100% - 440px);
// width: restVw(478);
height: 100%;
> p {

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

Loading…
Cancel
Save