迁移大屏UI库和应用

project/dvui/components/AiEchart/template/bar/barChart1.js

@@ -0,0 +1,91 @@
+export default {
+  legend: {
+    right: 0,
+    itemHeight: 5,
+    itemWidth: 16,
+    textStyle: { color: '#fff' }
+  },
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+    axisLabel: { color: '#fff' },
+    axisPointer: { show: false }
+  },
+  axisPointer: {
+    type: 'shadow',
+    triggerTooltip: false,
+    shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
+  },
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 187, 255, 1)' },
+        { offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(66, 255, 254, 1)' },
+        { offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(97, 253, 185, 1)' },
+        { offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(253, 108, 57, 1)' },
+        { offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: 'rgba(248, 187, 25, 1)' },
+        { offset: 1, color: 'rgba(55, 39, 5, 1)' }
+      ]
+    }
+  ],
+  daemon: {
+    type: 'bar',
+    label: {
+      show: true,
+      position: 'top',
+      color: '#fff',
+      formatter: e => {
+        return e.data[e.seriesName] || ''
+      }
+    },
+    barWidth: 16,
+    barCategoryGap: 40,
+    itemStyle: {}
+  }
+}

project/dvui/components/AiEchart/template/bar/barChart2.js

@@ -0,0 +1,24 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'shadow', show: true,
+    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+  },
+  daemon: {type: 'bar', barWidth: 2, barGap: 4}
+}

project/dvui/components/AiEchart/template/bar/barChart3.js

@@ -0,0 +1,33 @@
+export default {
+  legend: {show: false},
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+  daemon: {
+    type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
+    barWidth: 24,
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(123, 165, 255, .2)'
+    },
+    itemStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
+        colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
+      }
+    },
+    emphasis: {
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
+          colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
+        }
+      }
+    }
+  }
+}

project/dvui/components/AiEchart/template/bar/barChart5.js

@@ -0,0 +1,23 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+  daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
+}

project/dvui/components/AiEchart/template/bar/barChart7.js

@@ -0,0 +1,45 @@
+export default {
+  legend: {show: false},
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+    axisPointer: {
+      type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
+      label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
+    }
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%',
+    label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(123, 165, 255, .2)'
+    },
+    itemStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
+      }
+    },
+    emphasis: {
+      label: {color: '#28FBFF', position: 'right'},
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+          colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
+        }
+      }
+    }
+  }
+}

project/dvui/components/AiEchart/template/bar/barChart8.js

@@ -0,0 +1,36 @@
+import tools from "../tools";
+
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
+    axisPointer: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10,
+    itemStyle: {
+      color: ({color}) => ({
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
+      })
+    },
+  }
+}

project/dvui/components/AiEchart/template/bar/barChart9.js

@@ -0,0 +1,29 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 80, right: 0
+  },
+  tooltip: {
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14, margin: 23},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
+    showBackground: true,
+    backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
+  }
+}

project/dvui/components/AiEchart/template/line/lineChart1.js

@@ -0,0 +1,40 @@
+import tools from '../tools';
+
+export default {
+	legend: { show: false },
+	grid: {
+		left: 50,
+		right: 0
+	},
+	tooltip: {
+		trigger: 'axis',
+		backgroundColor: 'rgba(14, 51, 111, 0.9)',
+		borderColor: '#1A6ABC',
+		textStyle: { color: '#fff' },
+		axisPointer: { type: 'cross' }
+	},
+	yAxis: {
+		nameGap: 23,
+		minInterval: 1,
+		splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+		axisLabel: { color: '#fff' },
+		axisPointer: { snap: true }
+	},
+	daemon: (color) => ({
+		showSymbol: false,
+		lineStyle: { shadowBlur: 4, shadowOffsetY: 2 },
+		areaStyle: {
+			color: {
+				type: 'linear',
+				x: 0,
+				x2: 0,
+				y: 0,
+				y2: 1,
+				colorStops: [
+					{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.5) },
+					{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.5) }
+				]
+			}
+		}
+	})
+};

project/dvui/components/AiEchart/template/line/lineChart2.js

@@ -0,0 +1,27 @@
+import tools from "../tools";
+
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: color => ({
+    showSymbol: false,
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    areaStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
+          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
+          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
+        ]
+      }
+    }
+  })
+}

