hd-idevvue3 3.0.3 → 3.0.4

package/src/hdcom/FaceRecTest.vue

@@ -1,70 +1,81 @@
 <template>
-  <el-dialog title="识别测试" :visible.sync="visible" append-to-body width="90%" top="5vh">
-    <el-container style="height:500px">
+  <el-dialog
+    title="识别测试"
+    :visible.sync="visible"
+    append-to-body
+    width="90%"
+    top="5vh"
+  >
+    <el-container style="height: 500px">
       <el-aside width="50%">
         <video ref="video" width="400" height="400" autoplay></video>
       </el-aside>
       <el-main>
-        <canvas ref='canvas' width="400" height="300"></canvas>
-        <div>{{$t('识别结果') + '(' + $t('耗时') + timeSpend + ')'}}</div>
-        <table v-for="tab in recRs" style="border:1px solid #0094ff; ">
-          <td>{{$t('name')}}</td>
-          <td>{{$t('工号')}}</td>
-          <td>{{$t('差值')}}</td>
+        <canvas ref="canvas" width="400" height="300"></canvas>
+        <div>{{ $t('识别结果') + '(' + $t('耗时') + timeSpend + ')' }}</div>
+        <table v-for="tab in recRs" style="border: 1px solid #0094ff">
+          <td>{{ $t('name') }}</td>
+          <td>{{ $t('工号') }}</td>
+          <td>{{ $t('差值') }}</td>
           <tr v-for="intab in tab">
-            <td>{{intab.name}}</td>
-            <td>{{intab.workNo}}</td>
-            <td>{{intab.compareRs}}</td>
+            <td>{{ intab.name }}</td>
+            <td>{{ intab.workNo }}</td>
+            <td>{{ intab.compareRs }}</td>
           </tr>
         </table>
       </el-main>
     </el-container>
   </el-dialog>
 </template>
-<script>
-  export default {
-    components: {},
-    data() {
-      return {
-        video: null,
-        visible: false,
-        timeHandle: null,
-        recRs: [],
-        timeSpend: 0
-      }
-    },
 
-    mounted() {
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      video: null,
+      visible: false,
+      timeHandle: null,
+      recRs: [],
+      timeSpend: 0,
+    }
+  },
 
