add qjdqMonitor page

xiuosiot-frontend/package-lock.json

@@ -39,6 +39,7 @@
         "html-webpack-plugin": "3.2.0",
         "lodash": "^4.17.21",
         "mockjs": "1.0.1-beta3",
+        "qs": "^6.5.3",
         "runjs": "4.3.2",
         "sass": "1.26.8",
         "sass-loader": "8.0.2",
@@ -3145,6 +3146,7 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2 || ^2.0.0",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -5042,6 +5044,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7413,7 +7416,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -11301,6 +11305,7 @@
         "@jest/types": "^24.9.0",
         "anymatch": "^2.0.0",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^1.2.7",
         "graceful-fs": "^4.1.15",
         "invariant": "^2.2.4",
         "jest-serializer": "^24.9.0",
@@ -12098,6 +12103,9 @@
       "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -19237,8 +19245,10 @@
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -19276,6 +19286,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -19573,6 +19584,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",

xiuosiot-frontend/package.json

@@ -44,6 +44,7 @@
     "html-webpack-plugin": "3.2.0",
     "lodash": "^4.17.21",
     "mockjs": "1.0.1-beta3",
+    "qs": "^6.5.3",
     "runjs": "4.3.2",
     "sass": "1.26.8",
     "sass-loader": "8.0.2",

