管道总长度统计结果为null时报错处理、视频监控

gassafety-system/src/main/resources/mapper/system/TPipeMapper.xml

@@ -49,7 +49,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </select>
 
     <select id="countPipeLength" resultType="double">
-        select sum(pipe_length) from t_pipe
+        select COALESCE(sum(pipe_length), 0) from t_pipe
         where is_del = '0'
     </select>
         

gassafety-web/src/views/videoMonitoring/video/index.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="5" type="flex" justify="space-around">
+      <el-col :xs="12" :sm="12" :md="6" :lg="4" :xl="4">
+        <div class="topBar">
+          <el-tree id="videoTree"
+                   :data="treeData"
+                   :props="treeProps"
+                   ref="Tree"
+                   node-key="id"
+                   :highlight-current="true"
+                   :default-expanded-keys="[0]"
+                   :default-checked-keys="[]"
+                   @node-click="nodeClick"
+                   style="background-color: white; color: #606266"
+          >
+            <!--<template slot-scope="{node, data}">
+              <span>
+                <i class="'#' + iconArrClass[data.level]" aria-hidden="true">
+                </i>
+                {{node.label}}
+              </span>
+            </template>-->
+          </el-tree>
+        </div>
+      </el-col>
+
+      <el-col :xs="12" :sm="12" :md="18" :lg="20" :xl="20">
+        <el-row class="row">
+          <div class="box" :class="[flag == 1 ? 'boxred' : 'boxblack']">
+            <div id="newplay1" style="width:100%; height:100%;" @click="chooseWindow(1)">
+              <span class="novideo">无信号</span>
+            </div>
+          </div>
+          <div class="box" :class="[flag == 2 ? 'boxred' : 'boxblack']">
+            <div id="newplay2" style="width:100%; height:100%;" @click="chooseWindow(2)">
+              <span class="novideo">无信号</span>
+            </div>
+          </div>
+        </el-row>
+
+        <el-row class="row">
+          <div class="box" :class="[flag == 3 ? 'boxred' : 'boxblack']">
+            <div id="newplay3" style="width:100%; height:100%;" @click="chooseWindow(3)">
+              <span class="novideo">无信号</span>
+            </div>
+          </div>
+          <div class="box" :class="[flag == 4 ? 'boxred' : 'boxblack']">
+            <div id="newplay4" style="width:100%; height:100%;" @click="chooseWindow(4)">
+              <span class="novideo">无信号</span>
+            </div>
+          </div>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scped>
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #a5a5a8;
+    color: white;
+  }
+  .el-tree--highlight-current .el-tree-node > .el-tree-node__content:hover {
+    background-color: #a5a5a8;
+    color: #454547;
+  }
+  main > div {
+    background: #ffffff;
+    height: calc(100vh - 110px) !important;
+    padding: 0px 0px 0px 10px !important;
+  }
+  .row{
+    display: flex;
+    .box{
+      width: 100%;
+      text-align: center;
+      background-color: black;
+    }
+  }
+  .boxred{
+    border: 1px solid red;
+  }
+  .boxblack{
+    border: 1px solid white;
+  }
+  .novideo{
+    /*padding: 147px 0px 147px 0px;
+    display: block;*/
+    line-height: calc((100vh - 114px)/2);
+    color: white;
+  }
+  /*  .nodeImg1{
+      background: url('../../assets/qiye.png') no-repeat center,
+    }
+    .nodeImg2{
+      background: url("../../assets/enterprises.png") no-repeat center,
+    }
+    .nodeImg3{
+      background: url("../../assets/video.png") no-repeat center,
+    }*/
+</style>
+<script src="./EasyWasmPlayer.js"></script>
+<script>
+  export default {
+    name: "Video",
+    components: {
+    },
+    data() {
+      return {
+        loading: false,
+        playerWindow: "newplay1",
+        flag: 1,
+        treeData: [
+          {
+            name: "企业视频监控",
+            level: 0,
+            childList: []
+          }
+        ],
+        /*iconArrClass: [
+          "nodeImg1",
+          "nodeImg2",
+          "nodeImg3"
+        ],*/
+        treeProps: {
+          children: "childList",
+          label: "name"
+        },
+        treecheckedObj: {},
+        ideoController: {},
+      }
+    },
+    methods: {
+      getTreeData() {
+        let that = this;
+        that.treeData[0].childList = [
+          {
+            name: "视频监控1",
+            deviceCode: "34020000001110000005_0200000020",
+          },{
+            name: "视频监控2",
+            deviceCode: "34020000001110000003_0200000004",
+          },{
+            name: "视频监控3",
+            deviceCode: "34020000001110000003_0200000005",
+          },{
+            name: "视频监控4",
+            deviceCode: "34020000001110000004_0200000011",
+          }
+        ];
+      },
+      nodeClick(data, node, target) {
+        let that = this;
+        that.treecheckedObj = node.data;
+
+        if (node.level == "2") {
+          that.playerWindow = 'newplay' + that.flag;
+          var player = new WasmPlayer(null, that.playerWindow, null, {Height: true});
+          console.log(that.playerWindow, node.data.deviceCode)
+          player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceCode + '.flv', 1);
+          if (that.flag < 4) {
+            that.flag++;
+          }
+        }
+      },
+      chooseWindow(data) {
+        this.flag = data;
+        this.playerWindow = 'newplay' + this.flag;
+      },
+    },
+    created() {
+      let that = this;
+      that.getTreeData();
+    }
+  }
+</script>