+  mounted() {},
+  methods: {
+    show() {
+      this.visible = true
     },
-    methods: {
-      show() {
-        this.visible = true
-      },
-      init() {
-        navigator.webkitGetUserMedia({
-          video: true
-        }, this.success, this.error);
-        this.$nextTick(() => {
-          this.video = this.$refs.video
-          this.capAndReg()
-        })
-      },
-      success(stream) {
-        this.video.src = window.URL.createObjectURL(stream);
-        this.video.play();
-      },
-      error(err) {
-        alert('video error: ' + err)
-      },
-      capAndReg() {
-        let nowStart = new Date().getTime()
-        console.info('shot...')
-        this.$refs.canvas.getContext('2d').drawImage(this.video, 0, 0, 400, 300);
-        let pic = this.$refs.canvas.toDataURL("image/jpg");
-//对其进行base64编 之后的字符串
-        pic = pic.replace(/^data:image\/(png|jpg);base64,/, "")
-        this.$http.post('/webresources/login/com/ComFaceRec/faceRec', {"imageData": pic}).then(response => {
+    init() {
+      navigator.webkitGetUserMedia(
+        {
+          video: true,
+        },
+        this.success,
+        this.error
+      )
+      this.$nextTick(() => {
+        this.video = this.$refs.video
+        this.capAndReg()
+      })
+    },
+    success(stream) {
+      this.video.src = window.URL.createObjectURL(stream)
+      this.video.play()
+    },
+    error(err) {
+      alert('video error: ' + err)
+    },
+    capAndReg() {
+      let nowStart = new Date().getTime()
+      console.info('shot...')
+      this.$refs.canvas.getContext('2d').drawImage(this.video, 0, 0, 400, 300)
+      let pic = this.$refs.canvas.toDataURL('image/jpg')
+      //对其进行base64编 之后的字符串
+      pic = pic.replace(/^data:image\/(png|jpg);base64,/, '')
+      this.$http
+        .post('/webresources/login/com/ComFaceRec/faceRec', { imageData: pic })
+        .then((response) => {
           if (!response.data || !response.data.data) {
             this.recRs = []
             this.capAndReg()
@@ -72,33 +83,32 @@
           }
           console.info(response.data.data)
           this.recRs = response.data.data
-//          for (let i = 0; i < data.length; i++) {
-//            let onePerReg = []
-//            for (let j = 0; j < data[i].length; j++) {
-//              let onePer = data[i][j]
-//              let one = {name: onePer.name, score: onePer.compareRs, workNo: onePer.workNo}
-//              onePerReg.push(one)
-//            }
-//            this.recRs.push(onePerReg)
-//          }
-          if (this.visible)
-            this.capAndReg()
-          this.timeSpend = (new Date().getTime() - nowStart) / 1000+ this.$t("秒")
-        }).catch(() => {
+          //          for (let i = 0; i < data.length; i++) {
+          //            let onePerReg = []
+          //            for (let j = 0; j < data[i].length; j++) {
+          //              let onePer = data[i][j]
+          //              let one = {name: onePer.name, score: onePer.compareRs, workNo: onePer.workNo}
+          //              onePerReg.push(one)
+          //            }
+          //            this.recRs.push(onePerReg)
+          //          }
+          if (this.visible) this.capAndReg()
+          this.timeSpend =
+            (new Date().getTime() - nowStart) / 1000 + this.$t('秒')
+        })
+        .catch(() => {
           this.recRs = []
-          if (this.visible)
-            this.capAndReg()
+          if (this.visible) this.capAndReg()
         })
-
-      }
     },
-    watch: {
-      visible(nowVal) {
-        if (nowVal) {
-          this.init()
-        } else {
-        }
+  },
+  watch: {
+    visible(nowVal) {
+      if (nowVal) {
+        this.init()
+      } else {
       }
-    }
-  }
+    },
+  },
+}
 </script>

package/src/hdcom/GridChart.vue

@@ -1,194 +1,207 @@
 <template>
-  <el-dialog title="统计展示" :visible.sync="visible" width='80%' append-to-body top="2vh">
-    {{$t('展示标签列')}}
-    <hd-drop style="width: 200px" ref="labelDrop" v-model="hdQuery.query._chartLabel"></hd-drop>
-    <span>{{$t('对应的值列')}}
-       <hd-drop style="width: 200px" ref="valDrop" v-model="hdQuery.query._chartValue"></hd-drop>
+  <el-dialog
+    title="统计展示"
+    :visible.sync="visible"
+    width="80%"
+    append-to-body
+    top="2vh"
+  >
+    {{ $t('展示标签列') }}
+    <hd-drop
+      style="width: 200px"
+      ref="labelDrop"
+      v-model="hdQuery.query._chartLabel"
+    ></hd-drop>
+    <span
+      >{{ $t('对应的值列') }}
+      <hd-drop
+        style="width: 200px"
+        ref="valDrop"
+        v-model="hdQuery.query._chartValue"
+      ></hd-drop>
     </span>
-    <el-button @click="doQuery">{{$t('统计')}}</el-button>
+    <el-button @click="doQuery">{{ $t('统计') }}</el-button>
     <el-row>
       <el-col :span="12">
-        <div ref="mychart" style="height:60vh"></div>
+        <div ref="mychart" style="height: 60vh"></div>
       </el-col>
       <el-col :span="12">
-        <div ref="mychart2" style="height:60vh"></div>
+        <div ref="mychart2" style="height: 60vh"></div>
       </el-col>
       <el-col :span="12">
-        <div ref="mychart3" style="height:60vh"></div>
+        <div ref="mychart3" style="height: 60vh"></div>
       </el-col>
       <el-col :span="12">
-        <div ref="mychart4" style="height:60vh"></div>
+        <div ref="mychart4" style="height: 60vh"></div>
       </el-col>
     </el-row>
   </el-dialog>
 </template>
 
 <script>
-  import HdDrop from "./HdDrop.vue";
+import HdDrop from './HdDrop.vue'
 
-  export default {
-    components: {
-      HdDrop
+export default {
+  components: {
+    HdDrop,
+  },
+  name: 'GridChart',
+  props: ['allColumn', 'url', 'hdQuery'],
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  mounted() {},
+  methods: {
+    show() {
+      this.visible = true
+      this.genDrop()
     },
-    name: "GridChart",
-    props: ['allColumn', 'url', 'hdQuery'],
-    data() {
-      return {
-        visible: false
+    genDrop() {
+      let labelDrop = []
+      let numDrop = [{ name: this.$t('只统计数量'), code: '_chartNumOnly' }]
+      for (let i = 0; i < this.allColumn.length; i++) {
+        let oneCol = this.allColumn[i]
+        let one = { name: oneCol.$attrs.label, code: oneCol.$attrs.prop }
+        labelDrop.push(one)
+        if (oneCol.$attrs.chartNum != undefined) {
+          numDrop.push(one)
+        }
       }
+      this.$nextTick(function () {
+        //hddrop 为了查询和展示不同,增加了backUpArr
+        this.$refs.labelDrop.options = labelDrop
+        this.$refs.labelDrop.backUpArr = labelDrop
+        this.$refs.valDrop.options = numDrop
+        this.$refs.valDrop.backUpArr = numDrop
+      })
     },
-    mounted() {
-
-    },
-    methods: {
-      show() {
-        this.visible = true
-        this.genDrop()
-
-      },
-      genDrop() {
-        let labelDrop = []
-        let numDrop = [{name: this.$t('只统计数量'), code: '_chartNumOnly'}]
-        for (let i = 0; i < this.allColumn.length; i++) {
-          let oneCol = this.allColumn[i]
-          let one = {name: oneCol.$attrs.label, code: oneCol.$attrs.prop}
-          labelDrop.push(one)
-          if (oneCol.$attrs.chartNum != undefined) {
-            numDrop.push(one)
-          }
-        }
-        this.$nextTick(function () {//hddrop 为了查询和展示不同,增加了backUpArr
-          this.$refs.labelDrop.options = labelDrop
-          this.$refs.labelDrop.backUpArr = labelDrop
-          this.$refs.valDrop.options = numDrop
-          this.$refs.valDrop.backUpArr = numDrop
+    doQuery() {
+      if (!this.hdQuery.query._chartLabel || !this.hdQuery.query._chartValue) {
+        this.$message({
+          type: 'error',
+          showClose: true,
+          duration: 1500,
+          message: '请选择统计的标签和值',
         })
-      },
-      doQuery() {
-        if (!this.hdQuery.query._chartLabel || !this.hdQuery.query._chartValue) {
-          this.$message({
-            type: 'error',
-            showClose: true,
-            duration: 1500,
-            message: '请选择统计的标签和值'
-          })
-          return false
+        return false
+      }
+      const copyQuery = new HdQuery(this)
+      Object.assign(copyQuery, this.hdQuery)
+      copyQuery.rows = null //去掉分页
+      copyQuery.sort = null //去掉排序
+      this.$http.post(this.url, copyQuery).then((response) => {
+        let allLabel = []
+        let allVal = []
+        let hdResult = response.data
+        for (let i = 0; i < hdResult.length; i++) {
+          allLabel.push(hdResult[i].name)
+          allVal.push(hdResult[i].value)
         }
-        const copyQuery = new HdQuery(this)
-        Object.assign(copyQuery, this.hdQuery)
-        copyQuery.rows = null //去掉分页
-        copyQuery.sort = null//去掉排序
-        this.$http.post(this.url, copyQuery).then(response => {
-          let allLabel = []
-          let allVal = []
-          let hdResult = response.data
-          for (let i = 0; i < hdResult.length; i++) {
-            allLabel.push(hdResult[i].name)
-            allVal.push(hdResult[i].value)
-          }
-          this.initChart(allLabel, allVal)
-          this.initPip(allLabel, hdResult)
-          this.initBar(allLabel, allVal)
-          this.initCircle(allLabel, hdResult)
-        })
-      },
-      initChart(allLabel, allVal) {
-        let chart = echarts.init(this.$refs.mychart)
-        let option = {
-          xAxis: {
-            type: 'category',
-            data: allLabel
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [{
+        this.initChart(allLabel, allVal)
+        this.initPip(allLabel, hdResult)
+        this.initBar(allLabel, allVal)
+        this.initCircle(allLabel, hdResult)
+      })
+    },
+    initChart(allLabel, allVal) {
+      let chart = echarts.init(this.$refs.mychart)
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: allLabel,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
             data: allVal,
-            type: 'line'
-          }]
-        };
-        chart.setOption(option)
-      },
-      initPip(allLabel, hdResult) {
-        let pip = echarts.init(this.$refs.mychart2)
-        let option = {
-          legend: {
-            bottom: 0,
-            data: allLabel
+            type: 'line',
           },
-          series: [
-            {
-              type: 'pie',
-              selectedMode: 'single',
-              data: hdResult
-            }
-          ]
-        };
-        pip.setOption(option)
-      },
-      initBar(allLabel, allVal) {
-        let chart = echarts.init(this.$refs.mychart3)
-        let option = {
-          xAxis: {
-            type: 'category',
-            data: allLabel
-          },
-          yAxis: {
-            type: 'value'
+        ],
+      }
+      chart.setOption(option)
+    },
+    initPip(allLabel, hdResult) {
+      let pip = echarts.init(this.$refs.mychart2)
+      let option = {
+        legend: {
+          bottom: 0,
+          data: allLabel,
+        },
+        series: [
+          {
+            type: 'pie',
+            selectedMode: 'single',
+            data: hdResult,
           },
-          series: [{
+        ],
+      }
+      pip.setOption(option)
+    },
+    initBar(allLabel, allVal) {
+      let chart = echarts.init(this.$refs.mychart3)
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: allLabel,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
             data: allVal,
-            type: 'bar'
-          }]
-        };
-        chart.setOption(option)
-      },
-      initCircle(allLabel, allVal) {
-        let chart = echarts.init(this.$refs.mychart4)
-        let option = {
-          tooltip: {
-            trigger: 'item',
-            formatter: "{a} <br/>{b}: {c} ({d}%)"
+            type: 'bar',
           },
-          legend: {
-            orient: 'vertical',
-            x: 'left',
-            data: allLabel
-          },
-          series: [
-            {
-              type: 'pie',
-              radius: ['50%', '70%'],
-              avoidLabelOverlap: false,
-              label: {
-                normal: {
-                  show: false,
-                  position: 'center'
+        ],
+      }
+      chart.setOption(option)
+    },
+    initCircle(allLabel, allVal) {
+      let chart = echarts.init(this.$refs.mychart4)
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)',
+        },
+        legend: {
+          orient: 'vertical',
+          x: 'left',
+          data: allLabel,
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false,
+                position: 'center',
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '30',
+                  fontWeight: 'bold',
                 },
-                emphasis: {
-                  show: true,
-                  textStyle: {
-                    fontSize: '30',
-                    fontWeight: 'bold'
-                  }
-                }
               },
-              labelLine: {
-                normal: {
-                  show: false
-                }
+            },
+            labelLine: {
+              normal: {
+                show: false,
               },
-              data: allVal
-            }
-          ]
-        };
-
-        chart.setOption(option)
+            },
+            data: allVal,
+          },
+        ],
       }
-    }
-  }
-</script>
 
-<style scoped>
-
-</style>
+      chart.setOption(option)
+    },
+  },
+}
+</script>