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{
addDay:'',
subDay:'',
routerTitle:['首页','20kv','35kv','站房智辅'],
routerTitle:['10KV','20kv','安全管控','站房智辅'],
routerActive:0,
weatherArr:[
{day:'今天',temperature:'',pic:require('./assets/images/sun.png')},

5
src/api/index.js
View File

@ -97,4 +97,9 @@ export const getCabinetData = (data) => {
export const getCabinetCameraList = (data) => {
return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data
,{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() {
let params = {
pageSize: 1000,
pageSize: 50,
token: localStorage.getItem("token"),
};
getCabinetList(params).then((res) => {

292
src/views/index.vue
View File

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