huajimang
/
yanDuLargeScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-02-21 13:26:20 +08:00
parent d16b36bb98
commit ffaaf1e37f
5 changed files with 173 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -40,7 +40,7 @@ export default {
return{ return{
addDay:'', addDay:'',
subDay:'', subDay:'',
routerTitle:['首页','20kv','35kv','站房智辅'], routerTitle:['10KV','20kv','安全管控','站房智辅'],
routerActive:0, routerActive:0,
weatherArr:[ weatherArr:[
{day:'今天',temperature:'',pic:require('./assets/images/sun.png')}, {day:'今天',temperature:'',pic:require('./assets/images/sun.png')},

5
src/api/index.js
View File

@ -98,3 +98,8 @@ export const getCabinetCameraList = (data) => {
return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}) ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
}; };
//获取历史故障
export const getfaultReportList = (data) => {
return axios.post('aps/api/v1/faultReportList'+'?sn='+data.sn+'&token='+data.token,data
,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
};

BIN
src/assets/images/suoxiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
src/views/HomePop/ringMainUnit.vue
View File

@ -392,7 +392,7 @@ export default {
//查询所有网柜信息 //查询所有网柜信息
getDeviceData() { getDeviceData() {
let params = { let params = {
pageSize: 1000, pageSize: 50,
token: localStorage.getItem("token"), token: localStorage.getItem("token"),
}; };
getCabinetList(params).then((res) => { getCabinetList(params).then((res) => {

184
src/views/index.vue
View File

@ -108,7 +108,7 @@
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
ref="tableBox" ref="tableBox"
style="font-size:16px" style="font-size: 16px"
> >
<el-table-column label="" align="center" width="20"> <el-table-column label="" align="center" width="20">
<template slot-scope="scop"> <template slot-scope="scop">
@ -206,9 +206,9 @@
<div class="unityEnlargeBtn"> <div class="unityEnlargeBtn">
<div <div
class="content" class="content"
v-for="(item, index) in btnEnlarge" v-for="(item, index) in enlargeShow == true ? btnEnlarge : btnEnlarge1"
:key="index" :key="index"
@click="enlargeBtn(index)" @click="enlargeShow == true ? enlargeBtn(index) : enlargeBtn1(index)"
> >
<img :src="item.icon" style="margin: 7px" /> <img :src="item.icon" style="margin: 7px" />
</div> </div>
@ -217,6 +217,7 @@
<div class="unitySuosou"> <div class="unitySuosou">
<img src="../assets/images/sousuo.png" style="margin-top: 16px" /> <img src="../assets/images/sousuo.png" style="margin-top: 16px" />
</div> </div>
<div class="selectChange">
<el-select v-model="value" clearable placeholder="请选择线路"> <el-select v-model="value" clearable placeholder="请选择线路">
<el-option <el-option
v-for="(item, index) in options" v-for="(item, index) in options"
@ -228,6 +229,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
</div>
<div class="detailed" id="detailed"> <div class="detailed" id="detailed">
<div <div
class="two" class="two"
@ -363,10 +365,7 @@
:cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
stripe stripe
> >
<el-table-column label="序号" align="center"> <el-table-column label="序号" align="center" prop="id">
<template slot-scope="scop">
{{ scop.$index + 1 }}
</template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="报警信息" align="center"> <el-table-column prop="name" label="报警信息" align="center">
</el-table-column> </el-table-column>
@ -398,6 +397,7 @@ import {
getPbtyqk, getPbtyqk,
getCabinetInfo, getCabinetInfo,
getCabinetList, getCabinetList,
getfaultReportList
} from "../api/index.js"; } from "../api/index.js";
import ringMainUnit from "./HomePop/ringMainUnit.vue"; import ringMainUnit from "./HomePop/ringMainUnit.vue";
export default { export default {
@ -407,16 +407,12 @@ export default {
}, },
data() { data() {
return { return {
enlargeShow:true,
dataGzList: [], //年故障数组 dataGzList: [], //年故障数组
dateList: ["周", "月"], dateList: ["周", "月"],
acolor: true, //是否展示颜色 acolor: true, //是否展示颜色
currentIndex: -1, currentIndex: -1,
alarmInformationData: [ alarmInformationData: [],
{
name: "告警信息",
date: "2022",
},
],
alarmInformationShow: false, //报警详情信息弹窗 alarmInformationShow: false, //报警详情信息弹窗
realTimeAlarmShow: false, //实时报警弹窗 realTimeAlarmShow: false, //实时报警弹窗
modelOthers: false, modelOthers: false,
@ -451,6 +447,14 @@ export default {
icon: require("@/assets/images/btnFangDa.png"), icon: require("@/assets/images/btnFangDa.png"),
}, },
], ],
btnEnlarge1: [
{
icon: require("@/assets/images/btnTiShi.png"),
},
{
icon: require("@/assets/images/suoxiao.png"),
},
],
options: [ options: [
{ {
value: "", value: "",
@ -479,6 +483,9 @@ export default {
option: null, option: null,
myChartBin: null, myChartBin: null,
}; };
},
created(){
}, },
mounted() { mounted() {
this.beginShowing(); this.beginShowing();
@ -490,7 +497,6 @@ export default {
// 盐都区供电公司概况 // 盐都区供电公司概况
getCompanyInfo().then((res) => { getCompanyInfo().then((res) => {
this.CompanyInfo = res.data.data; this.CompanyInfo = res.data.data;
console.log(this.CompanyInfo, "res.data.data");
}); });
// 查询总线路 // 查询总线路
getLine({ action: "all" }).then((res) => { getLine({ action: "all" }).then((res) => {
@ -577,6 +583,15 @@ export default {
that.device = res.val; that.device = res.val;
} }
}); });
//历史故障接口
let faultData = {
token: localStorage.getItem("token"),
pageSize:'500',
page:'1'
};
getfaultReportList(faultData).then((res)=>{
this.alarmInformationData = res.data.data.data
})
}, },
// beforeDestroy() { // beforeDestroy() {
// this.dataDestroy(); // 页面摧毁前，关闭定时器 // this.dataDestroy(); // 页面摧毁前，关闭定时器
@ -802,7 +817,7 @@ export default {
containLabel: true, containLabel: true,
}, },
legend: { legend: {
top:10, top: 10,
icon: "rect", icon: "rect",
right: 25, right: 25,
data: ["线路重超载", "配变重超载", "低电压"], data: ["线路重超载", "配变重超载", "低电压"],
@ -1050,9 +1065,9 @@ export default {
icon: "pin", icon: "pin",
top: 120, top: 120,
// bottom:0, // bottom:0,
right:20, right: 20,
orient: 'vertical', //垂直显示 orient: "vertical", //垂直显示
y: 'center', //延Y轴居中 y: "center", //延Y轴居中
data: [ data: [
{ {
@ -1133,7 +1148,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return params.data.name + ":" + params.data.type + "个"; return params.data.name + ":" + params.data.type + "个";
}, },
color: 'auto', color: "auto",
show: true, show: true,
fontSize: 16, fontSize: 16,
}, },
@ -1175,7 +1190,6 @@ export default {
yearWchz.push(dataList[i].wchz); yearWchz.push(dataList[i].wchz);
yearJieDi.push(dataList[i].jiedi); yearJieDi.push(dataList[i].jiedi);
} }
console.log(yearChcg,'yearBzData');
let that = this; let that = this;
var myChart = this.$echarts.init(document.getElementById("detailedFour")); var myChart = this.$echarts.init(document.getElementById("detailedFour"));
var option = { var option = {
@ -1191,7 +1205,7 @@ export default {
grid: { grid: {
borderWidth: 0, borderWidth: 0,
top: 30, top: 30,
bottom: '17%', bottom: "17%",
left: "6%", left: "6%",
right: "6%", right: "6%",
textStyle: { textStyle: {
@ -1230,7 +1244,7 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
fontSize: 14, fontSize: 14,
rotate: 30 rotate: 30,
}, },
data: yearBzData, data: yearBzData,
}, },
@ -1271,14 +1285,14 @@ export default {
barGap: "10%", barGap: "10%",
label: { label: {
show: true, show: true,
formatter:function(params){ formatter: function (params) {
if (params.value == 0) { if (params.value == 0) {
return '' return "";
}else{ } else {
return params.value return params.value;
}
} }
}, },
},
itemStyle: { itemStyle: {
normal: { normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -1318,14 +1332,14 @@ export default {
stack: "Total1", stack: "Total1",
label: { label: {
show: true, show: true,
formatter:function(params){ formatter: function (params) {
if (params.value == 0) { if (params.value == 0) {
return '' return "";
}else{ } else {
return params.value return params.value;
}
} }
}, },
},
itemStyle: { itemStyle: {
normal: { normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -1365,14 +1379,14 @@ export default {
stack: "Total1", stack: "Total1",
label: { label: {
show: true, show: true,
formatter:function(params){ formatter: function (params) {
if (params.value == 0) { if (params.value == 0) {
return '' return "";
}else{ } else {
return params.value return params.value;
}
} }
}, },
},
itemStyle: { itemStyle: {
normal: { normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -1413,14 +1427,14 @@ export default {
stack: "Total1", stack: "Total1",
label: { label: {
show: true, show: true,
formatter:function(params){ formatter: function (params) {
if (params.value == 0) { if (params.value == 0) {
return '' return "";
}else{ } else {
return params.value return params.value;
}
} }
}, },
},
itemStyle: { itemStyle: {
normal: { normal: {
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -1536,7 +1550,7 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: "#ffffff", //X轴文字颜色 color: "#ffffff", //X轴文字颜色
fontSize:'16px', fontSize: "16px",
}, },
}, },
}, },
@ -1753,16 +1767,33 @@ export default {
this.alarmInformationShow = true; this.alarmInformationShow = true;
this.realTimeAlarmShow = false; this.realTimeAlarmShow = false;
} else if (index == 1) { } else if (index == 1) {
this.enlargeShow = false
// this.$refs.iframe.contentWindow.fullscreen(1); // this.$refs.iframe.contentWindow.fullscreen(1);
document.getElementById('left').style.display = 'none' document.getElementById("left").style.display = "none";
document.getElementById('left').style.width = '0' document.getElementById("right").style.display = "none";
document.getElementById('right').style.display = 'none' document.getElementById("middle").style.width = "100%";
document.getElementById('right').style.width = '0' document.getElementById("middle").style.height = "100%";
document.getElementById('middle').style.width = '100%' document.getElementById("detailed").style.display = "none";
document.getElementById('detailed').style.height = '0' document.getElementById("threeModel").style.height = "100%";
document.getElementById('detailed').style.display = 'none' document.getElementById("threeModel").style.width = "100%";
document.getElementById('threeModel').style.height = '100%' }
document.getElementById('threeModel').style.width = '100%' },
//报警详情信息弹窗
enlargeBtn1(index) {
if (index == 0) {
this.alarmInformationShow = true;
this.realTimeAlarmShow = false;
} else if (index == 1) {
this.enlargeShow = true
// this.$refs.iframe.contentWindow.fullscreen(1);
document.getElementById("left").style.display = "flex";
document.getElementById("left").style.width = "21.18%";
document.getElementById("right").style.display = "flex";
document.getElementById("right").style.width = "21.18%";
document.getElementById("middle").style.width = "55.7%";
document.getElementById("middle").style.height = "100%";
document.getElementById("detailed").style.display = "flex";
document.getElementById("detailed").style.height = "350px";
} }
}, },
handleClose() { handleClose() {
@ -1884,10 +1915,12 @@ export default {
/deep/ .el-table th.el-table__cell > .cell { /deep/ .el-table th.el-table__cell > .cell {
color: rgb(86, 254, 226); color: rgb(86, 254, 226);
} }
/deep/.el-table__body, .el-table__footer, .el-table__header{ /deep/.el-table__body,
.el-table__footer,
.el-table__header {
width: 100% !important; width: 100% !important;
} }
/deep/ .el-table__body td .cell{ /deep/ .el-table__body td .cell {
// width: 60px !important; // width: 60px !important;
} }
// &::before { // &::before {
@ -1912,7 +1945,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
.left { .left {
// width: 604px; // width: 604px;
width:21.18%; width: 21.18%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -1952,9 +1985,9 @@ export default {
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #ffffff ; color: #ffffff;
.numText{ .numText {
color: #ffffff ; color: #ffffff;
} }
.numText:before { .numText:before {
content: attr(text); content: attr(text);
@ -1968,7 +2001,6 @@ export default {
); );
} }
} }
} }
.info { .info {
display: flex; display: flex;
@ -2006,7 +2038,7 @@ export default {
} }
.middle { .middle {
// width: 1590px; // width: 1590px;
width:55.7%; width: 55.7%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -2034,7 +2066,7 @@ export default {
margin-right: 15px; margin-right: 15px;
} }
.btnAct { .btnAct {
color: rgb(244,201,7); color: rgb(244, 201, 7);
background: url("../assets/images/unityBtn.png") no-repeat; background: url("../assets/images/unityBtn.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 15px; margin-right: 15px;
@ -2079,6 +2111,7 @@ export default {
position: absolute; position: absolute;
left: 40px; left: 40px;
width: 222px; width: 222px;
height: 5%;
bottom: 20px; bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -2140,7 +2173,7 @@ export default {
} }
.right { .right {
// width: 604px; // width: 604px;
width:21.28%; width: 21.28%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -2366,11 +2399,15 @@ export default {
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
// }
</style> </style>
<style lang="less"> <style lang="less">
.el-select { // .selectChange {
// width: 100% !important;
// height: 100% !important;
.el-select {
margin-left: -44px; margin-left: -44px;
.el-input__inner { .el-input__inner {
background: url("../assets/images/selectCard.png") no-repeat; background: url("../assets/images/selectCard.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -2387,14 +2424,13 @@ export default {
margin-right: 17px; margin-right: 17px;
} }
.el-input__inner::-webkit-input-placeholder { .el-input__inner::-webkit-input-placeholder {
color: rgb(78, 230, 207) // 初始化的文字颜色 color: rgb(78, 230, 207); // 初始化的文字颜色
;
} }
.el-input__inner { .el-input__inner {
color: rgb(78, 230, 207); color: rgb(78, 230, 207);
} }
} }
.el-select-dropdown { .el-select-dropdown {
background-color: rgb(14, 30, 46) !important; background-color: rgb(14, 30, 46) !important;
border: 1px solid rgba(45, 143, 148, 0.5) !important ; border: 1px solid rgba(45, 143, 148, 0.5) !important ;
.el-select-dropdown__item { .el-select-dropdown__item {
@ -2404,14 +2440,18 @@ export default {
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
background-color: rgb(18, 54, 87) !important; background-color: rgb(18, 54, 87) !important;
} }
}
// .el-popper {
// top: 50%;
// }
.el-popper[x-placement^=bottom] {
margin-top: -146px !important;
} }
.el-popper{ .popper__arrow {
top: 50% !important;
.popper__arrow{
left: 171px !important; left: 171px !important;
top: 95px !important; top: 95px !important;
} }
} // }
/** /**
表格有滚动效果但是不显示滚动条 表格有滚动效果但是不显示滚动条
*/ */