设备运行状态

src/api/index.js

@@ -151,4 +151,9 @@ export default {
     getControlRtDatastation(data){
       return sendGetRequest('/getcontrol/rtDatastation',data)
     },
+    //控制器 设备运行状态
+    getControlGetState(data){
+      return sendGetRequest('/readControl/getState',data)
+    },
+   
 };

src/assets/css/main.css

@@ -1491,13 +1491,17 @@
 .realTime .page-content {
   position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
   flex-shrink: 0;
   background: rgba(0, 92, 178, 0.15);
   border: 2px solid rgba(0, 186, 255, 0.2);
   padding: 30px 20px 20px;
 }
 
+.realTime .page-content.control-page {
+  height: auto;
+}
+
 .realTime .page-content .control-view {
   display: flex;
   align-items: center;
@@ -1689,6 +1693,107 @@
   height: calc(100% - 51px);
 }
 
+.realTime .page-content .status-view .status-view-content .status-true {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div {
+  min-width: unset;
+  flex-shrink: 0;
+  font-size: 14px;
+  height: 30px;
+  margin: 10px 8px 0 !important;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 50px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div > img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts {
+  width: 100%;
+  height: 153px;
+  position: relative;
+  background: url(../img/status-true-charts.png) no-repeat;
+  background-size: 227px 114px;
+  background-position: center 20px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > img {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 6px;
+  width: 28px;
+  height: 27px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > div {
+  width: 100%;
+  height: 100%;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text {
+  width: 227px;
+  height: 35px;
+  padding: 0 16px;
+  background: url(../img/status-true-text.png) no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #8BEAFF;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right {
+  font-size: 14px;
+  font-family: Arial;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
 .realTime .page-content .status-view .status-view-content .status-noTrue {
   width: 100%;
   height: 100%;

src/assets/css/main.scss

@@ -1585,12 +1585,14 @@
     .page-content {
         position: relative;
         width: 100%;
-        height: auto;
+        height: 100%;
         flex-shrink: 0;
         background: rgba(0, 92, 178, 0.15);
         border: 2px solid rgba(0, 186, 255, 0.20);
         padding: 30px 20px 20px;
-
+        &.control-page{
+            height:auto;
+        }
         .control-view {
             display: flex;
             align-items: center;
@@ -1794,6 +1796,103 @@
                 width: 100%;
                 height: calc(100% - 51px);
 
+                .status-true {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    .status-fan{
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                        >div{
+                            min-width: unset;
+                            flex-shrink: 0;
+                            font-size: 14px;
+                            height: 30px;
+                            margin: 10px 8px 0 !important;
+                            >img{
+                                width: 16px;
+                                height:16px;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                    .status-true-sel {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        width: 100%;
+                        padding: 0 50px;
+
+                        >div {
+                            display: flex;
+                            align-items: center;
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            >img {
+                         
+                                width: 20px;
+                                height: 20px;
+                                margin-right: 10px;
+                            }
+                        }
+                    }
+
+                    .status-true-charts {
+                        width: 100%;
+                        height: 153px;
+                        position: relative;
+                        background: url(../img/status-true-charts.png) no-repeat;
+                        background-size: 227px 114px;
+                        background-position: center 20px;
+
+                        >img {
+                            position: absolute;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            bottom: 6px;
+                            width: 28px;
+                            height: 27px;
+                        }
+
+                        >div {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .status-true-text {
+                        width: 227px;
+                        height: 35px;
+                        padding: 0 16px;
+                        background: url(../img/status-true-text.png) no-repeat;
+                        background-size: 100% 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .status-true-text-left {
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #8BEAFF;
+                        }
+
+                        .status-true-text-right {
+                            font-size: 14px;
+                            font-family: Arial;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                        }
+                    }
+                }
+
                 .status-noTrue {
                     width: 100%;
                     height: 100%;

src/assets/js/charts.js

@@ -176,19 +176,19 @@ export function realTimeLine(id, data) {
         Xdata.push(el.time)
 
         el.value.forEach((el1, index1) => {
-            var containsIndex = dataList.findIndex(function(item) {
+            var containsIndex = dataList.findIndex(function (item) {
                 return item.name === el1.name;
             });
-            if(containsIndex==-1){
+            if (containsIndex == -1) {
-                dataList.push({name:el1.name,value:[]})
+                dataList.push({ name: el1.name, value: [] })
-            }else{
+            } else {
                 dataList[containsIndex].value.push(el1.value)
             }
         })
 
 
     })
-    dataList.forEach((el,index)=>{
+    dataList.forEach((el, index) => {
         list.push({
             name: el.name,
             data: el.value,
@@ -315,3 +315,116 @@ export function realTimeLine(id, data) {
         myChart.resize();
     });
 }
+export function statusCharts(id, data) {
+    console.log(id,11);
+    var chartDom = document.getElementById(id);
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    const pointerData = data; // 仪表指针数据
+    option = {
+        series: [
+            {
+                type: "gauge",
+                radius:75,
+                z: 1,
+                center:['50%','87%'],
+                startAngle: 180,
+                endAngle: 0,
+                splitNumber: 50,
+                splitLine: {
+                    show: false,
+                    length: 15,
+                    distance: -10,
+                    lineStyle: {
+                        color: "#fff",
+                        width: 1,
+                    },
+                },
+                detail: {
+                    show: false,
+                    offsetCenter: ['50%', '50%'],
+                    fontSize: 22,
+                    formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
+                    rich: {
+                        a: {
+                            fontSize: 20,
+                            color: "rgba(84, 108, 198, 0.65)",
+                        },
+                        b: {
+                            fontSize: 24,
+                            color: "rgba(84, 108, 198, 0.65)",
+                        },
+                    },
+                },
+                // 仪表盘的线，颜色值为一个数组
+                axisLine: {
+                    show: true,
+                    // 两端是否设置为圆角；在5.0之后的版本有效
+                    roundCap: false,
+                    lineStyle: {
+                        width: 15,
+                        shadowColor: "#0093ee", //默认透明
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowBlur: 20,
+                        opacity: 1,
+                        color: [
+                            [
+                                pointerData / 100,
+                                {
+                                    x: 0,
+                                    y: 0,
+                                    x1: 1,
+                                    y1: 0,
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(110, 224, 255, 1)",
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(0, 200, 255, 1)",
+                                        },
+                                    ],
+                                },
+                            ],
+                            [1, "rgba(0,0,0,0.15)"],
+                        ],
+                    },
+                },
+                // 仪表盘刻度标签
+                axisLabel: {
+                    show: true,
+                    color: "#fff",
+                    fontSize: 14,
+                    distance: -35,
+                    formatter: (val) => {
+                        const num = Math.floor(val);
+                        return num % 20 === 0 ? num : "";
+                    },
+                },
+                pointer:{
+                    width :5,
+                    itemStyle:{
+                        color:'rgba(10, 243, 167, 1)'
+                    }
+                },
+                // 刻度
+                axisTick: {
+                    show: false,
+                },
+                // 指针，此设置仅对5.0以上的版本生效
+              
+                data: [pointerData],
+            },
+           
+        ],
+    };
+
+
+    option && myChart.setOption(option);
+    window.addEventListener("resize", function () {
+        myChart.resize();
+    });
+}

src/views/page/realTime.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="formula realTime">
-        <div class="page-content new-data">
+        <div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
 
             <div class="control-view" v-if="deviceName == 10">
                 <div class="title">气象站:</div>
@@ -62,13 +62,139 @@
                 <div class="right" id="realTime-line"></div>
             </div>
         </div>
-
+        <div class="page-content" v-if="deviceName == 10">
+            <div class="table-title">
+                <img src="../../assets/image/status.png" alt="" />
+                设备运行状态
+            </div>
+            <div class="flex-view border-none">
+                <div class="status-view">
+                    <div class="status-view-top">
+                        <div class="status-view-top-left">{{ fanStatus.name }}</div>
+                        <!-- <el-popover placement="top" width="140">
+                            <div class="set-status-blue">进入修改设定值</div>
+                            <el-popover placement="top" width="160">
+                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
+                                </p>
+                                <div style="text-align: right; margin: 0">
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
+                                </div>
+                                <div class="set-status-red" slot="reference">删除</div>
+                            </el-popover>
+                            <el-popover placement="right" width="100">
+                                <input v-model="item.index" type="text" class="status-save">
+                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
+                                <div class="set-status-blue" slot="reference">排序</div>
+                            </el-popover>
+                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                        </el-popover> -->
+                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                    </div>
+                    <div class="status-view-content">
+                        <div v-if="fanStatus.open != 0" class="status-true">
+                            <div class="status-true-sel">
+                                <div class="sel">
+                                    <img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    自动控制
+                                </div>
+                                <div class="sel-phone">
+                                    <img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    手机控制
+                                </div>
+                            </div>
+                            <div class="status-fan">
+                                <div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt="">
+                                    1#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="status-noTrue">
+                            <img src="../../assets/img/status-no.png" alt="">
+                            <div>当前设备无效</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="status-view" v-for="item, index in statusList" :key="index">
+                    <div class="status-view-top">
+                        <div class="status-view-top-left">{{ item.name }}</div>
+                        <!-- <el-popover placement="top" width="140">
+                            <div class="set-status-blue">进入修改设定值</div>
+                            <el-popover placement="top" width="160">
+                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
+                                </p>
+                                <div style="text-align: right; margin: 0">
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
+                                </div>
+                                <div class="set-status-red" slot="reference">删除</div>
+                            </el-popover>
+                            <el-popover placement="right" width="100">
+                                <input v-model="item.index" type="text" class="status-save">
+                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
+                                <div class="set-status-blue" slot="reference">排序</div>
+                            </el-popover>
+                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                        </el-popover> -->
+                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                    </div>
+                    <div class="status-view-content">
+                        <div v-if="item.open != 0" class="status-true">
+                            <div class="status-true-sel">
+                                <div class="sel">
+                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    自动控制
+                                </div>
+                                <div class="sel-phone">
+                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    手机控制
+                                </div>
+                            </div>
+                            <div class="status-true-charts">
+                                <img src="../../assets/img/status-true-charts-icon.png" alt="">
+                                <div :id="'statusCharts' + index"></div>
+                            </div>
+                            <div class="status-true-text">
+                                <div class="status-true-text-left">静止状态</div>
+                                <div class="status-true-text-right">{{ item.progress }}%</div>
+                            </div>
+                        </div>
+                        <div v-else class="status-noTrue">
+                            <img src="../../assets/img/status-no.png" alt="">
+                            <div>当前设备无效</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
 import EZUIKit from 'ezuikit-js';
 import { getnowtime } from '../../assets/js/nowTime'
-import { realTimeLine } from '@/assets/js/charts'
+import { realTimeLine, statusCharts } from '@/assets/js/charts'
 import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
 import vueSeamless from 'vue-seamless-scroll'
@@ -79,7 +205,7 @@ export default {
         defaultOption() {
             return {
                 step: 0.3, // 数值越大速度滚动越快
-                limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+                limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
                 hoverStop: true, // 是否开启鼠标悬停stop
                 direction: 2, // 0向下 1向上 2向左 3向右
                 openWatch: true, // 开启数据实时监控刷新dom
@@ -103,8 +229,11 @@ export default {
     },
     data() {
         return {
-            statusList:[{name:'左向天窗',open:true,progress:55,isTrue:true,index:1},
+            statusList: [],
-            {name:'右向天窗',open:true,progress:55,isTrue:false,index:2}],
+
+            fanStatus: {
+                name: '风机', open: 0, status: []
+            },
             time: null,//右上角时间
             list: [],
             inputData: [],
@@ -164,13 +293,16 @@ export default {
         this.$bus.$off('refreshTime')
     },
     methods: {
-        createVideoNew() {
+        padString(str, length) {
+            return str.padStart(length, '0');
+        },
+        createVideoNew(accessToken) {
             // divW和divH是获取了父级宽高 使播放容器能铺满div
             let divW = this.$refs.monitor.clientWidth
             let divH = this.$refs.monitor.clientHeight
             this.player = new EZUIKit.EZUIKitPlayer({
                 id: 'video-js', // 视频容器ID
-                accessToken: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
+                accessToken: accessToken,
                 url: this.url,
                 // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                 // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
@@ -335,8 +467,8 @@ export default {
                 if (!this.player) {
                     this.api.getGethls(data2).then(res => {
                         if (res.data.code == 200) {
-                            this.url = res.data.msg
+                            this.url = res.data.data.ezopen
-                            this.createVideoNew()
+                            this.createVideoNew(res.data.data.accesstoken)
                         }
                     })
                 }
@@ -409,6 +541,39 @@ export default {
                     // console.log(this.controlList);
                 })
 
+                var TargetValue = {
+                    deviceId: store.equipmentList[this.indexs - 1].deviceId
+                }
+                this.api.getControlGetState(TargetValue).then(res => {
+                    if (res.data.code == 200) {
+                        console.log(res.data.data, 123123);
+                        this.fanStatus.open = res.data.data['1023']
+                        this.fanStatus.status = []
+                        var num = res.data.data['1024']
+                        var num1 = this.padString(num.toString(2), 5)
+                        var openListNew = []
+                        openListNew = num1.split("")
+                        this.fanStatus.status = openListNew.reverse()
+                        this.statusList = []
+                        for (var i = 0; i < 4; i++) {
+                            var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
+                            this.statusList.push(statusData)
+                   
+
+                        }
+                        this.$forceUpdate();
+                      setTimeout(() => {
+                        this.statusList.forEach((el,index)=>{
+                            if(el.open!=0){
+                                statusCharts(`statusCharts${index}`,el.progress)
+                            }
+                        })
+                      }, 10);
+
+                    } else {
+                        // this.$message.error(res.data.msg);
+                    }
+                })
                 var data1 = store.equipmentList[this.indexs - 1].deviceId
 
                 this.api.getControlFsdata(data1).then(res => {
@@ -434,8 +599,8 @@ export default {
                     this.api.getGethls(data2).then(res => {
                         // console.log(res.data, 11);
                         if (res.data.code == 200) {
-                            this.url = res.data.msg
+                            this.url = res.data.data.ezopen
-                            this.createVideoNew()
+                            this.createVideoNew(res.data.data.accesstoken)
                         }
                     })
                 }
@@ -492,4 +657,5 @@ export default {
     border: 1px solid #dcdfe6;
     color: #606266;
     font-size: 14px;
-}</style>
+}
+</style>