|
|
@@ -1,486 +1,534 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-select v-model="orderByShow" @confirm="orderconfirm" :default-value="[orderByIndex.value]" :list="orderByList" ></u-select>
|
|
|
- <u-navbar title="三项电流情况" title-color="#101010"></u-navbar>
|
|
|
- <view class="main">
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 查询设备
|
|
|
- </view>
|
|
|
- <view class="value equipment">
|
|
|
- {{companyInfo.name}}-{{remoteMonitorMeter.name}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 地址
|
|
|
- </view>
|
|
|
- <view class="value ">
|
|
|
- {{remoteMonitorMeter.installationAddress}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 查询时间
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- {{createTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view >
|
|
|
-
|
|
|
-
|
|
|
- <view class="item" @click="orderByShow=true">
|
|
|
- <view class="title">
|
|
|
- 三项电流详情（A）
|
|
|
- </view>
|
|
|
- <view >
|
|
|
- {{orderByIndex.label}}
|
|
|
- <u-icon name="arrow-down"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <table class="border-table">
|
|
|
- <tr>
|
|
|
- <td>设备名称</td>
|
|
|
- <td>A相</td>
|
|
|
- <td>B相</td>
|
|
|
- <td>C相</td>
|
|
|
- </tr>
|
|
|
- <tr v-for="(item,i) in childDcMap" :key="i">
|
|
|
- <td>{{item.meterName}}</td>
|
|
|
- <td>{{item.dcAA}}</td>
|
|
|
- <td>{{item.dcBa}}</td>
|
|
|
- <td>{{item.dcCa}}</td>
|
|
|
-
|
|
|
- </tr>
|
|
|
-
|
|
|
- </table>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 异常记录 -->
|
|
|
- <view class="record-chat" v-if="false">
|
|
|
- <view class="title">
|
|
|
- 异常记录
|
|
|
- </view>
|
|
|
- <view class="chat-box">
|
|
|
- <view class="date">
|
|
|
- 2月4日温度监控
|
|
|
- </view>
|
|
|
- <view class="chat">
|
|
|
- <view id="lineEcharts" style="min-height:400rpx;">
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- <image class="img" src="@/assets/img/recordChat.png" mode=""></image> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 底部 -->
|
|
|
- <view class="bottom" v-if="false">
|
|
|
- <button class="close" @click="closeShow=true">关闭警报</button>
|
|
|
- <button class="create" @click="gotoUrl('/pages/workOrderManagement/faultReport')">创建工单</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 关闭原因 -->
|
|
|
- <u-popup v-model="closeShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010"
|
|
|
- border-radius="24">
|
|
|
- <view class="close-reason">
|
|
|
- <view class="title">
|
|
|
- 请选择关闭原因：
|
|
|
- </view>
|
|
|
- <view class="reason-content">
|
|
|
- <view class="reason-item" v-for="(item,index) in reasonList" :key="index">
|
|
|
- <view class="item-title">
|
|
|
- {{item}}
|
|
|
- </view>
|
|
|
- <view class="item-value" @click="reasonClick(item,index)">
|
|
|
- <label class="radio">
|
|
|
- <radio name="reason" :checked="index === current" /><text></text>
|
|
|
- </label>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="button-box">
|
|
|
- <button class="think" @click="closeShow=false">我在想想</button>
|
|
|
- <button class="confirm" @click="closeWorkOrder">确认关闭</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import * as API from '@/apis/pagejs/index.js'
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- companyInfo: {}, //企业
|
|
|
- remoteMonitorRecord: {}, //设备详细
|
|
|
- remoteMonitorMeter: {}, //设备
|
|
|
- alarmRecord: {}, //异常详细
|
|
|
- alarmConfig: {}, //异常详细
|
|
|
- id: '', //异常id
|
|
|
- closeShow: false,
|
|
|
- childDcMap:[],
|
|
|
- reasonList: ['错误告警','设备已自动恢复','不需要上门解决','平台移桩，可忽视','其他'],
|
|
|
- current: 0,
|
|
|
- myLineChart: null,
|
|
|
- orderByShow:false,
|
|
|
- orderByIndex:{},
|
|
|
- createTime:"",
|
|
|
- orderByList:[
|
|
|
- {
|
|
|
- value:"0",label:"按A与B的差值排序"
|
|
|
- },{
|
|
|
- value:"1",label:"按B与C的差值排序"
|
|
|
- },{
|
|
|
- value:"2",label:"按C与A的差值排序"
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op) {
|
|
|
- if(op.id) {
|
|
|
- this.id = op.id;
|
|
|
- // this.getAlarmRecordDetails(this.id);
|
|
|
- this.getAlarmRecordTPUDetails()
|
|
|
- }
|
|
|
- this.createTime=new Date().toLocaleString()
|
|
|
- this.orderByIndex=this.orderByList[0]
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // this.getLineCharts();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- childDcMapsort(){
|
|
|
- var value=this.orderByIndex.value
|
|
|
- var childDcMap=[]
|
|
|
- this.childDcMap.sort((it1,it2)=>{
|
|
|
- if(value=='0'){
|
|
|
- return it1.abDifference<it2.abDifference?1:-1
|
|
|
- }else if(value=='1'){
|
|
|
- return it1.bcDifference<it2.bcDifference?1:-1
|
|
|
- }else if(value=='2'){
|
|
|
- return it1.acDifference<it2.acDifference?1:-1
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- orderconfirm(e){
|
|
|
- console.log(e)
|
|
|
- this.orderByIndex=e[0]
|
|
|
- this.childDcMapsort()
|
|
|
- },
|
|
|
- getAlarmRecordTPUDetails(id,meterId) {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.alarmRecordTPUDetails({
|
|
|
- meterId:this.id,
|
|
|
- // id:id,
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.childDcMap=response.data.childDcMap;
|
|
|
- this.companyInfo = response.data.companyInfo;
|
|
|
- this.remoteMonitorMeter = response.data.meter;
|
|
|
-
|
|
|
- this.childDcMapsort()
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getAlarmRecordDetails(id) {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.alarmRecordDetails(id).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
- this.companyInfo = response.data.companyInfo;
|
|
|
- this.remoteMonitorMeter = response.data.meter;
|
|
|
-
|
|
|
- this.remoteMonitorRecord = response.data.remoteMonitorRecord;
|
|
|
- this.alarmRecord = response.data.alarmRecord;
|
|
|
- this.alarmConfig = response.data.alarmConfig;
|
|
|
- if(this.alarmConfig.code=='TPU'){
|
|
|
- // this.childDcMap=response.data.childDcMap;
|
|
|
- this.getAlarmRecordTPUDetails(id,this.remoteMonitorMeter.id)
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getLineCharts() {
|
|
|
- if (!this.myLineChart) {
|
|
|
- this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
|
|
|
- width: uni.upx2px(686),
|
|
|
- height: uni.upx2px(400)
|
|
|
- });
|
|
|
- }
|
|
|
- this.myLineChart.clear();
|
|
|
-
|
|
|
- var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
|
|
|
- '17-18点', '19-20点', '21-22点', '23-24点'
|
|
|
- ];
|
|
|
- var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
-
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '6%',
|
|
|
- left: '3%',
|
|
|
- right: '8%',
|
|
|
- bottom: '8%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data1,
|
|
|
- axisLabel: {
|
|
|
- rotate: 40,
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#333"
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} °C'
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '温度',
|
|
|
- type: 'line',
|
|
|
- data: data2,
|
|
|
- itemStyle: {
|
|
|
- color: '#F39423'
|
|
|
- }
|
|
|
- }]
|
|
|
- };
|
|
|
-
|
|
|
- this.myLineChart.setOption(option);
|
|
|
- },
|
|
|
- reasonClick(item,index) {
|
|
|
- this.current = index;
|
|
|
- },
|
|
|
- closeWorkOrder() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/workOrderManagement/workOrderDetails'
|
|
|
- })
|
|
|
- this.closeShow = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .main {
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 28rpx 32rpx;
|
|
|
- border-bottom: 1px solid rgba(242, 242, 242, 1);
|
|
|
-
|
|
|
- .title {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- white-space: pre;
|
|
|
- padding-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- color: rgb(16, 16, 16);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- .reason {
|
|
|
- display: inline-block;
|
|
|
- padding:0 20rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- border-radius: 4px;
|
|
|
- color: rgba(255, 61, 0, 1);
|
|
|
- border: 1px solid rgba(255, 61, 0, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .equipment {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .warning {
|
|
|
- color: rgba(255, 61, 0, 1);
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 异常记录
|
|
|
- .record-chat {
|
|
|
- padding: 40rpx 32rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-box {
|
|
|
- padding: 24rpx 0;
|
|
|
- margin-top: 24rpx;
|
|
|
- border-radius: 8px;
|
|
|
- background: linear-gradient(180deg, rgba(255, 243, 208, 1) 0%, rgba(208, 236, 236, 0) 100%);
|
|
|
-
|
|
|
- .date {
|
|
|
- padding: 0 40rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- height: 400rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 底部
|
|
|
- .bottom {
|
|
|
- background-color: #fff;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- padding: 20rpx 32rpx;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .close {
|
|
|
- width: 328rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(222, 225, 228, 1);
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .create {
|
|
|
- width: 328rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //关闭原因
|
|
|
- .close-reason{
|
|
|
- padding: 32rpx;
|
|
|
- .title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .reason-content{
|
|
|
- margin-top: 60rpx;
|
|
|
- .reason-item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 56rpx;
|
|
|
- .item-title{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .button-box{
|
|
|
- display: flex;
|
|
|
- .think{
|
|
|
- width: 328rpx;
|
|
|
-
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(222,225,228,1);
|
|
|
- color: rgba(51,51,51,1);
|
|
|
-
|
|
|
- }
|
|
|
- .confirm{
|
|
|
- width: 328rpx;
|
|
|
-
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(255,68,68,1);
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .table1,.border-table{
|
|
|
- margin: 8rpx 0;
|
|
|
- width: 100%;
|
|
|
- border-collapse: collapse;
|
|
|
- td{
|
|
|
- border: 1px solid #e7e7e7;
|
|
|
- text-align: end;
|
|
|
-
|
|
|
- padding: 16rpx 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- tr{
|
|
|
- background-color:#f5f5f6
|
|
|
- }
|
|
|
- tr{
|
|
|
- td:first-child{
|
|
|
-
|
|
|
- text-align: start;
|
|
|
- min-width: 20%;
|
|
|
- max-width: 30%;
|
|
|
- }
|
|
|
- td:last-child{
|
|
|
- white-space: pre;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tr1{
|
|
|
- text-align: end;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- tr:nth-child(even) {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-select v-model="orderByShow" @confirm="orderconfirm" :default-value="[orderByIndex.value]"
|
|
|
+ :list="orderByList"></u-select>
|
|
|
+ <u-navbar title="三项电流情况" title-color="#101010"></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 查询设备
|
|
|
+ </view>
|
|
|
+ <view class="value equipment">
|
|
|
+ {{companyInfo.name}}-{{remoteMonitorMeter.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 地址
|
|
|
+ </view>
|
|
|
+ <view class="value ">
|
|
|
+ {{remoteMonitorMeter.installationAddress}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 查询时间
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{createTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="item" @click="orderByShow=true">
|
|
|
+ <view class="title">
|
|
|
+ 三项电流详情（A）
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ {{orderByIndex.label}}
|
|
|
+ <u-icon name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <table class="border-table ">
|
|
|
+ <tr>
|
|
|
+ <td>设备名称</td>
|
|
|
+
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==0||orderByIndex.value==2)
|
|
|
+ }">A相</td>
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==0||orderByIndex.value==1)
|
|
|
+ }">B相</td>
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==1||orderByIndex.value==2)
|
|
|
+ }">C相</td>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(item,i) in childDcMap" :key="i" :class="{
|
|
|
+ childDcMap:i==0
|
|
|
+ }">
|
|
|
+ <td >{{item.meterName}}</td>
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==0||orderByIndex.value==2)
|
|
|
+ }">{{item.dcAA}}</td>
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==0||orderByIndex.value==1)
|
|
|
+ }">{{item.dcBa}}</td>
|
|
|
+ <td :class="{
|
|
|
+ orderByIndex:(orderByIndex.value==1||orderByIndex.value==2)
|
|
|
+ }">{{item.dcCa}}</td>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </table>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 异常记录 -->
|
|
|
+ <view class="record-chat" v-if="false">
|
|
|
+ <view class="title">
|
|
|
+ 异常记录
|
|
|
+ </view>
|
|
|
+ <view class="chat-box">
|
|
|
+ <view class="date">
|
|
|
+ 2月4日温度监控
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <view id="lineEcharts" style="min-height:400rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- <image class="img" src="@/assets/img/recordChat.png" mode=""></image> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <view class="bottom" v-if="false">
|
|
|
+ <button class="close" @click="closeShow=true">关闭警报</button>
|
|
|
+ <button class="create" @click="gotoUrl('/pages/workOrderManagement/faultReport')">创建工单</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 关闭原因 -->
|
|
|
+ <u-popup v-model="closeShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010"
|
|
|
+ border-radius="24">
|
|
|
+ <view class="close-reason">
|
|
|
+ <view class="title">
|
|
|
+ 请选择关闭原因：
|
|
|
+ </view>
|
|
|
+ <view class="reason-content">
|
|
|
+ <view class="reason-item" v-for="(item,index) in reasonList" :key="index">
|
|
|
+ <view class="item-title">
|
|
|
+ {{item}}
|
|
|
+ </view>
|
|
|
+ <view class="item-value" @click="reasonClick(item,index)">
|
|
|
+ <label class="radio">
|
|
|
+ <radio name="reason" :checked="index === current" /><text></text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-box">
|
|
|
+ <button class="think" @click="closeShow=false">我在想想</button>
|
|
|
+ <button class="confirm" @click="closeWorkOrder">确认关闭</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ companyInfo: {}, //企业
|
|
|
+ remoteMonitorRecord: {}, //设备详细
|
|
|
+ remoteMonitorMeter: {}, //设备
|
|
|
+ alarmRecord: {}, //异常详细
|
|
|
+ alarmConfig: {}, //异常详细
|
|
|
+ id: '', //异常id
|
|
|
+ closeShow: false,
|
|
|
+ childDcMap: [],
|
|
|
+ reasonList: ['错误告警', '设备已自动恢复', '不需要上门解决', '平台移桩，可忽视', '其他'],
|
|
|
+ current: 0,
|
|
|
+ myLineChart: null,
|
|
|
+ orderByShow: false,
|
|
|
+ orderByIndex: {},
|
|
|
+ createTime: "",
|
|
|
+ orderByList: [{
|
|
|
+ value: "0",
|
|
|
+ label: "按A与B的差值排序"
|
|
|
+ }, {
|
|
|
+ value: "1",
|
|
|
+ label: "按B与C的差值排序"
|
|
|
+ }, {
|
|
|
+ value: "2",
|
|
|
+ label: "按C与A的差值排序"
|
|
|
+ }, ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if (op.id) {
|
|
|
+ this.id = op.id;
|
|
|
+ // this.getAlarmRecordDetails(this.id);
|
|
|
+ this.getAlarmRecordTPUDetails()
|
|
|
+ }
|
|
|
+ this.createTime = new Date().toLocaleString()
|
|
|
+ this.orderByIndex = this.orderByList[0]
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // this.getLineCharts();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ childDcMapsort() {
|
|
|
+ var value = this.orderByIndex.value
|
|
|
+ var childDcMap = []
|
|
|
+ var id = this.remoteMonitorMeter.id;
|
|
|
+ if (it1.meterId == id) {
|
|
|
+
|
|
|
+ return -1
|
|
|
+ }
|
|
|
+ if (it2.meterId == id) {
|
|
|
+
|
|
|
+ return 1
|
|
|
+ }
|
|
|
+ this.childDcMap.sort((it1, it2) => {
|
|
|
+ if (value == '0') {
|
|
|
+ return it1.abDifference < it2.abDifference ? 1 : -1
|
|
|
+ } else if (value == '1') {
|
|
|
+ return it1.bcDifference < it2.bcDifference ? 1 : -1
|
|
|
+ } else if (value == '2') {
|
|
|
+ return it1.acDifference < it2.acDifference ? 1 : -1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ orderconfirm(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.orderByIndex = e[0]
|
|
|
+ this.childDcMapsort()
|
|
|
+ },
|
|
|
+ getAlarmRecordTPUDetails(id, meterId) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.alarmRecordTPUDetails({
|
|
|
+ meterId: this.id,
|
|
|
+ // id:id,
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.childDcMap = response.data.childDcMap;
|
|
|
+ this.companyInfo = response.data.companyInfo;
|
|
|
+ this.remoteMonitorMeter = response.data.meter;
|
|
|
+
|
|
|
+ this.childDcMapsort()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAlarmRecordDetails(id) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.alarmRecordDetails(id).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.companyInfo = response.data.companyInfo;
|
|
|
+ this.remoteMonitorMeter = response.data.meter;
|
|
|
+
|
|
|
+ this.remoteMonitorRecord = response.data.remoteMonitorRecord;
|
|
|
+ this.alarmRecord = response.data.alarmRecord;
|
|
|
+ this.alarmConfig = response.data.alarmConfig;
|
|
|
+ if (this.alarmConfig.code == 'TPU') {
|
|
|
+ // this.childDcMap=response.data.childDcMap;
|
|
|
+ this.getAlarmRecordTPUDetails(id, this.remoteMonitorMeter.id)
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLineCharts() {
|
|
|
+ if (!this.myLineChart) {
|
|
|
+ this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
|
|
|
+ width: uni.upx2px(686),
|
|
|
+ height: uni.upx2px(400)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.myLineChart.clear();
|
|
|
+
|
|
|
+ var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
|
|
|
+ '17-18点', '19-20点', '21-22点', '23-24点'
|
|
|
+ ];
|
|
|
+ var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '6%',
|
|
|
+ left: '3%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} °C'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '温度',
|
|
|
+ type: 'line',
|
|
|
+ data: data2,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#F39423'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myLineChart.setOption(option);
|
|
|
+ },
|
|
|
+ reasonClick(item, index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ closeWorkOrder() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/workOrderManagement/workOrderDetails'
|
|
|
+ })
|
|
|
+ this.closeShow = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 28rpx 32rpx;
|
|
|
+ border-bottom: 1px solid rgba(242, 242, 242, 1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ white-space: pre;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .reason {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+ border: 1px solid rgba(255, 61, 0, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning {
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 异常记录
|
|
|
+ .record-chat {
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-box {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 243, 208, 1) 0%, rgba(208, 236, 236, 0) 100%);
|
|
|
+
|
|
|
+ .date {
|
|
|
+ padding: 0 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部
|
|
|
+ .bottom {
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .close {
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(222, 225, 228, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .create {
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //关闭原因
|
|
|
+ .close-reason {
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reason-content {
|
|
|
+ margin-top: 60rpx;
|
|
|
+
|
|
|
+ .reason-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 56rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-box {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .think {
|
|
|
+ width: 328rpx;
|
|
|
+
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(222, 225, 228, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm {
|
|
|
+ width: 328rpx;
|
|
|
+
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 68, 68, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table1,
|
|
|
+ .border-table {
|
|
|
+ margin: 8rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: 1px solid #e7e7e7;
|
|
|
+ text-align: end;
|
|
|
+
|
|
|
+ padding: 16rpx 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr {
|
|
|
+ background-color: #f5f5f6
|
|
|
+ }
|
|
|
+
|
|
|
+ tr {
|
|
|
+ td:first-child {
|
|
|
+
|
|
|
+ text-align: start;
|
|
|
+ min-width: 20%;
|
|
|
+ max-width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ td:last-child {
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr1 {
|
|
|
+ text-align: end;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr:nth-child(even) {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderByIndex {
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #CDDC39;
|
|
|
+ }
|
|
|
+
|
|
|
+ .childDcMap td {
|
|
|
+ background-color: #1677FF !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin