src/components/bigScreenPage/big_screen_page.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/bigScreenPage/monitorBox.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/dataTest/btsStatus.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/components/card.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/home-admin.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/home-monitor.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/home-ops.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/bigScreenPage/big_screen_page.vue
@@ -7,7 +7,7 @@ <img @click="close" class="close-switch" src="./images/switch.png"> </div> <div class="big-screen-header-time"> {{time}} {{ time }} </div> </div> <div class="big-screen-body"> @@ -86,15 +86,26 @@ </div> <div class="big-screen-middle-body"> <div class="map-chart-container"> <map-chart ref="map"></map-chart> <monitor-box :num="devCount" :warn="devAlarmNum" :box-style="{ top: '40px', left: '14px', 'backgroundImage': 'url(' + deviceImage + ')', }"></monitor-box> <monitor-box :num="powerNum" :warn="powerAlarmNum" :box-style="{ top: '40px', right: '14px', 'backgroundImage': 'url(' + powerImage + ')', }"></monitor-box> <monitor-box :num="battGroupCount" :warn="battAlarmNum" :box-style="{ bottom: '40px', left: '14px', 'backgroundImage': 'url(' + batteryImage + ')', }"></monitor-box> <monitor-box :num="battGroupCount" :warn="capAlarmNum" :box-style="{ bottom: '40px', right: '14px', 'backgroundImage': 'url(' + xuHangImage + ')', }"></monitor-box> <!-- left --> <div class="flex-left"> <monitor-box :num="devCount" :warn="devAlarmNum" :box-style="{ top: '40px', left: '14px', 'backgroundImage': 'url(' + deviceImage + ')', }"></monitor-box> <monitor-box :num="battGroupCount" :warn="battAlarmNum" :box-style="{ bottom: '40px', left: '14px', 'backgroundImage': 'url(' + batteryImage + ')', }"></monitor-box> </div> <!-- center --> <div class="flex-center"> <div class="inner"> <map-chart ref="map"></map-chart> </div> </div> <!-- right --> <div class="flex-right"> <monitor-box :num="powerNum" :warn="powerAlarmNum" :box-style="{ top: '40px', right: '14px', 'backgroundImage': 'url(' + powerImage + ')', }"></monitor-box> <monitor-box :num="battGroupCount" :warn="capAlarmNum" :box-style="{ bottom: '40px', right: '14px', 'backgroundImage': 'url(' + xuHangImage + ')', }"></monitor-box> </div> </div> </div> </div> @@ -386,14 +397,8 @@ updateMap(data) { const getColor = (o) => { let res = 0; if (o.fbs9100State) { if (o.fbs9100State.devOnlinevollow) { res = 5; } else { res = o.fbs9100State.devWorkstate } } return ['#0081ff', '#ff6b6c', '#66f842', 'transparent', 'transparent', '#7668f9'][res]; res = o.devWorkState <= 3 ? o.devWorkState : 0; return ['#0081ff', '#66f842', '#ff6b6c', '#7668f9'][res]; }; this.$refs.map.setData(data.map(v => { return { @@ -438,9 +443,9 @@ let date = new Date(); let weeks = ["日", "一", "二", "三", "四", "五", "六"]; let week = weeks[date.getDay()]; this.time = date.format("yyyy-MM-dd hh:mm:ss")+" 星期"+week; if(isChange) { setTimeout(()=>{ this.time = date.format("yyyy-MM-dd hh:mm:ss") + " 星期" + week; if (isChange) { setTimeout(() => { this.changeTime(); }, 1000) } @@ -491,6 +496,7 @@ top: 8px; right: 16px; } .big-screen-header-time { position: absolute; top: 48px; @@ -566,7 +572,27 @@ .map-chart-container { position: relative; height: 100%; padding-bottom: 8px; /* padding-bottom: 8px; */ padding: 0 14px 8px; display: flex; } .flex-right, .flex-left { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0; } .flex-center { flex: 1; position: relative; } .flex-center .inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .ac-container { src/components/bigScreenPage/monitorBox.vue
@@ -48,7 +48,7 @@ <style scoped> .monitor-box { position: absolute; /* position: absolute; */ width: 196px; height: 226px; background-size: 100% 100%; src/views/dataTest/btsStatus.vue
@@ -6,31 +6,16 @@ <!-- 省 --> <div class="table-cell text-right">机房名称:</div> <div class="table-cell"> <el-select v-model="params.devId" size="small" @change="sendMessage" placeholder="请选择机房名称" > <el-option v-for="item in stationNameList" :key="item.value" :label="item.label" :value="item.value" > <el-select v-model="params.devId" size="small" @change="sendMessage" placeholder="请选择机房名称"> <el-option v-for="item in stationNameList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <!-- 事件类型 --> <div class="table-cell text-right">设备工作状态:</div> <div class="table-cell"> <el-select ref="selecetEvent" v-model="params.devWorkstate" @change="sendMessage" size="small" placeholder="请选择设备工作状态" > <el-select ref="selecetEvent" v-model="params.devWorkstate" @change="sendMessage" size="small" placeholder="请选择设备工作状态"> <el-option label="全部(共6种)" :value="-1"></el-option> <el-option label="在线浮充" :value="0"></el-option> <el-option label="预充电(限流充电)" :value="1"></el-option> @@ -44,67 +29,19 @@ </div> <div class="flex-page-content"> <!-- 表单 --> <el-table stripe size="small" :data="dataList" height="100%" class="tableCent" > <el-table-column prop="stationName" align="center" label="机房名称" min-width="360" ></el-table-column> <el-table stripe size="small" :data="dataList" height="100%" class="tableCent"> <el-table-column prop="stationName" align="center" label="机房名称" min-width="360"></el-table-column> <!-- <el-table-column prop="devId" align="center" label="设备ID"></el-table-column>--> <!-- <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column>--> <el-table-column prop="deviceStatus" align="center" label="设备状态" ></el-table-column> <el-table-column prop="deviceStatus" align="center" label="设备状态"></el-table-column> <!-- workstate[_data.devWorkstate] --> <el-table-column prop="devCaptestOnlinevol" align="center" min-width="120" label="在线电压(V)" ></el-table-column> <el-table-column prop="devCaptestGroupvol" align="center" min-width="120" label="组端电压(V)" ></el-table-column> <el-table-column prop="devCaptestCurr" align="center" min-width="120" label="组端电流(mA)" ></el-table-column> <el-table-column prop="devTemp" align="center" min-width="120" label="设备温度(℃)" ></el-table-column> <el-table-column prop="devCaptestCap" align="center" min-width="120" label="已测容量(AH)" ></el-table-column> <el-table-column prop="dev61850Alarms" align="center" label="设备告警" ></el-table-column> <el-table-column prop="dateLong" align="center" label="已测时间" ></el-table-column> <el-table-column prop="devCaptestOnlinevol" align="center" min-width="120" label="在线电压(V)"></el-table-column> <el-table-column prop="devCaptestGroupvol" align="center" min-width="120" label="组端电压(V)"></el-table-column> <el-table-column prop="devCaptestCurr" align="center" min-width="120" label="组端电流(mA)"></el-table-column> <el-table-column prop="devTemp" align="center" min-width="120" label="设备温度(℃)"></el-table-column> <el-table-column prop="devCaptestCap" align="center" min-width="120" label="已测容量(AH)"></el-table-column> <el-table-column prop="dev61850Alarms" align="center" label="设备告警"></el-table-column> <el-table-column prop="dateLong" align="center" label="已测时间"></el-table-column> </el-table> </div> <!-- 底部 --> @@ -144,8 +81,20 @@ this.queryStationName(); // this.startQueryList(); }, mounted() {}, mounted() { let status = this.$route.query.status; if (status) { this.params.devWorkstate = status * 1; } }, methods: { activeFN() { // 告警等级 let status = this.$route.query.status; if (status) { this.params.devWorkstate = status * 1; } }, // // 展示数据数量 // handleSizeChange(val) { // this.pageSize = val; @@ -228,10 +177,9 @@ }); this.stationNameList = params; }) .catch((err) => {}); .catch((err) => { }); }, }, //methods }; </script> <style lang="less" scoped> </style> <style lang="less" scoped></style> src/views/home/components/card.vue
@@ -85,7 +85,8 @@ height: 86.57%; } .status { background: rgb(198, 198, 22); // background: rgb(198, 198, 22); background: #f4ea2a; width: 1.5rem; height: 1.5rem; border-radius: 50%; src/views/home/home-admin.vue
@@ -527,13 +527,9 @@ const getColor = (o) => { let res = 0; if (o.fbs9100State) { if (o.fbs9100State.devOnlinevollow) { res = 5; } else { res = o.fbs9100State.devWorkstate } res = o.fbs9100State.devWorkstate <= 3 ? o.fbs9100State.devWorkstate : 0; } return ['#0081ff', '#ff6b6c', '#66f842', 'transparent', 'transparent', '#7668f9'][res]; return ['#0081ff', '#66f842', '#ff6b6c', '#7668f9'][res]; }; this.$refs.map.setData(data.map(v => { return { src/views/home/home-monitor.vue
@@ -6,99 +6,64 @@ <div class="main-view"> <div class="side"> <div class="dischargTask"> <card-box title="今日放电任务" content-class="task-content"> <template #tools> <el-radio-group size="mini" v-model="taskLevel"> <el-radio-button :label="0">按状态</el-radio-button> <el-radio-button :label="1">按站点</el-radio-button> </el-radio-group> </template> <card-box title="今日放电站点" content-class="task-content"> <div class="row row-desc"> <div class="col col1"> <div class="label">放电站点:</div> <div class="value">{{ plan.sum }}</div> <div class="label">核容放电站点:</div> <div class="value">{{ charge.hrNum }}</div> </div> <div class="col col2"> <div class="label">进行中:</div> <div class="value">{{ plan.runList.length }}</div> </div> <div class="col col3"> <div class="label">未执行:</div> <div class="value">{{ plan.waitList.length }}</div> <div class="label">停电放电站点:</div> <div class="value">{{ charge.tdNum }}</div> </div> </div> <div class="content-wrap"> <div class="scroller"> <!-- 手风琴 --> <el-collapse v-if="0 == taskLevel" accordion class="collapse"> <el-collapse-item class="collapse-item" :disabled="!plan.runList.length"> <el-collapse accordion class="collapse"> <el-collapse-item class="collapse-item hr" :disabled="!charge.hrNum"> <template #title> <div class="title">进行中</div> <div class="count">{{ plan.runList.length }}</div> <div class="title">核容放电</div> <div class="count">{{ charge.hrNum }}</div> </template> <!-- 内容 --> <div class="list-item" v-for="(item, idx) in plan.runList" :key="'run_' + idx"> <div class="list-item" v-for="(item, idx) in charge.hrList" :key="'run_' + idx"> <el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3"> <div class="station">{{ item.stationName3 }}</div> </el-tooltip> <div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div> <div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div> <div class="test-time">累计放电{{ item.timeLong }}</div> <div class="btn" @click="goPlan(item)">查看</div> <div class="btn" @click="goRT(item)">实时</div> </div> <div class="btn-grp"> <el-button size="mini" type="primary" @click="goDevStatus(2)">查看更多</el-button> </div> </el-collapse-item> <el-collapse-item class="collapse-item" :disabled="!plan.waitList.length"> <el-collapse-item class="collapse-item td" :disabled="!charge.tdNum"> <template #title> <div class="title">未执行</div> <div class="count">{{ plan.waitList.length }}</div> <div class="title">停电放电</div> <div class="count">{{ charge.tdNum }}</div> </template> <!-- 内容 --> <div class="list-item" v-for="(item, idx) in plan.waitList" :key="'wait_' + idx"> <el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3"> <div class="station">{{ item.stationName3 }}</div> </el-tooltip> <div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div> <div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div> <div class="test-time">累计放电---</div> <div class="btn" @click="goPlan(item)">查看</div> </div> </el-collapse-item> </el-collapse> <el-collapse v-if="1 == taskLevel" accordion class="collapse"> <el-collapse-item class="collapse-item" :disabled="!plan.nodeList.length"> <template #title> <div class="title">节点站</div> <div class="count">{{ plan.nodeList.length }}</div> </template> <!-- 内容 --> <div class="list-item" v-for="(item, idx) in plan.nodeList" :key="'node_' + idx"> <div class="list-item" v-for="(item, idx) in charge.tdList" :key="'wait_' + idx"> <el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3"> <div class="station">{{ item.stationName3 }}</div> </el-tooltip> <div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div> <div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div> <div class="test-time">累计放电{{ item.timeLong }}</div> <div class="btn" @click="goPlan(item)">查看</div> <div class="btn" @click="goRT(item)">实时</div> </div> </el-collapse-item> <el-collapse-item class="collapse-item" :disabled="!plan.normalList.length"> <template #title> <div class="title">普通站</div> <div class="count">{{ plan.normalList.length }}</div> </template> <!-- 内容 --> <div class="list-item" v-for="(item, idx) in plan.normalList" :key="'normal_' + idx"> <el-tooltip class="item" effect="dark" placement="top-start" :content="item.stationName3"> <div class="station">{{ item.stationName3 }}</div> </el-tooltip> <div class="node">{{ item.nodeStation ? '节点站' : '非节点站' }}</div> <div class="start-time">放电开始时间{{ item.dischargeStarttime }}</div> <div class="test-time">累计放电{{ item.timeLong }}</div> <div class="btn" @click="goPlan(item)">查看</div> <div class="btn-grp"> <el-button size="mini" type="primary" @click="goDevStatus(3)">查看更多</el-button> </div> </el-collapse-item> </el-collapse> </div> </div> <div class="btn-grp"> <el-button size="mini" type="primary" @click="goDevStatus(-1)">更多站点状态</el-button> </div> </card-box> </div> @@ -112,7 +77,7 @@ </template> <div class="row row-desc"> <div class="col col1"> <div class="label">告警站点:</div> <div class="label">告警总数:</div> <div class="value">{{ alarm.sum }}</div> </div> <div class="col col2"> @@ -128,7 +93,7 @@ <div class="scroller"> <!-- 手风琴 --> <el-collapse v-if="0 == alarmLevel" accordion class="collapse collapse-alarm"> <el-collapse-item class="collapse-item" :disabled="!alarm.level1Sum"> <el-collapse-item class="collapse-item level1" :disabled="!alarm.level1Sum"> <template #title> <div class="title">一级告警</div> <div class="count">{{ alarm.level1Sum }}</div> @@ -150,7 +115,7 @@ <div class="item-icon el-icon-arrow-right"></div> </div> </el-collapse-item> <el-collapse-item class="collapse-item" :disabled="!alarm.level2Sum"> <el-collapse-item class="collapse-item level2" :disabled="!alarm.level2Sum"> <template #title> <div class="title">二级告警</div> <div class="count">{{ alarm.level2Sum }}</div> @@ -172,7 +137,7 @@ <div class="item-icon el-icon-arrow-right"></div> </div> </el-collapse-item> <el-collapse-item class="collapse-item" :disabled="!alarm.level3Sum"> <el-collapse-item class="collapse-item level3" :disabled="!alarm.level3Sum"> <template #title> <div class="title">三级告警</div> <div class="count">{{ alarm.level3Sum }}</div> @@ -194,7 +159,7 @@ <div class="item-icon el-icon-arrow-right"></div> </div> </el-collapse-item> <el-collapse-item class="collapse-item" :disabled="!alarm.level4Sum"> <el-collapse-item class="collapse-item level4" :disabled="!alarm.level4Sum"> <template #title> <div class="title">四级告警</div> <div class="count">{{ alarm.level4Sum }}</div> @@ -268,14 +233,12 @@ mixins: [WSMixin], data() { return { taskLevel: 0, alarmLevel: 0, plan: { sum: 0, runList: [], waitList: [], nodeList: [], normalList: [], charge: { hrNum: 0, tdNum: 0, hrList: [], tdList: [], }, alarm: { sum: 0, @@ -316,46 +279,47 @@ // console.log(res, "=====111data"); let { bAlmRes, planRes, bDebRes, bPwrRes, stationMap, chargeRes, } = res.data; // 更新地图 if (this.$refs.map) { this.updateMap(stationMap); } this.formatPlan(planRes); this.formatCharge(chargeRes); this.formatAlarm(bAlmRes, bDebRes, bPwrRes); }, formatPlan(res) { formatCharge(res) { let { code, data, data2 } = res; if (code && data) { // console.log(data2); let nowTime = data2.nowTime; const getTimeLong = (time) => formatSeconds(Math.ceil((new Date(nowTime).getTime() - new Date(time).getTime()) / 1000)); this.plan.sum = data2.disNumAll; this.plan.runList = data2.stateMap.state3; this.plan.waitList = data2.stateMap.state0.map((v) => ({ ...v, timeLong: getTimeLong(v.dischargeStarttime) })); this.plan.nodeList = data2.nodeMap.node1.map((v) => { if (3 == v.dischargeState) { v.timeLong = getTimeLong(v.dischargeStarttime); } else { v.timeLong = '---'; } return v; let { stateNumMap: { state2: hrNum, state3: tdNum, }, stateMap: { state2: hrList, state3: tdList, }, nowTime, } = data2; // const getTimeLong = (time) => formatSeconds(Math.ceil((new Date(nowTime).getTime() - new Date(time).getTime()) / 1000)); hrList.map(v => { let rtstate = v.rtstate || {battTestStarttime: 0, battTestTlong: 0}; v.dischargeStarttime = formatSeconds(rtstate.battTestStarttime); v.timeLong = formatSeconds(rtstate.battTestTlong); }); this.plan.normalList = data2.nodeMap.node0.map((v) => { if (3 == v.dischargeState) { v.timeLong = getTimeLong(v.dischargeStarttime); } else { v.timeLong = '---'; } return v; }); this.charge.hrNum = hrNum; this.charge.tdNum = tdNum; this.charge.hrList = hrList; this.charge.tdList = tdList; } else { this.charge.hrNum = 0; this.charge.tdNum = 0; this.charge.hrList = []; this.charge.tdList = []; } }, formatAlarm(alarmRes, devRes, pwrRes) { @@ -391,13 +355,9 @@ const getColor = (o) => { let res = 0; if (o.fbs9100State) { if (o.fbs9100State.devOnlinevollow) { res = 5; } else { res = o.fbs9100State.devWorkstate } res = o.fbs9100State.devWorkstate <= 3 ? o.fbs9100State.devWorkstate : 0; } return ['#0081ff', '#ff6b6c', '#66f842', 'transparent', 'transparent', '#7668f9'][res]; return ['#0081ff', '#66f842', '#ff6b6c', '#7668f9'][res]; }; this.$refs.map.setData(data.map(v => { return { @@ -437,15 +397,29 @@ } }); }, goPlan(data) { let { stationName1, stationName, dischargeState } = data; goRT(obj) { let search = "?province=" + obj.stationName1 + "&city=" + obj.stationName2 + "&county=" + obj.stationName5 + "&home=" + obj.stationName3 + "&batt=" + obj.battGroupId + // list组件重载 "&listReload=1"; this.$router.push("/dataTest/movingRingSystem/" + search); }, goDevStatus(status) { this.$router.push({ path: '/jobManage/planManage', path: '/dataTest/btsStatus', query: { stationName1, stationName, dischargeState status } }); } }, }, mounted() { @@ -490,7 +464,7 @@ } .label { width: 5.6em; width: 6.6em; } .col3 .label { @@ -550,7 +524,7 @@ } /deep/ .el-collapse-item__header { height: 72px; height: 62px; padding-left: 0.8em; padding-right: 0.8em; color: #00fefe; @@ -750,4 +724,37 @@ } } } .btn-grp { text-align: center; padding: 4px 0; } .list-item+.btn-grp { background: #034b63; } .hr.collapse-item /deep/ .el-collapse-item__header { background: #1ae008; } .td.collapse-item /deep/ .el-collapse-item__header { background: #0955f7; } .level1.collapse-item /deep/ .el-collapse-item__header { background: #d5001d; } .level2.collapse-item /deep/ .el-collapse-item__header { background: #f59a23; } .level3.collapse-item /deep/ .el-collapse-item__header { background: #eeea3a; } .level4.collapse-item /deep/ .el-collapse-item__header { background: #d7d7d7; } </style> src/views/home/home-ops.vue
@@ -102,12 +102,10 @@ <div class="value">{{ item.value }}</div> </div> </div> <!-- <div class="col col3"> <div class="col col3" v-if="kvList.length < 2"> <div class="col-inner"> <div class="label">110kv站:</div> <div class="value">{{ desc.v110 }}</div> </div> </div> --> </div> </div> <div class="row"> <div class="col col1"> @@ -639,13 +637,14 @@ const getColor = (o) => { let res = 0; if (o.fbs9100State) { if (o.fbs9100State.devOnlinevollow) { res = 5; } else { res = o.fbs9100State.devWorkstate } // if (o.fbs9100State.devOnlinevollow) { // res = 5; // } else { // res = o.fbs9100State.devWorkstate // } res = o.fbs9100State.devWorkstate <= 3 ? o.fbs9100State.devWorkstate : 0; } return ['#0081ff', '#ff6b6c', '#66f842', 'transparent', 'transparent', '#7668f9'][res]; return ['#0081ff', '#66f842', '#ff6b6c', '#7668f9'][res]; }; this.$refs.map.setData(data.map(v => { return {