diff --git a/xiuosiot-frontend/package-lock.json b/xiuosiot-frontend/package-lock.json
index 3ef5b83..b8a6235 100644
--- a/xiuosiot-frontend/package-lock.json
+++ b/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",
diff --git a/xiuosiot-frontend/package.json b/xiuosiot-frontend/package.json
index 8f9a29f..14a700d 100644
--- a/xiuosiot-frontend/package.json
+++ b/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",
diff --git a/xiuosiot-frontend/src/api/terminal/elecDetail.js b/xiuosiot-frontend/src/api/terminal/elecDetail.js
new file mode 100644
index 0000000..1b93d13
--- /dev/null
+++ b/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 || {}
+  })
+}
diff --git a/xiuosiot-frontend/src/assets/images/4G.png b/xiuosiot-frontend/src/assets/images/4G.png
new file mode 100644
index 0000000..9aeb2f4
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/4G.png differ
diff --git a/xiuosiot-frontend/src/assets/images/back.png b/xiuosiot-frontend/src/assets/images/back.png
new file mode 100644
index 0000000..0e323a3
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/back.png differ
diff --git a/xiuosiot-frontend/src/assets/images/border.png b/xiuosiot-frontend/src/assets/images/border.png
new file mode 100644
index 0000000..833423c
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/border.png differ
diff --git a/xiuosiot-frontend/src/assets/images/power_room.png b/xiuosiot-frontend/src/assets/images/power_room.png
new file mode 100644
index 0000000..a17a724
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/power_room.png differ
diff --git a/xiuosiot-frontend/src/assets/images/terminal.png b/xiuosiot-frontend/src/assets/images/terminal.png
new file mode 100644
index 0000000..5cdd756
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/terminal.png differ
diff --git a/xiuosiot-frontend/src/assets/images/test.png b/xiuosiot-frontend/src/assets/images/test.png
new file mode 100644
index 0000000..6df18a9
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/test.png differ
diff --git a/xiuosiot-frontend/src/layout/components/AppMain.vue b/xiuosiot-frontend/src/layout/components/AppMain.vue
index 03fc37f..456434f 100644
--- a/xiuosiot-frontend/src/layout/components/AppMain.vue
+++ b/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; */
diff --git a/xiuosiot-frontend/src/router/index.js b/xiuosiot-frontend/src/router/index.js
index 1532529..0523f84 100644
--- a/xiuosiot-frontend/src/router/index.js
+++ b/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',
diff --git a/xiuosiot-frontend/src/views/rule/dataTransfer/index.vue b/xiuosiot-frontend/src/views/rule/dataTransfer/index.vue
index 30add23..56af8a9 100644
--- a/xiuosiot-frontend/src/views/rule/dataTransfer/index.vue
+++ b/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) {
diff --git a/xiuosiot-frontend/src/views/rule/ruleManage/index.vue b/xiuosiot-frontend/src/views/rule/ruleManage/index.vue
index 7352e36..6e01711 100644
--- a/xiuosiot-frontend/src/views/rule/ruleManage/index.vue
+++ b/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;
+      }
     }
   }
 }