project/dvui/components/AiEchart/template/line/lineChart3.js

@@ -0,0 +1,16 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: {
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+  }
+}

project/dvui/components/AiEchart/template/line/lineChart4.js

@@ -0,0 +1,19 @@
+export default {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: {
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    emphasis: {
+      focus: 'self'
+    }
+  }
+}

project/dvui/components/AiEchart/template/line/lineChart5.js

@@ -0,0 +1,31 @@
+import tools from "../tools";
+
+export default {
+  legend: {show: false},
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'},
+    axisPointer: {type: 'cross'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'},
+    axisPointer: {snap: true}
+  },
+  daemon: color=> ({
+    showSymbol: false, smooth: true,
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    areaStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
+          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
+          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
+        ]
+      }
+    }
+  })
+}

project/dvui/components/AiEchart/template/pie/pieChart2.js

@@ -0,0 +1,96 @@
+export default {
+  legend: {
+    bottom: 0,
+    itemGap: 14,
+    itemWidth: 16,
+    itemHeight: 5,
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    height: 260
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+    backgroundColor: "rgba(14, 51, 111, 0.9)",
+    borderColor: "#1A6ABC",
+    textStyle: {color: "#fff"}
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [70, 81],
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2
+    },
+    label: {
+      color: "#A8D7F3",
+      fontSize: 14,
+      formatter: "{name|{b}}\n{v|{d}%}",
+      minMargin: 5,
+      edgeDistance: 10,
+      lineHeight: 22,
+      rich: {
+        v: {
+          color: "#fff"
+        }
+      }
+    },
+    labelLine: {},
+    labelLayout: function (params) {
+      let points = params.labelLinePoints,
+          isLeft = points[2][0] < points[1][0]
+      points[2][0] =
+          points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
+      return {
+        labelLinePoints: points
+      }
+    }
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 10000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              "span",
+              {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
+              formatNum(total)
+          ),
+          h("span", null, "总量")
+        ]
+    )
+  }
+}

project/dvui/components/AiEchart/template/tools.js

@@ -0,0 +1,24 @@
+export default {
+  $colorUtils: {
+    Hex2RGBA(color, alpha = 1) {
+      let hex = 0;
+      if (color.charAt(0) == "#") {
+        if (color.length == 4) {
+          //检测诸如#FFF简写格式
+          color = "#" + color.charAt(1).repeat(2) +
+              color.charAt(2).repeat(2) +
+              color.charAt(3).repeat(2);
+        }
+        hex = parseInt(color.slice(1), 16);
+      }
+      let r = hex >> 16 & 0xFF;
+      let g = hex >> 8 & 0xFF;
+      let b = hex & 0xFF;
+      return `rgba(${r},${g},${b},${alpha})`;
+    },
+    RGBtoHex(r, g, b) {
+      let hex = r << 16 | g << 8 | b;
+      return "#" + hex.toString(16);
+    }
+  }
+}

