|
|
@@ -0,0 +1,486 @@
|
|
|
+<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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
zhengkaixin