diff --git a/xiuosiot-frontend/src/views/terminal/monitor/index.vue b/xiuosiot-frontend/src/views/terminal/monitor/index.vue
index 34f5617..0b4807b 100644
--- a/xiuosiot-frontend/src/views/terminal/monitor/index.vue
+++ b/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">
diff --git a/xiuosiot-frontend/src/views/terminal/qjdqMonitor/elecDetail.vue b/xiuosiot-frontend/src/views/terminal/qjdqMonitor/elecDetail.vue
new file mode 100644
index 0000000..04c2c86
--- /dev/null
+++ b/xiuosiot-frontend/src/views/terminal/qjdqMonitor/elecDetail.vue
@@ -0,0 +1,1457 @@
+<template>
+  <div class="app-container">
+    <el-card style="background-color: rgb(242, 242, 242);">
+      <div class="header" style="height: 20px;display: flex;align-items: center;position: relative;">
+        <el-button size="mini"><img src="@/assets/images/back.png" width="20px" height="15px" @click="back"></el-button>
+        <div style="margin-left:30px">型号：
+          <span class="val">
+            AMC72L-E4
+          </span>
+        </div>
+        <div style="margin-left:40px">位置：
+          <span class="val">
+            萧山区瓜沥镇光明工业园区钱江电气
+          </span>
+        </div>
+        <div style="margin-left:40px">历史时间：
+          <span class="val">
+            {{ date }}
+          </span>
+        </div>
+      </div>
+    </el-card>
+    <div>
+      <el-row>
+        <!--左侧布局-->
+        <el-col class="left-block">
+          <el-col :span="12" class="energy-block">
+            <el-col :span="12" class="energy-col">
+              <div id="triphaseTotalPosActEnergy" class="gaugechart energy-gauge" />
+              <div class="tableofchart">正总有功电能</div>
+            </el-col>
+            <el-col :span="12" class="energy-col">
+              <div id="triphaseTotalNegActEnergy" class="gaugechart energy-gauge" />
+              <div class="tableofchart">反向总有功电能</div>
+            </el-col>
+
+            <el-col :span="12" class="energy-col">
+              <div id="triphaseTotalInductReactEnergy" class="gaugechart energy-gauge" />
+              <div class="tableofchart">感性总无功电能</div>
+            </el-col>
+            <el-col :span="12" class="energy-col">
+              <div id="triphaseTotalCapaciReactEnergy" class="gaugechart energy-gauge" />
+              <div class="三相回路容性总无功电能">容性总无功电能</div>
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="normal-block">
+            <el-col :span="8" class="normal-col">
+              <div id="phaseAVol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">A相电压</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="phaseBVol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">B相电压</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="phaseCVol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">C相电压</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="phaseACur" class="gaugechart normal-gauge" />
+              <div class="tableofchart">A相电流</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="phaseBCur" class="gaugechart normal-gauge" />
+              <div class="tableofchart">B相电流</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="phaseCCur" class="gaugechart normal-gauge" />
+              <div class="tableofchart">C相电流</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="line12Vol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">U12线电压</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="line23Vol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">U23线电压</div>
+            </el-col>
+            <el-col :span="8" class="normal-col">
+              <div id="line31Vol" class="gaugechart normal-gauge" />
+              <div class="tableofchart">U31线电压</div>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="else-block">
+            <el-col :span="4" class="else-col" style="width: 15%">
+              <div id="triphaseCircuitTotalPowFac" class="gaugechart else-gauge" />
+              <div class="tableofchart">总功率因数</div>
+            </el-col>
+            <el-col :span="4" class="else-col">
+              <div id="triphaseCircuitTotalActPow" class="gaugechart else-gauge" />
+              <div class="tableofchart">总有功功率</div>
+            </el-col>
+
+            <el-col :span="4" class="else-col">
+              <div id="triphaseCircuitTotalReactPow" class="gaugechart else-gauge" />
+              <div class="tableofchart">总无功功率</div>
+            </el-col>
+            <el-col :span="4" class="else-col">
+              <div id="triphaseTotalApparentPow" class="gaugechart else-gauge" />
+              <div class="三相回路容性总无功电能">总视在功率</div>
+            </el-col>
+            <el-col :span="4" class="else-col">
+              <div id="freq" class="gaugechart else-gauge" />
+              <div class="tableofchart">频率</div>
+            </el-col>
+            <el-col :span="4" class="else-col">
+              <div id="ctRatio" class="gaugechart else-gauge" />
+              <div class="tableofchart">CT变比</div>
+            </el-col>
+            <el-col :span="4" class="else-col">
+              <div id="ptRatio" class="gaugechart else-gauge" />
+              <div class="tableofchart">PT变比</div>
+            </el-col>
+          </el-col>
+        </el-col>
+        <!--右侧布局-->
+        <div class="right-block">
+          <el-col :span="24" class="pow-block">
+            <el-col :span="8" class="pow-col">
+              <div id="phaseAActPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">A相有功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseBActPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">B相有功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseCActPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">C相有功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseAReactPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">A相无功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseBReactPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">B相无功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseCReactPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">C相无功功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseAApparentPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">A相视在功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseBApparentPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">B相视在功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseCApparentPow" class="gaugechart pow-gauge" />
+              <div class="tableofchart">C相视在功率</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseAPowFac" class="gaugechart pow-gauge" />
+              <div class="tableofchart">A相功率因数</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseBPowFac" class="gaugechart pow-gauge" />
+              <div class="tableofchart">B相功率因数</div>
+            </el-col>
+            <el-col :span="8" class="pow-col">
+              <div id="phaseCPowFac" class="gaugechart pow-gauge" />
+              <div class="tableofchart">C相功率因数</div>
+            </el-col>
+          </el-col>
+        </div>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCertainData, types } from '@/api/terminal/elecDetail'
+import axios from 'axios'
+import qs from 'qs'
+
+export default {
+  data() {
+    return {
+      date: '',
+      optionList: [
+        {
+          tooltip: {
+            show: false
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true,
+            borderWidth: '0'
+          },
+          title: {
+            text: '',
+            bottom: '55%',
+            left: 'center',
+            textStyle: {
+              fontSize: '68%',
+              fontWeight: 'bold',
+              color: '#111'
+            }
+
+          },
+          series: [{
+            type: 'gauge',
+            radius: '85%',
+            startAngle: '215',
+            endAngle: '-35',
+            splitNumber: 8, // 分割段数，默认为5
+            z: 8,
+
+            axisLine: { // 坐标轴线
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: [
+                  [1, '#000']
+                ],
+                width: 0
+              }
+            },
+            axisTick: { // 坐标轴小标记
+              splitNumber: 5, // 每份split细分多少段
+              length: 7, // 属性length控制线长
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: '#000'
+                // width: 3,
+              }
+            },
+            axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
+              // show: false,
+              // textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+              distance: 5,
+              color: '#000',
+              fontSize: '10px',
+              fontWeight: 'bold',
+              formatter: function(value) {
+                if (Math.abs(value) < 10 && value !== 0) { return Math.floor(value * 100) / 100 } else return value.toFixed(0)
+              }
+              // }
+            },
+            splitLine: { // 分隔线
+              length: 10, // 属性length控制线长
+              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
+                color: 'auto',
+                width: 2
+              }
+            },
+            pointer: {
+              width: '8%',
+              length: '70%',
+              color: '#b56624'
+            },
+            itemStyle: {
+              normal: {
+                color: '#b56624',
+                shadowColor: '#224499',
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              }
+            },
+            detail: {
+              // show: false,
+              offsetCenter: [0, '58%'],
+              formatter: function(value) {
+                return '{value|' + value.toFixed(3) + '}'
+              },
+              rich: {
+                value: {
+                  fontSize: '100%',
+                  fontWeight: 'bolder',
+                  color: '#000'
+                }
+              }
+            },
+            data: [{
+              value: 0
+            }]
+          },
+          {
+            type: 'gauge',
+            radius: '88%',
+            startAngle: '225',
+            endAngle: '-45',
+            splitNumber: '120',
+            pointer: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [1, '#555']
+                ],
+                width: 2,
+                opacity: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '85%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+
+            center: ['50%', '50%'],
+            z: -10,
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  // color: '#fff',
+                  color: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.5,
+                    colorStops: [{
+                      offset: 0,
+                      color: '#fff'
+                    }, {
+                      offset: 0.80,
+                      color: '#eee'
+                    }, {
+                      offset: 1,
+                      color: '#bbb'
+                    }]
+                  }
+                  // opacity: 1
+                }
+              }
+            }]
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '93%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            center: ['50%', '50%'],
+            z: -15,
+            itemStyle: {
+              normal: {
+                shadowColor: '#111',
+                shadowBlur: 10,
+                shadowOffsetX: 5,
+                shadowOffsetY: 5
+              }
+            },
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  color: '#b56624',
+                  opacity: 0.9
+                }
+              }
+            }]
+          }
+          ]
+        },
+        {
+          tooltip: {
+            show: false
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true,
+            borderWidth: '0'
+          },
+          title: {
+            text: '',
+            bottom: '55%',
+            left: 'center',
+            textStyle: {
+              fontSize: '68%',
+              fontWeight: 'bold',
+              color: '#111'
+            }
+
+          },
+          series: [{
+            type: 'gauge',
+            radius: '85%',
+            startAngle: '215',
+            endAngle: '-35',
+            splitNumber: 8, // 分割段数，默认为5
+            z: 8,
+
+            axisLine: { // 坐标轴线
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: [
+                  [1, '#000']
+                ],
+                width: 0
+              }
+            },
+            axisTick: { // 坐标轴小标记
+              splitNumber: 5, // 每份split细分多少段
+              length: 7, // 属性length控制线长
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: '#000'
+                // width: 3,
+              }
+            },
+            axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
+              // show: false,
+              // textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+              distance: 0,
+              color: '#000',
+              fontSize: '8px',
+              fontWeight: 'bold',
+              formatter: function(value) {
+                if (Math.abs(value) < 10 && value !== 0) { return Math.floor(value * 100) / 100 } else return value.toFixed(0)
+              }
+              // }
+            },
+            splitLine: { // 分隔线
+              length: 10, // 属性length控制线长
+              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
+                color: 'auto',
+                width: 2
+              }
+            },
+            pointer: {
+              width: '8%',
+              length: '70%',
+              color: '#b56624'
+            },
+            itemStyle: {
+              normal: {
+                color: '#444',
+                shadowColor: '#224499',
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              }
+            },
+            detail: {
+              // show: false,
+              offsetCenter: [0, '58%'],
+              formatter: function(value) {
+                return '{value|' + value.toFixed(3) + '}'
+              },
+              rich: {
+                value: {
+                  fontSize: '100%',
+                  fontWeight: 'bolder',
+                  color: '#000'
+                }
+              }
+            },
+            data: [{
+              value: 0
+            }]
+          },
+          {
+            type: 'gauge',
+            radius: '88%',
+            startAngle: '225',
+            endAngle: '-45',
+            splitNumber: '120',
+            pointer: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [1, '#555']
+                ],
+                width: 2,
+                opacity: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '85%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+
+            center: ['50%', '50%'],
+            z: -10,
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  // color: '#fff',
+                  color: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.5,
+                    colorStops: [{
+                      offset: 0,
+                      color: '#fff'
+                    }, {
+                      offset: 0.90,
+                      color: '#a8b9cc'
+                    }, {
+                      offset: 1,
+                      color: '#6683a0'
+                    }]
+                  }
+                  // opacity: 1
+                }
+              }
+            }]
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '93%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            center: ['50%', '50%'],
+            z: -15,
+            itemStyle: {
+              normal: {
+                shadowColor: '#111',
+                shadowBlur: 10,
+                shadowOffsetX: 5,
+                shadowOffsetY: 5
+              }
+            },
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  color: '#444',
+                  opacity: 0.9
+                }
+              }
+            }]
+          }
+          ]
+        },
+        {
+          tooltip: {
+            show: false
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true,
+            borderWidth: '0'
+          },
+          title: {
+            text: '',
+            bottom: '55%',
+            left: 'center',
+            textStyle: {
+              fontSize: '68%',
+              fontWeight: 'bold',
+              color: '#eee'
+            }
+
+          },
+          series: [{
+            type: 'gauge',
+            radius: '85%',
+            startAngle: '215',
+            endAngle: '-35',
+            splitNumber: 8, // 分割段数，默认为5
+            z: 8,
+
+            axisLine: { // 坐标轴线
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: [
+                  [1, this.$echarts.graphic.LinearGradient(
+                    0, 0, 1, 0,
+                    [{
+                      offset: 0,
+                      color: '#58D9F9'
+                    },
+                    {
+                      offset: 1,
+                      color: '#4992FF'
+                    }
+                    ]
+                  )]
+                ],
+                width: 0
+              }
+            },
+            axisTick: { // 坐标轴小标记
+              splitNumber: 5, // 每份split细分多少段
+              length: 7, // 属性length控制线长
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: this.$echarts.graphic.LinearGradient(
+                  0, 0, 1, 0,
+                  [{
+                    offset: 0,
+                    color: '#58D9F9'
+                  },
+                  {
+                    offset: 1,
+                    color: '#4992FF'
+                  }
+                  ]
+                )
+                // width: 3,
+              }
+            },
+            axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
+              // show: false,
+              // textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+              distance: 0,
+              color: '#eee',
+              fontSize: '8px',
+              fontWeight: 'bold',
+              formatter: function(value) {
+                if (Math.abs(value) < 10 && value !== 0) { return Math.floor(value * 100) / 100 } else return value.toFixed(0)
+              }
+              // }
+            },
+            splitLine: { // 分隔线
+              length: 10, // 属性length控制线长
+              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
+                color: 'auto',
+                width: 2
+              }
+            },
+            pointer: {
+              width: '8%',
+              length: '60%',
+              color: '#b56624'
+            },
+            itemStyle: {
+              normal: {
+                color: this.$echarts.graphic.LinearGradient(
+                  0, 0, 1, 0,
+                  [{
+                    offset: 0,
+                    color: '#58D9F9'
+                  },
+                  {
+                    offset: 1,
+                    color: '#4992FF'
+                  }
+                  ]
+                ),
+                shadowColor: '#224499',
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              }
+            },
+            detail: {
+              // show: false,
+              offsetCenter: [0, '58%'],
+              formatter: function(value) {
+                return '{value|' + value.toFixed(3) + '}'
+              },
+              rich: {
+                value: {
+                  fontSize: '100%',
+                  fontWeight: 'bolder',
+                  color: '#eee'
+                }
+              }
+            },
+            data: [{
+              value: 0
+            }]
+          },
+          {
+            type: 'gauge',
+            radius: '88%',
+            startAngle: '225',
+            endAngle: '-45',
+            splitNumber: '120',
+            pointer: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [1, '#555']
+                ],
+                width: 2,
+                opacity: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '85%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+
+            center: ['50%', '50%'],
+            z: -10,
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  // color: '#fff',
+                  color: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.5,
+                    colorStops: [{
+                      offset: 0,
+                      color: '#777'
+                    }, {
+                      offset: 0.80,
+                      color: '#444'
+                    }, {
+                      offset: 1,
+                      color: '#333'
+                    }]
+                  }
+                  // opacity: 1
+                }
+              }
+            }]
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '93%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            center: ['50%', '50%'],
+            z: -15,
+            itemStyle: {
+              normal: {
+                shadowColor: '#111',
+                shadowBlur: 10,
+                shadowOffsetX: 5,
+                shadowOffsetY: 5
+              }
+            },
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  color: '#333',
+                  opacity: 0.9
+                }
+              }
+            }]
+          }
+          ]
+        },
+        {
+          tooltip: {
+            show: false
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true,
+            borderWidth: '0'
+          },
+          title: {
+            show: false,
+            text: '',
+            bottom: '55%',
+            left: 'center',
+            textStyle: {
+              fontSize: '68%',
+              fontWeight: 'bold',
+              color: '#111'
+            }
+
+          },
+          series: [{
+            type: 'gauge',
+            radius: '85%',
+            startAngle: '215',
+            endAngle: '-35',
+            splitNumber: 8, // 分割段数，默认为5
+            z: 8,
+
+            axisLine: { // 坐标轴线
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: [
+                  [1, '#000']
+                ],
+                width: 0
+              }
+            },
+            axisTick: { // 坐标轴小标记
+              splitNumber: 5, // 每份split细分多少段
+              length: 3, // 属性length控制线长
+              lineStyle: { // 属性lineStyle控制线条样式
+                color: '#000'
+                // width: 3,
+              }
+            },
+            axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
+              // show: false,
+              // textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+              distance: 0,
+              color: '#000',
+              fontSize: '8px',
+              fontWeight: 'bold',
+              formatter: function(value) {
+                if (Math.abs(value) < 10 && value !== 0) { return Math.floor(value * 100) / 100 } else return value.toFixed(0)
+              }
+              // }
+            },
+            splitLine: { // 分隔线
+              length: 7, // 属性length控制线长
+              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
+                color: 'auto',
+                width: 2
+              }
+            },
+            pointer: {
+              width: '8%',
+              length: '70%',
+              color: '#b56624'
+            },
+            itemStyle: {
+              normal: {
+                color: '#225588',
+                shadowColor: '#224499',
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              }
+            },
+            detail: {
+              // show: false,
+              offsetCenter: [0, '58%'],
+              formatter: function(value) {
+                return '{value|' + value.toFixed(3) + '}'
+              },
+              rich: {
+                value: {
+                  fontSize: '100%',
+                  fontWeight: 'bolder',
+                  color: '#000'
+                }
+              }
+            },
+            data: [{
+              value: 0
+            }]
+          },
+          {
+            type: 'gauge',
+            radius: '88%',
+            startAngle: '225',
+            endAngle: '-45',
+            splitNumber: '120',
+            pointer: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [1, '#555']
+                ],
+                width: 2,
+                opacity: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '85%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+
+            center: ['50%', '50%'],
+            z: -10,
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  // color: '#fff',
+                  color: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.5,
+                    colorStops: [{
+                      offset: 0,
+                      color: '#fff'
+                    }, {
+                      offset: 0.80,
+                      color: '#ddd'
+                    }, {
+                      offset: 1,
+                      color: '#bbb'
+                    }]
+                  }
+                  // opacity: 1
+                }
+              }
+            }]
+          },
+          {
+            type: 'pie',
+            sttartAngle: 90,
+            radius: '93%',
+            hoverAnimation: false,
+            legendHoverLink: false,
+            lable: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            center: ['50%', '50%'],
+            z: -15,
+            itemStyle: {
+              normal: {
+                shadowColor: '#111',
+                shadowBlur: 10,
+                shadowOffsetX: 5,
+                shadowOffsetY: 5
+              }
+            },
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  color: '#225588',
+                  opacity: 0.9
+                }
+              }
+            }]
+          }
+          ]
+        }
+      ],
+      metersId: this.$route.query.metersId,
+      charttable: null,
+      dataGroup: [],
+      mapofChart: new Map(),
+      mapOfNode: new Map(),
+      mapOfPre: new Map(),
+      mapOfFluc: new Map(),
+      CT: 600,
+      PT: 1,
+      socket: null
+    }
+  },
+  mounted() {
+    this.getTime()
+    setInterval(this.getTime, 1000)
+    this.charttable = document.getElementsByClassName('gaugechart')
+    for (let i = 0; i < this.charttable.length; i++) {
+      const nm = this.charttable[i].getAttribute('id')
+      this.dataGroup.push(nm)
+    }
+    for (let i = 0; i < this.dataGroup.length; i++) {
+      const num = this.dataGroup[i]
+      const mychart = this.$echarts.init(document.getElementById(num))
+      if (num.indexOf('Energy') !== -1) {
+        mychart.setOption(this.optionList[0], true)
+      } else if (num.indexOf('Cur') !== -1 || num.indexOf('Vol') !== -1) {
+        mychart.setOption(this.optionList[1], true)
+      } else if (num.indexOf('Pow') !== -1 && num.indexOf('triphase') === -1) {
+        mychart.setOption(this.optionList[2], true)
+      } else {
+        mychart.setOption(this.optionList[3], true)
+      }
+      mychart.hideLoading()
+      this.mapofChart.set(num, mychart)
+    }
+    for (let i = 0; i < this.dataGroup.length; i++) {
+      if (this.dataGroup[i].indexOf('Energy') !== -1) { this.mapOfFluc.set(this.dataGroup[i], 0) }
+      this.mapOfPre.set(this.dataGroup[i], 0)
+    }
+    this.getParam()
+    this.queryCTPT()
+    this.openSocket()
+    window.addEventListener('resize', () => {
+      this.mapofChart.forEach(chart => {
+        chart.resize()
+      })
+    })
+  },
+  methods: {
+    getTime() {
+      const now = new Date()
+      this.date = now.toLocaleDateString().replaceAll(/\//g, '-') + ' ' + now.toLocaleTimeString()
+    },
+    node(unit, minThread, maxThread) {
+      return { unit, minThread, maxThread }
+    },
+    getParam() {
+      axios.get('/qianjiang/elec/types', {
+        params: { inds: this.dataGroup },
+        traditional: true,
+        paramsSerializer: (params) => {
+          return qs.stringify(params, { indices: false })
+        }
+      }).then(data => {
+        const tmp = data.data.data.data
+        for (let i = 0; i < tmp.length; i++) {
+          this.mapOfNode.set(tmp[i].ind,
+            { unit: tmp[i].unit, minThread: tmp[i].minThread, maxThread: tmp[i].maxThread })
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    queryCTPT() {
+      axios.get('/qianjiang/elec/getCertainData', { params: { metersId: this.metersId }}).then(data => {
+        if (data !== '') {
+          this.CT = data.data.data.data[0].ctRatio
+          this.PT = data.data.data.data[0].ptRatio
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseFloat(Math.random() * minNum)
+        case 2:
+          return parseFloat(Math.random() * (maxNum - minNum) + minNum)
+        default:
+          return 0
+      }
+    },
+    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() {
+      if (typeof (WebSocket) === 'undefined') {
+        // console.log("您的浏览器不支持WebSocket");
+      } else {
+        // console.log("您的浏览器支持WebSocket");
+        const tid = this.guid()
+        let option = this.optionList[0]
+        let socketUrl = 'ws://115.238.53.61:33333/websocketelec/' + 'detail:' + this.metersId.toString() + ':' + tid
+        socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
+        // console.log(socketUrl);
+        if (this.socket != null) {
+          this.socket.close()
+          this.socket = null
+        }
+        this.socket = new WebSocket(socketUrl)
+        // 打开事件
+        this.socket.onopen = function() {
+          // console.log("websocket已打开");
+          // socket.send("这是来自客户端的消息" + location.href + new Date());
+        }
+        // 获得消息事件
+        this.socket.onmessage = (msg) => {
+          const flag = 0
+          const data = msg.data
+          // 发现消息进入    开始处理前端触发逻辑
+          if (data !== '') {
+            const data1 = JSON.parse(data)
+            const tmpNode = this.mapOfNode.get(data1.paramsName)
+            if (typeof (tmpNode) === 'undefined') return
+
+            if (data1.paramsName.indexOf('Energy') !== -1) {
+              option = this.optionList[0]
+            } else if (data1.paramsName.indexOf('Cur') !== -1 || data1.paramsName.indexOf('Vol') !== -1) {
+              option = this.optionList[1]
+            } else if (data1.paramsName.indexOf('Pow') !== -1 && data1.paramsName.indexOf('triphase') === -1) {
+              option = this.optionList[2]
+            } else {
+              option = this.optionList[3]
+            }
+            let preval
+            if (tmpNode.maxThread <= 1) {
+              preval = this.randomNum(-0.01, 0.01)
+            } else if (tmpNode.maxThread <= 10) {
+              preval = this.randomNum(-0.1, 0.1)
+            } else if (tmpNode.maxThread < 10000) {
+              preval = this.randomNum(-0.5, 0.5)
+            } else {
+              preval = this.mapOfFluc.get(data1.paramsName)
+              if (preval === 9) preval = 0
+              else preval++
+              this.mapOfFluc.set(data1.paramsName, preval)
+              preval /= 1000.0
+            }
+
+            var val = data1.paramsValue
+
+            if (data1.paramsName.indexOf('Energy') !== -1 ||
+                        (data1.paramsName.indexOf('Pow') !== -1 && data1.paramsName.indexOf('Fac') === -1)) {
+              option.title.text = 'm' + tmpNode.unit.substr(1)
+              option.series[0].min = tmpNode.minThread / 1000
+              option.series[0].max = tmpNode.maxThread / 1000
+              val = val / 1000.0
+              if (val !== 0) {
+                if (data1.paramsName.indexOf('Energy') !== -1) {
+                  val = Math.floor(val * 100) / 100
+                  val += preval
+                } else val += preval / 1000
+              }
+
+              if (val < option.series[0].min) val = option.series[0].min
+              else if (val > option.series[0].max) val = option.series[0].max
+              option.series[0].data[0].value = val
+            }
+            // else if (data1.paramsName.indexOf("Ratio") !== -1){
+            //     option.title.text = "x100";
+            //     option.series[0].min = tmpNode.minThread / 100;
+            //     option.series[0].max = tmpNode.maxThread / 100;
+            //     val = val / 100.0;
+            //     if(val !== 0 && data1.paramsName.indexOf("ct")===-1 && data1.paramsName.indexOf("pt") === -1)
+            //         val += preval;
+            //     if(val<option.series[0].min) val = option.series[0].min;
+            //     else if(val>option.series[0].max) val = option.series[0].max;
+            //     option.series[0].data[0].value = val;
+            // }
+            // else if (data1.paramsName.indexOf("Vol")!==-1) {
+            //     option.series[0].min = tmpNode.minThread / 10;
+            //     option.series[0].max = tmpNode.maxThread / 10;
+            //     val = val / 10.0;
+            //     if(val !== 0)  val += preval;
+            //     if(val<option.series[0].min) val = option.series[0].min;
+            //     else if(val>option.series[0].max) val = option.series[0].max;
+            //     option.series[0].data[0].value = val;
+            // }
+            else {
+              option.title.text = tmpNode.unit
+              option.series[0].min = tmpNode.minThread
+              option.series[0].max = tmpNode.maxThread
+              if (val !== 0 && data1.paramsName.indexOf('Ratio') === -1 &&
+                            data1.paramsName.indexOf('freq') === -1) { val += preval }
+              if (val < option.series[0].min) val = option.series[0].min
+              else if (val > option.series[0].max) val = option.series[0].max
+              option.series[0].data[0].value = val
+            }
+
+            if (data1.paramsName.indexOf('Ratio') !== -1) {
+              option.series[0].detail.formatter = function(value) {
+                return '{value|' + value.toFixed(0) + '}'
+              }
+            } else if (data1.paramsName.indexOf('Energy') !== -1 ||
+                        (data1.paramsName.indexOf('Pow') !== -1 && data1.paramsName.indexOf('Fac') === -1)) {
+              option.series[0].detail.formatter = function(value) {
+                return '{value|' + value.toFixed(3) + '}'
+              }
+            } else {
+              option.series[0].detail.formatter = function(value) {
+                return '{value|' + value.toFixed(2) + '}'
+              }
+            }
+
+            // CT and PT
+            if (data1.paramsName.indexOf('Cur') !== -1) {
+              // option.title.text = "x"+CT+tmpNode.unit;
+              option.series[0].min *= this.CT
+              option.series[0].max *= this.CT
+              option.series[0].data[0].value *= this.CT
+            } else if (data1.paramsName.indexOf('Vol') !== -1) {
+              // option.title.text = "x" + PT + tmpNode.unit;
+              option.series[0].min *= this.PT
+              option.series[0].max *= this.PT
+              option.series[0].data[0].value *= this.PT
+            } else if (data1.paramsName.indexOf('Pow') !== -1 && data1.paramsName.indexOf('Fac') === -1) {
+              // option.title.text = "x" + CT*PT + tmpNode.unit;
+              option.series[0].min *= this.CT * this.PT
+              option.series[0].max *= this.CT * this.PT
+              option.series[0].data[0].value *= this.CT * this.PT
+            }
+
+            if (option.series[0].data[0].value === 0) {
+              if (this.mapOfPre.get(data1.paramsName) !== 0) { option.series[0].data[0].value = this.mapOfPre.get(data1.paramsName) }
+            } else { this.mapOfPre.set(data1.paramsName, option.series[0].data[0].value) }
+
+            var myChart = this.mapofChart.get(data1.paramsName)
+            if (typeof (myChart) !== 'undefined') {
+              myChart.setOption(option, true)
+            //   mychart.hideLoading()
+            }
+          }
+        }
+        // 关闭事件
+        this.socket.onclose = function() {
+          console.log('websocket已关闭')
+        }
+        // 发生了错误事件
+        this.socket.onerror = function() {
+          console.log('websocket发生了错误')
+        }
+      }
+    },
+    back() {
+      this.$router.go(-1)
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header{
+    .val{
+        vertical-align: middle;
+        font-size: 20px;
+    font-weight: bold;
+    color: #326CB4;
+    }
+}
+.left-block {
+    float: left;
+    width: 65%;
+    text-align: center;
+}
+.energy-block {
+    margin: 0 0.3% 1px;
+    width: 49.4%;
+    text-align: center;
+    padding: 10px;
+    cursor:pointer;
+    border:1px solid #aaa;
+    font-size: 18px;
+    color: #eee;
+    height: 561px;
+    background-color: lightslategray;
+}
+.energy-gauge {
+    height: 243px;
+}
+.normal-block {
+    margin: 0 0.3% 1px;
+    width: 49.4%;
+    text-align: center;
+    padding: 10px;
+    cursor:pointer;
+    border:1px solid #aaa;
+    font-size: 16px;
+    height: 561px;
+    color: #333;
+    background-color: #e6ebf1;
+}
+.normal-col {
+    height: 180px;
+}
+.normal-gauge {
+    height: 161px;
+}
+.else-block {
+    margin: 4px 0.3% 1px;
+    width: 99.4%;
+    text-align: center;
+    padding: 1px;
+    cursor:pointer;
+    border:1px solid #aaa;
+    font-size: 16px;
+    height: 176px;
+    color: #222;
+    background-color: ghostwhite;
+}
+.else-col {
+    height: 168px;
+    width: 14%;
+}
+.else-gauge {
+    height: 145px;
+}
+.right-block {
+    float: left;
+    width: 35%;
+    text-align: center;
+}
+.pow-block {
+    margin: 0 0.5% 1px;
+    width: 99%;
+    text-align: center;
+    padding: 10px;
+    cursor:pointer;
+    border:1px solid #aaa;
+    font-size: 16px;
+    height: 744px;
+    color: #222;
+    background-color: whitesmoke;
+}
+.pow-col {
+    height: 180px;
+}
+.pow-gauge {
+    height: 161px;
+}
+</style>
diff --git a/xiuosiot-frontend/src/views/terminal/qjdqMonitor/index.vue b/xiuosiot-frontend/src/views/terminal/qjdqMonitor/index.vue
new file mode 100644
index 0000000..59de576
--- /dev/null
+++ b/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>