| | |
| | | <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> |
| | |
| | | </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"> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | 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, |
| | |
| | | // 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) { |
| | |
| | | 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 { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | 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() { |
| | |
| | | } |
| | | |
| | | .label { |
| | | width: 5.6em; |
| | | width: 6.6em; |
| | | } |
| | | |
| | | .col3 .label { |
| | |
| | | } |
| | | |
| | | /deep/ .el-collapse-item__header { |
| | | height: 72px; |
| | | height: 62px; |
| | | padding-left: 0.8em; |
| | | padding-right: 0.8em; |
| | | color: #00fefe; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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> |