xiuosiot-frontend/src/api/terminal/elecDetail.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getCertainData(data) {
+  return request({
+    url: '/qianjiang/elec/getCertainData',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function types(data) {
+  return request({
+    url: '/qianjiang/elec/types',
+    method: 'get',
+    params: data || {}
+  })
+}

xiuosiot-frontend/src/layout/components/AppMain.vue

@@ -22,7 +22,7 @@ export default {
   /*50 = navbar  */
   background-color: #fafdff;
   min-height: calc(100vh - 140px);
-  height:calc(100vh - 50px);
+  /* height:calc(100vh - 50px); */
   width: 100%;
   position: relative;
   /* overflow: hidden; */

xiuosiot-frontend/src/router/index.js

@@ -152,7 +152,20 @@ export const asyncRouter = [
         path: 'monitor',
         name: 'Monitor',
         component: () => import('@/views/terminal/monitor/index'),
-        meta: { title: '设备监控', permission: ['dashengda', 'hangxiao', 'qianjiangdianqi'] }
+        meta: { title: '设备监控', permission: ['dashengda', 'hangxiao'] }
+      },
+      {
+        path: 'qjdqMonitor',
+        name: 'QJDQMonitor',
+        component: () => import('@/views/terminal/qjdqMonitor/index'),
+        meta: { title: '设备监控', permission: ['qianjiangdianqi'] }
+      },
+      {
+        path: 'elecDetail',
+        name: 'ElecDetail',
+        hidden: true,
+        component: () => import('@/views/terminal/qjdqMonitor/elecDetail'),
+        meta: { title: '电表详情', permission: ['qianjiangdianqi'] }
       },
       {
         path: 'alarm',

xiuosiot-frontend/src/views/rule/dataTransfer/index.vue

@@ -211,6 +211,7 @@ export default {
         .catch((err) => {})
     },
     add() {
+      this.type = 0
       this.visible = true
     },
     view(index) {

xiuosiot-frontend/src/views/rule/ruleManage/index.vue

@@ -47,7 +47,7 @@
           ><svg-icon icon-class="rule_msg_type" class="content-icon" /><span
             class="font"
           >推送方式</span></span>
-          <span class="content-item">邮件</span>
+          <span class="content-item">{{ item.noticeType === 'email' ? '邮件' : '钉钉' }}</span>
         </p>
         <p class="body-content">
           <span
@@ -179,16 +179,24 @@
             </div>
             <el-row style="margin-top:20px">
               <el-col :span="10">
-                <el-form-item label="消息推送地址：">
-                  <el-input v-if="type === 0 || type === 1" v-model="form.noticeAddress">
-                    <template slot="prepend">
-                      邮件
-                    </template>
-                  </el-input>
-                  <span v-else>{{ form.noticeAddress }}</span>
+                <el-form-item label="消息推送方式：">
+                  <el-select v-if="type === 0 || type === 1" v-model="form.noticeType">
+                    <el-option v-for="(item,index) in typeList" :key="index" :value="item.value" :label="item.label" />
+                  </el-select>
+                  <span v-else>{{ form.noticeType === 'email' ? '邮件' : '钉钉' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="10" :offset="2">
+                <el-form-item label="消息推送地址：">
+                  <el-input v-if="type === 0 || type === 1" v-model="form.noticeAddress" />
+                  <el-tooltip v-else :content="form.noticeAddress">
+                    <span class="val">{{ form.noticeAddress }}</span>
+                  </el-tooltip>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="10">
                 <el-form-item label="推送主题：">
                   <el-input v-if="type === 0 || type === 1" v-model="form.noticeContent" />
                   <span v-else>{{ form.noticeContent }}</span>
@@ -284,6 +292,16 @@ export default {
           label: '提示'
         }
       ],
+      typeList: [
+        {
+          label: '邮件',
+          value: 'email'
+        },
+        {
+          label: '钉钉',
+          value: 'dingRob'
+        }
+      ],
       ruleStatusList: ['未生效', '已生效'],
       type: 0 // 0-新增，1-编辑，2-查看
     }
@@ -638,6 +656,13 @@ export default {
             border-color: #1890FF;
         }
       }
+      .val{
+        width: 100%;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
   }
 }

xiuosiot-frontend/src/views/terminal/monitor/index.vue

@@ -79,7 +79,7 @@
         </div>
       </div></el-card>
 
-    <iframe v-else src="http://115.238.53.59:9899/home" width="100%" class="ifm" />
+    <iframe v-else src="http://115.238.53.59:9899/deviceList" width="100%" class="ifm" />
     <!-- 设备详情弹窗 -->
     <el-dialog title="设备监控详情" :visible.sync="visible" :top="dialogTop">
       <div class="card_detail">

xiuosiot-frontend/src/views/terminal/qjdqMonitor/index.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="app-container">
+    <div class="header">
+      <div class="power-room">
+        <img src="@/assets/images/power_room.png" width="50px" height="50px">
+        <div class="text">配电房</div>
+      </div>
+      <div class="center">
+        <div class="terminal">
+          <img src="@/assets/images/terminal.png" width="140px">
+          <div class="text">搭载XIUOS的智能终端</div>
+        </div>
+        <div class="fourG">
+          <img src="@/assets/images/4G.png" width="70px" height="70px">
+        </div>
+      </div>
+    </div>
+    <div class="body">
+      <el-row>
+        <div v-for="(item,index) in data" :key="index" class="device_box">
+          <div class="val">
+            {{ item.value + 'kW·h' }}</div>
+          <img src="@/assets/images/test.png" width="190px" @click="toDetail(index)"></img>
+          <div class="text">{{ item.name }}</div>
+        </div>
+        <div class="device_box" />
+        <div class="device_box" />
+        <div class="device_box" />
+        <div class="device_box" />
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [
+        {
+          name: '电表1(新试验站大厅)',
+          value: 0
+        },
+        {
+          name: '电表2(联络柜)',
+          value: 0
+        },
+        {
+          name: '电表3(电容柜)',
+          value: 0
+        },
+        {
+          name: '电表4(电容柜)',
+          value: 0
+        },
+        {
+          name: '电表5(北三路绕线)',
+          value: 0
+        },
+        {
+          name: '电表6(北四路铁芯)',
+          value: 0
+        },
+        {
+          name: '电表7(北二路变压法)',
+          value: 0
+        },
+        {
+          name: '电表8(北一路绝缘仓库)',
+          value: 0
+        },
+        {
+          name: '电表9(老试验站)',
+          value: 0
+        },
+        {
+          name: '电表10(50吨起重机)',
+          value: 0
+        },
+        {
+          name: '电表11(智慧照明)',
+          value: 0
+        },
+        {
+          name: '电表12(配电房排风扇)',
+          value: 0
+        },
+        {
+          name: '电表13(160吨起重机)',
+          value: 0
+        },
+        {
+          name: '电表14(北五路总装气泵)',
+          value: 0
+        },
+        {
+          name: '电表15(气泵)',
+          value: 0
+        },
+        {
+          name: '电表16(特变铁芯)',
+          value: 0
+        },
+        {
+          name: '电表17(气相干燥东西)',
+          value: 0
+        },
+        {
+          name: '电表18(特变烘房)',
+          value: 0
+        },
+        {
+          name: '电表19(老试验站大厅)',
+          value: 0
+        },
+        {
+          name: '电表20(配电烘房)',
+          value: 0
+        },
+        {
+          name: '电表21(备用)',
+          value: 0
+        },
+        {
+          name: '电表22(总柜)',
+          value: 0
+        },
+        {
+          name: '电表23(电容柜)',
+          value: 0
+        },
+        {
+          name: '电表24(电容柜)',
+          value: 0
+        },
+        {
+          name: '电表25(特变试验)',
+          value: 0
+        },
+        {
+          name: '电表26(特变绕线)',
+          value: 0
+        },
+        {
+          name: '电表27(南二路金工)',
+          value: 0
+        },
+        {
+          name: '电表28(南一路金工)',
+          value: 0
+        },
+        {
+          name: '电表29(南三路金工)',
+          value: 0
+        },
+        {
+          name: '电表30(日立北)',
+          value: 0
+        },
+        {
+          name: '电表31(车间照明(1))',
+          value: 0
+        },
+        {
+          name: '电表32(车间照明(2))',
+          value: 0
+        },
+        {
+          name: '电表33(车间照明(3))',
+          value: 0
+        },
+        {
+          name: '电表34(胶套南)',
+          value: 0
+        },
+        {
+          name: '电表35(喷丸)',
+          value: 0
+        },
+        {
+          name: '电表36(日立南)',
+          value: 0
+        },
+        {
+          name: '电表37(油库)',
+          value: 0
+        },
+        {
+          name: '电表38(备用)',
+          value: 0
+        },
+        {
+          name: '电表39(总伏)',
+          value: 0
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.openSocket()
+  },
+  methods: {
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16 | 0; var v = c == 'x' ? r : (r & 0x3 | 0x8)
+
+        return v.toString(16)
+      })
+    },
+    openSocket() {
+      const tid = this.guid()
+      const socketUrl = 'ws://115.238.53.59:18080/websocket/qjdq/' + tid
+      const socket = new WebSocket(socketUrl)
+      socket.onmessage = msg => {
+        if (msg.data && !msg.data.includes('连接已建立')) {
+          const valueList = JSON.parse(msg.data)
+          this.data.forEach((item, index) => {
+            item.value = valueList[index] ? valueList[index] : 0
+          })
+        }
+      }
+    },
+    toDetail(index) {
+      this.$router.push({ path: '/terminal/elecDetail', query: { metersId: index + 2 }})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  background: url('~@/assets/images/border.png') no-repeat;
+  background-size: 95% 95%;
+  background-position: center 70%;
+  height: auto;
+  min-height: calc(100vh - 140px);
+  background-color: #f5f5f5;
+  width: 100%;
+  .header {
+    font-size: 14px;
+    height: 100px;
+    display: flex;
+    color: #ffffff;
+    font-family: PingFang SC-Regular, PingFang SC;
+    .power-room {
+      .text {
+        text-align: center;
+        background: #f25656;
+        border-radius: 4px;
+        line-height: 1.5;
+        margin: auto;
+        // width: 80%;
+      }
+    }
+    .center {
+      margin: auto;
+      display: flex;
+      .terminal {
+        text-align: center;
+        .text {
+          background: #000000;
+          border-radius: 4px;
+          line-height: 1.5;
+          padding: 0 5px;
+        }
+      }
+      .fourG {
+        height: 70px;
+        background: #f0f0f3;
+        box-shadow: 10px 10px 24px 0px rgba(174, 174, 192, 0.2),
+          -10px -10px 24px 0px rgba(255, 255, 255, 0.6);
+        border-radius: 16px 16px 16px 16px;
+      }
+    }
+  }
+  .body {
+    text-align: center;
+    padding-top: 2%;
+    .device_box {
+      display: inline-block;
+      width: 230px;
+      text-align: center;
+      margin-top: 30px;
+      position: relative;
+      img{
+        cursor: pointer;
+      }
+      .val {
+        width: 88px;
+        height: 25px;
+        text-align: center;
+        line-height: 25px;
+        color: rgb(0, 160, 170);
+        font-weight: bold;
+        font-size: 14px;
+        position: absolute;
+        top: 13.5%;
+        left: 29%;
+      }
+      .text {
+        cursor: pointer;
+        margin-top: -20px;
+      }
+    }
+  }
+}
+</style>