project/dvui/components/AiMonitor/AiMonitor.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="AiMonitor">
+    <template v-if="type=='cmcc'">
+      <iframe :src="src" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
+              allowusermedia frameBorder="no"/>
+    </template>
+    <hikversion-monitor v-else-if="type=='hik'" :src="src"/>
+    <dhVideo v-else-if="type=='dahua'" :src="src"/>
+    <slwVideo v-else-if="type=='slw'" :src="src"/>
+  </section>
+</template>
+
+<script>
+import HikversionMonitor from "./hikversionMonitor";
+import dhVideo from "./dhVideo";
+import slwVideo from "./slwVideo";
+
+export default {
+  name: "AiMonitor",
+  components: {HikversionMonitor, dhVideo, slwVideo},
+  props: {
+    /**
+     * 视频源
+     */
+    src: {default: ""},
+    /**
+     * 组件类型
+     * cmcc 中移物联,hik 海康威视
+     * @values cmcc,hik
+     */
+    type: {default: "cmcc"},
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiMonitor {
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 60px;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

project/dvui/components/AiMonitor/dhVideo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="dh-video">
+    <video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
+      <source :src="src">
+    </video>
+  </div>
+</template>
+
+<script>
+  import videojs from 'video.js'
+  import 'videojs-contrib-hls'
+  import 'video.js/dist/video-js.css'
+
+  export default {
+    props: ['src'],
+
+    data () {
+      return {
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler(val) {
+          if (val) {
+            this.$nextTick(() => {
+              videojs(this.id, {
+                autoplay: true
+              }, function () { console.log('videojs播放器初始化成功') })
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      if (this.src) {
+        this.$nextTick(() => {
+           videojs(this.id, {
+            autoplay: true
+          }, function () { console.log('videojs播放器初始化成功') })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dh-video {
+    width: 100%; 
+    height: 100%;
+    .video-js {
+      width: 100%!important;
+      height: 100%!important;
+    }
+
+    ::v-deep .video-js {
+      width: 100%!important;
+      height: 100%!important;
+
+      .vjs-big-play-button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    & > div {
+      width: 100%!important;
+      height: 100%!important;
+    }
+  }
+</style>

project/dvui/components/AiMonitor/hikversionMonitor.vue

@@ -0,0 +1,169 @@
+<template>
+  <section class="hikversionMonitor">
+    <div id="monitorIns">
+      <el-link v-if="needSetupPlugin" href="https://cdn.cunwuyun.cn/wsr/lib/VideoWebPlugin.exe" type="primary">
+        请检查是否安装视频插件,如果没有请点击下载视频插件并安装
+      </el-link>
+      <div v-else>视频插件未启动，正在尝试启动，请稍候...</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "hikversionMonitor",
+  props: {
+    src: {default: ""},
+    list: {default: () => []}
+  },
+  data() {
+    return {
+      monitorIns: null,
+      initCount: 0
+    }
+  },
+  computed: {
+    needSetupPlugin() {
+      return this.initCount >= 3
+    }
+  },
+  methods: {
+    getMonitorWidth() {
+      let {width} = document.querySelector("#monitorIns")?.getBoundingClientRect()
+      return width
+    },
+    getMonitorHeight() {
+      let {height} = document.querySelector("#monitorIns")?.getBoundingClientRect()
+      return height
+    },
+    initSDK() {
+      this.$nextTick(() => {
+        let width = this.getMonitorWidth(), height = this.getMonitorHeight()
+        if (width) {
+          this.monitorIns = new WebControl({
+            szPluginContainer: "monitorIns",                       // 指定容器id
+            iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
+            iServicePortEnd: 15909,
+            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
+            cbConnectSuccess: () => {                     // 创建WebControl实例成功
+              this.monitorIns.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
+                dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
+              }).then(() => {                           // 启动插件服务成功
+                this.monitorIns.JS_CreateWnd("monitorIns", width, height).then(() => { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                  this.monitorIns.JS_RequestInterface({
+                    funcName: "getRSAPubKey",
+                    argument: JSON.stringify({
+                      keyLength: 1024
+                    })
+                  }).then((oData) => {
+                    if (oData.responseMsg.data) {
+                      let encrypt = new JSEncrypt();
+                      encrypt.setPublicKey(oData.responseMsg.data);
+                      let secret = encrypt.encrypt("JSqHo9JUgPLQxfCIjsmQ");
+                      this.monitorIns.JS_RequestInterface({
+                        funcName: "init",
+                        argument: JSON.stringify({
+                          appkey: "23335895",                                                    //API网关提供的appkey
+                          secret,                                                                //API网关提供的secret
+                          ip: "124.128.246.74",                                                  //API网关IP地址
+                          playMode: 0,                                                           //初始播放模式：0-预览，1-回放
+                          port: 1443,                                                            //端口
+                          snapDir: ".",                                                          //抓图存储路径
+                          videoDir: ".",                                                         //紧急录像或录像剪辑存储路径
+                          layout: "1x1",                                                         //布局
+                          enableHTTPS: 1,                                                        //是否启用HTTPS协议
+                          encryptedFields: "secret",                                             //加密字段
+                          showToolbar: 1,                                                        //是否显示工具栏
+                          showSmart: 1,                                                          //是否显示智能信息
+                          buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"  //自定义工具条按钮
+                        })
+                      }).then(() => {
+                        this.monitorIns.JS_Resize(width, height);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+                        this.startPreview()
+                      })
+                    }
+                  })
+                });
+              }, (...args) => {
+                // 启动插件服务失败
+                console.log(args)
+              })
+            },
+            cbConnectError: () => {
+              this.monitorIns = null
+              WebControl.JS_WakeUp("VideoWebPlugin://");
+              this.initCount++
+              if (!this.needSetupPlugin) {
+                setTimeout(() => {
+                  this.initSDK()
+                }, 3000)
+              }
+            }
+          })
+        }
+      })
+    },
+    startPreview() {
+      const layout = len =>
+          len <= 1 ? '1x1' :
+              len == 2 ? '1x2' :
+                  len == 3 ? '1+2' :
+                      len == 4 ? '2x2' :
+                          len < 6 ? '1+5' :
+                              len == 7 ? '3+4' :
+                                  len == 8 ? '1+7' :
+                                      len == 9 ? '3x3' :
+                                          len == 10 ? '1+9' :
+                                              len <= 16 ? '4x4' : '4x6'
+      let list = this.src?.split(",")
+      this.monitorIns?.JS_RequestInterface({
+        funcName: "setLayout",
+        argument: JSON.stringify({layout: layout(list.length)})
+      }).then(() => {
+        this.monitorIns?.JS_RequestInterface({
+          funcName: "startMultiPreviewByCameraIndexCode",
+          argument: JSON.stringify({
+            list: list.map((cameraIndexCode, i) => ({
+              cameraIndexCode,       //监控点编号
+              streamMode: 0,                          //主子码流标识
+              transMode: 1,                           //传输协议
+              gpuMode: 0,                             //是否开启GPU硬解
+              wndId: i + 1                              //可指定播放窗口
+            }))
+          })
+        })
+      })
+
+    },
+  },
+  watch: {
+    src(v) {
+      v && this.monitorIns?.JS_RequestInterface({funcName: "stopAllPreview"}).then(() => this.startPreview())
+    }
+  },
+  mounted() {
+    this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsencrypt.min.js")
+    this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsWebControl-1.0.0.min.js", () => {
+      this.initSDK()
+    })
+  },
+  beforeDestroy() {
+    this.monitorIns?.JS_DestroyWnd()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hikversionMonitor {
+  color: #fff;
+  height: 100%;
+
+  #monitorIns {
+    height: 100%;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

project/dvui/components/AiMonitor/slwVideo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="slw">
+    <iframe
+      v-if="isShow"
+      :id="id"
+      allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
+      style="width: 100%; height: 100%;"
+      :src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['src'],
+
+    name: 'slwVideo',
+
+    data () {
+      return {
+        isShow: true,
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      window.addEventListener('message', e => {
+        if (e.data.type && e.data.name === 'fullscreen') {
+          this.requestFullScreen(document.getElementById(this.id))
+        }
+
+        if (!e.data.type && e.data.name === 'fullscreen') {
+          this.exitFullscreen()
+        }
+      }, false)
+    },
+
+    methods: {
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        }
+      },
+
+      requestFullScreen (element) {
+        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+        if (requestMethod) {
+          requestMethod.call(element);
+        } else if (typeof window.ActiveXObject !== 'undefined') {
+          var wscript = new ActiveXObject('WScript.Shell')
+          if (wscript !== null) {
+            wscript.SendKeys('{F11}')
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: none;
+    }
+  }
+</style>

project/dvui/components/AiMonitor/tms/README.md

@@ -0,0 +1,2 @@
+# jessibuca-mobile-demo
+ jessibuca mobile demo

project/dvui/components/AiMonitor/tms/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+    }
+
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    #container {
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container"></div>
+  <script src="index.js"></script>
+
+  <script>
+    var search = document.location.search
+
+    if (!search && search.split('url=').length < 2) {
+
+    } else {
+      var url = search.split('url=')[1]
+      var player = new window.Jessibuca({
+        container: document.getElementById("container"),
+        decoder: "./index.js",
+        isResize: false,
+        supportDblclickFullscreen: true,
+        forceNoOffscreen: true,
+        keepScreenOn: true,
+        isNotMute: true,
+        loadingText: '加载中...',
+        operateBtns: {
+          fullscreen: true,
+          screenshot: true,
+          play: true,
+          audio: true,
+          record: true
+        }
+      });
+
+      if (player.hasLoaded()) {
+        player.play(url)
+      } else {
+        player.on('load', function () {
+          player.play(url)
+        })
+      }
+
+      player.on('fullscreen', function (e) {
+        window.parent.postMessage(e, '*')
+      })
+    }
+  </script>
+</body>
+
+</html>