|
|
|
@ -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;
|
|
|
|
|
}
|
|
|
|
|