<template>
  <v-scale-screen width="1920" height="1080">
    <div id="ty">

      <div class="main">
        <div class="left">
          <div class="tiyuBla">
            <div style="position: absolute; right: 32%; top: 52%">体育</div>
            <span style="position: absolute; right: 12%; top: 72%;font-size: 16px;" class="wh_small">体育场 &nbsp; | &nbsp;
              体育馆 &nbsp; | &nbsp; 游泳场馆</span>
          </div>

          <div class="tongji">
            <span class="institle">总计进馆人数</span>
            <!-- 今日进馆人数 -->
            <div class="insval">
              <img src="../../assets/wh/td_ins.png" />
              <span id="insv" class="insv">234,098</span>
              <span class="inst">今日进馆人数</span>
            </div>
            <!-- 本月进馆人数 -->
            <div class="insval">
              <img src="../../assets/wh/tm_ins.png" />
              <span id="insv2" class="insv">234,098</span>
              <span class="inst">本月进馆人数</span>
            </div>
            <!-- 本年进馆人数 -->
            <div class="insval">
              <img src="../../assets/wh/tyear_ins.png" />
              <span id="insv3" class="insv">234,098</span>
              <span class="inst">本年进馆人数</span>
            </div>
          </div>

          <div class="dinszone">
            <span class="dins_title">24小时总进馆人流趋势</span>
            <!-- 柱状统计图 -->
            <div class="dins_chart" id="dinschart" style="height: 22vh; width: 100%"></div>
          </div>

        </div>

        <div class="center">
          <!-- v-for=" item in videoData" :key="item.key" -->
          <!-- <div class="item" v-for=" item in videoData" :key="item.key">
            <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" :id="item.key" autoplay></video>
          </div> -->
          <div class="item" style="position: relative;">
            <video style="width: 68%;height: 70%;position: absolute;top: 0.3rem;left: 0.3rem;" id="camera0" autoplay></video>
          </div>
          <div class="item">
            <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera1" autoplay></video>
          </div>
          <div class="item">
            <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera2" autoplay></video>
          </div>
        </div>

        <div class="right">
          <!-- <div class="item"></div> -->
          <div class="pcgrliu">
            <span class="pcg_title">各场馆人次占比</span>
            <div class="venue_proportion_box" style="width: 100%; height: 290px">
              <div class="venue_proportion">
                <div class="venue_proportion_top">
                  <span class="venue_proportion_box_num">25%</span>
                </div>
                <div class="venue_proportion_bo">
                  <span>体育场</span>
                </div>
              </div>
              <div class="venue_proportion">
                <div class="venue_proportion_top">
                  <span class="venue_proportion_box_num">25%</span>
                </div>
                <div class="venue_proportion_bo">
                  <span>体育馆</span>
                </div>
              </div>
              <div class="venue_proportion">
                <div class="venue_proportion_top">
                  <span class="venue_proportion_box_num">25%</span>
                </div>
                <div class="venue_proportion_bo">
                  <span>游泳场馆</span>
                </div>
              </div>

            </div>
            <!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> -->
          </div>
          <!-- 各场馆人流趋势 -->
          <div class="pcgrliu">
            <span class="pcg_title">各场馆人流趋势</span>
            <div id="pcgchart2" style="width: 100%; height: 290px"></div>
          </div>
          <!-- <div class="item"></div> -->
        </div>
      </div>

    </div>
  </v-scale-screen>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";

import flvjs from "flv.js";

// 引入api
import * as homeApi from '@/api/home'

// import LivePlayer from '@liveqing/liveplayer'
import $ from "jquery";

// import Video from '../../components/btgym/Video.vue'
export default {
  components: {

  },
  data() {
    return {
      player: '',
      videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa/',
      initCount: 0,
      pubKey0: '',
      pubKey1: '',
      pubKey2: '',
      oWebControl0: '',
      oWebControl1: '',
      oWebControl2: '',
      videoData: []

    };
  },
  created() {
    // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
    this.$nextTick(() => {
      this.initPlugin();
      this.initPlugin2();
      this.initPlugin3();
      // setTimeout(this.initPlugin2(), 1000);
      // setTimeout(this.initPlugin3(), 1000);

    });

  },

  mounted() {
    let cc = window.document.getElementById("app");
    // 清除其他多余的classname
    if (cc.className.indexOf('ty_bg') > -1) {
      cc.className = "btgym";
    } else {
      cc.classList.add("ty_bg");
    }
    this.ty_bar1()
    // this.ty_bar2()
    this.ty_bar3()
    this.addNumber(0, 234098, 'insv')
    this.addNumber(0, 234098, 'insv2')
    this.addNumber(0, 234098, 'insv3')
    this.getVideo()


    // if (flvjs.isSupported()) {
    //   let video = this.$refs.player

    //   if (video) {
    //     this.player = flvjs.createPlayer({
    //       type: "flv",
    //       isLive: true,
    //       url: `rtmp://58.200.131.2:1935/livetv/hunantv`
    //     });
    //     this.player.attachMediaElement(video);
    //     try {
    //       this.player.load();
    //       this.player.play();
    //     } catch (error) {
    //       console.log(error);
    //     }
    //   }
    // }
  },
  methods: {
    ty_bar1() {
      var chartDom = document.getElementById("dinschart");
      var myChart = echarts.init(chartDom);
      // var option;
      // var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];

      // var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
      // var data = [Math.random() * 300]
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + "</br>" + params[0].value
          }
        },
        // legend: {
        //   data: ['厂用电量']
        // },
        grid: {
          left: 0,
          right: 0,
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: [{
          data: [
            '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
          ],
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: true
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            // interval: 0,
            // rotate: 0
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          // name: '       今日发电量( KWh )',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: '#027eff'
            }
          },
          axisLabel: {
            color: '#0095FF',
          }
        }],
        series: [{
          // name: '厂用电量',
          type: 'bar',
          barGap: '5%',
          barWidth: '10%',
          barCategoryGap: '60%',
          stack: 1,
          itemStyle: {
            normal: {
              barBorderRadius: [30, 30, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00EAFF'
                },
                // {
                //   offset: 0.5,
                //   color: '#00feff'
                // },
                {
                  offset: 1,
                  color: '#001AFF'
                }
              ]
              )
            }
          },
          data: [
            14000,
            11000,
            10000,
            9000,
            8000,
            7000,
            5000,
            4000,
            3000,
          ],
          zlevel: 11
        },
        {
          // name: '厂用电量',
          type: 'scatter',
          stack: 1,
          xAxisIndex: 0,
          symbolOffset: [0, 0], //相对于原本位置的偏移量
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: '#fff'
            }
          },
          symbolSize: 13,
          zlevel: 10,
          z: 2,
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: '10%',
          barGap: '-100%',
          data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
          itemStyle: {
            normal: {
              color: '#004298',
              barBorderRadius: 30,
              // backgroundColor:'#091C24'
              // borderColor:'#00D1F0'
            }
          },
          z: 1,
        },
        ]
      }


      option && myChart.setOption(option);
    },

    ty_bar2() {
      var chartDom = document.getElementById("pcgchart1");
      var myChart = echarts.init(chartDom);

      var option
      //       var xData = function() {
      //     var data = [];
      //     for (var i = 2011; i < 2017; i++) {
      //         data.push(i + "年");
      //     }
      //     return data;
      // }();
      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = ['图书馆', '文化馆', '博物馆']
      var data = [
        [137, 34, 135, 161, 74, 152, 110, 100, 150],
        [174, 137, 135, 34, 152, 135, 140, 160, 100],
        [134, 74, 137, 135, 161, 137, 300, 220, 250],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
      ]

      var series = [];
      for (var i = 0; i < 6; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color[i]
              }, {
                offset: 0.8,
                color: 'rgba(255,255,255,0)'
              }], false),
              // shadowColor: 'rgba(255,255,255, 0.1)',
              shadowBlur: 10,
              opacity: 0.3,
            }
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: 'solid' //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
              barBorderRadius: 0,
              label: {
                show: false,
              },
              opacity: 0.5,
            }
          },
          data: data[i],

        })
      }
      option = {
        // backgroundColor: "#141f56",
        legend: {
          top: 0,
          itemGap: 15,
          itemWidth: 15,
          textStyle: {
            color: '#fff',
            fontSize: '14'
          },
          data: name
        },
        title: {
          // text: "负面言论分领域趋势",
          textStyle: {
            color: '#fff',
            fontSize: '22',
            fontWeight: 'normal',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',

          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], //内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        },
        grid: {
          borderWidth: 0,
          top: 240,
          bottom: 240,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#32346c ',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#0095FF',
              fontWeight: 'normal',
              fontSize: '12',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

      option && myChart.setOption(option);
    },
    ty_bar3() {
      var chartDom = document.getElementById("pcgchart2");
      var myChart = echarts.init(chartDom);

      var option
      //       var xData = function() {
      //     var data = [];
      //     for (var i = 2011; i < 2017; i++) {
      //         data.push(i + "年");
      //     }
      //     return data;
      // }();
      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = ['体育场', '体育馆', '游泳场馆']
      var data = [
        [0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790],
        [0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350],
        [0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
      ]

      var series = [];
      for (var i = 0; i < 6; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color[i]
              }, {
                offset: 0.8,
                color: 'rgba(255,255,255,0)'
              }], false),
              // shadowColor: 'rgba(255,255,255, 0.1)',
              shadowBlur: 10,
              opacity: 0.3,
            }
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: 'solid' //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
              barBorderRadius: 0,
              label: {
                show: false,
              },
              opacity: 0.5,
            }
          },
          markPoint: {
            data: [
              {
                name: '最大值',
                type: 'max'
              }
            ]

          },
          data: data[i],

        })
      }
      option = {
        // backgroundColor: "#141f56",
        legend: {
          top: 270,
          right: 0,
          itemGap: 15,
          itemWidth: 15,
          textStyle: {
            color: '#fff',
            fontSize: '14'
          },
          data: name
        },
        title: {
          // text: "负面言论分领域趋势",
          textStyle: {
            color: '#fff',
            fontSize: '22',
            fontWeight: 'normal',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',

          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], //内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        },
        grid: {
          borderWidth: 0,
          top: 230,
          bottom: 240,
          right: 20,
          left: 36,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#32346c ',
            }
          },
          splitNumber: 10,
          // interval:4.10,
          axisLabel: {
            textStyle: {
              color: '#0095FF',
              fontWeight: 'normal',
              fontSize: '12',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

      option && myChart.setOption(option);
    },

    addNumber(start, end, id) {
      var o = document.getElementById(id);
      var i = start;
      var Interval;
      if (i < end) {
        Interval = setInterval(function () {
          i += 4000; // 设置每次增加的动态数字，可调整
          if (i > end) {
            clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
            o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
            i = 0;
          } else {
            o.innerHTML = i.toLocaleString();
          }
        }, 10); // 数据跳转的速度控制
      }
    },
    getVideo() {
      let that = this
      console.log(that);
      homeApi.allGetVideo().then(res => {
        // get allTimeData
        console.log(res);
        const tmpdata = res.data.videoData
        console.log(tmpdata);
        this.decode(tmpdata)
        console.log(this.decode(tmpdata));
        let baseviode = this.decode(tmpdata)
        this.decode(baseviode)
        console.log(this.decode(baseviode));
        let baseviodejson = this.decode2(baseviode)
        var jsonParseJson = JSON.parse(baseviodejson);
        console.log(jsonParseJson);
        this.videoData = jsonParseJson
        // this.day_num = tmpdata.day.noRepeatInNum
        // this.week_num_num = tmpdata.week.noRepeatInNum
        // this.mon_num = tmpdata.month.noRepeatInNum
        // this.year_num = tmpdata.year.noRepeatInNum

        // let btdata = new Array();
        // let bvdata = new Array();
        // tmpdata.foreach(function(item,index){
        //   console.log(item);
        //   console.log(index);
        // });

      });
    },
    decode(str) {
      if (str === undefined || str === "" || str === null) {
        return str;
      }
      // Going backwards: from bytestream, to percent-encoding, to original string.
      return decodeURIComponent(atob(str).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).slice(0, -2).join(''));
    },
    decode2(str) {
      if (str === undefined || str === "" || str === null) {
        return str;
      }
      // Going backwards: from bytestream, to percent-encoding, to original string.
      return decodeURIComponent(atob(str).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));
    },

    // 创建播放实例
    initPlugin() {
      let _that = this;
      const oWebControl0 = new window.WebControl({
        szPluginContainer: 'camera0', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15900,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess() {
          console.log('创建WebControl实例成功');
          oWebControl0.JS_StartService('window', {
            // WebControl实例创建成功后需要启动服务
            dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
          })
            .then(
              () => {
                // // 启动插件服务成功
                // oWebControl0.JS_SetWindowControlCallback({
                //   // 设置消息回调
                //   cbIntegrationCallBack: _that.cbIntegrationCallBack,
                // });
                oWebControl0.JS_CreateWnd('camera0').then(() => {
                  //JS_CreateWnd创建视频播放窗口，宽高可设定
                  _that.init(); // 创建播放实例成功后初始化
                  console.log('111111111');

                });
              },
              () => {
                // 启动插件服务失败
                console.log('启动插件服务失败');
              }
            )
            .catch((err) => {
              console.log(err);
            });
        },
        cbConnectError() {
          // 创建WebControl实例失败
          console.log('xxx');
          oWebControl0 = null;
          $('#camera0').html('插件未启动，正在尝试启动，请稍候...');
          window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(function () {
              this.initPlugin();
            }, 3000);
          } else {
            $('#camera0').html('插件启动失败，请检查插件是否安装！');
          }
        },
        cbConnectClose(bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log('cbConnectClose');
          oWebControl0 = null;
        },
      });
      this.oWebControl0 = oWebControl0;
    },
    initPlugin2() {
      let _that = this;
      const oWebControl1 = new window.WebControl({
        szPluginContainer: 'camera1', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15900,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess() {
          console.log('创建WebControl实例成功');
          oWebControl1.JS_StartService('window', {
            // WebControl实例创建成功后需要启动服务
            dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
          })
            .then(
              () => {
                // // 启动插件服务成功
                // oWebControl1.JS_SetWindowControlCallback({
                //   // 设置消息回调
                //   cbIntegrationCallBack: _that.cbIntegrationCallBack,
                // });
                oWebControl1.JS_CreateWnd('camera1').then(() => {
                  //JS_CreateWnd创建视频播放窗口，宽高可设定
                  _that.init2(); // 创建播放实例成功后初始化
                  console.log('22222222222');

                }).catch((err) => {
                  console.log(err);
                });;
              },
              () => {
                // 启动插件服务失败
                console.log('启动插件服务失败');
              }
            )
            .catch((err) => {
              console.log(err);
            });
        },
        cbConnectError() {
          // 创建WebControl实例失败
          console.log('xxx');
          oWebControl1 = null;
          $('#camera1').html('插件未启动，正在尝试启动，请稍候...');
          window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(function () {
              this.initPlugin2();
            }, 3000);
          } else {
            $('#camera1').html('插件启动失败，请检查插件是否安装！');
          }
        },
        cbConnectClose(bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log('cbConnectClose');
          oWebControl1 = null;
        },
      });
      this.oWebControl1 = oWebControl1;
    },
    initPlugin3() {
      let _that = this;
      const oWebControl2 = new window.WebControl({
        szPluginContainer: 'camera2', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15900,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess() {
          console.log('创建WebControl实例成功');
          oWebControl2.JS_StartService('window', {
            // WebControl实例创建成功后需要启动服务
            dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
          })
            .then(
              () => {
                // // 启动插件服务成功
                // oWebControl2.JS_SetWindowControlCallback({
                //   // 设置消息回调
                //   cbIntegrationCallBack: _that.cbIntegrationCallBack,
                // });
                oWebControl2.JS_CreateWnd('camera2').then(() => {
                  //JS_CreateWnd创建视频播放窗口，宽高可设定
                  _that.init3(); // 创建播放实例成功后初始化
                  console.log('3333333333');

                }).catch((err) => {
                  console.log(err);
                });;
              },
              () => {
                // 启动插件服务失败
                console.log('启动插件服务失败');
              }
            )
            .catch((err) => {
              console.log(err);
            });
        },
        cbConnectError() {
          // 创建WebControl实例失败
          console.log('xxx');
          oWebControl2 = null;
          $('#camera2').html('插件未启动，正在尝试启动，请稍候...');
          window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(function () {
              this.initPlugin3();
            }, 3000);
          } else {
            $('#camera2').html('插件启动失败，请检查插件是否安装！');
          }
        },
        cbConnectClose(bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log('cbConnectClose');
          oWebControl2 = null;
        },
      });
      this.oWebControl2 = oWebControl2;
    },
    //初始化
    init() {
      let _that = this;
      _that.getPubKey(function () {
        // 请自行修改以下变量值
        var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
        var secret = _that.setEncrypt("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
        var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
        var playMode = 0; //初始播放模式：0-预览，1-回放
        var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        // var snapDir = ""; //抓图存储路径
        // var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        // 请自行修改以上变量值
        _that.oWebControl0.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: appkey, //API网关提供的appkey
            secret: secret, //API网关提供的secret
            ip: ip, //API网关IP地址
            playMode: playMode, //播放模式（决定显示预览还是回放界面）
            port: port, //端口
            // snapDir: snapDir, //抓图存储路径
            // videoDir: videoDir, //紧急录像或录像剪辑存储路径
            layout: layout, //布局
            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
            encryptedFields: encryptedFields, //加密字段
            showToolbar: showToolbar, //是否显示工具栏
            showSmart: showSmart, //是否显示智能信息
            buttonIDs: buttonIDs, //自定义工具条按钮
          }),
        })
          .then((oData) => {
            let width = document.querySelector("#camera0").offsetWidth;
            let height = document.querySelector("#camera0").offsetHeight;
            _that.oWebControl0.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
            console.log(oData);
            console.log(width,height);
            _that.getVideoFun('05edddc148b141c5930301af43154942')
          });
      });
    },
    init2() {
      let _that = this;
      this.getPubKey2(function () {
        // 请自行修改以下变量值
        var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
        var secret = _that.setEncrypt2("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
        var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
        var playMode = 0; //初始播放模式：0-预览，1-回放
        var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        // var snapDir = ""; //抓图存储路径
        // var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        // 请自行修改以上变量值
        _that.oWebControl1.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: appkey, //API网关提供的appkey
            secret: secret, //API网关提供的secret
            ip: ip, //API网关IP地址
            playMode: playMode, //播放模式（决定显示预览还是回放界面）
            port: port, //端口
            // snapDir: snapDir, //抓图存储路径
            // videoDir: videoDir, //紧急录像或录像剪辑存储路径
            layout: layout, //布局
            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
            encryptedFields: encryptedFields, //加密字段
            showToolbar: showToolbar, //是否显示工具栏
            showSmart: showSmart, //是否显示智能信息
            buttonIDs: buttonIDs, //自定义工具条按钮
          }),
        })
          .then((oData) => {
            let width2 = document.querySelector("#camera1").offsetWidth;
            let height2 = document.querySelector("#camera1").offsetHeight;
            _that.oWebControl1.JS_Resize(width2, height2); // 初始化后resize一次，能和盒子大小一致。
            console.log(oData);
            console.log(width2,height2);
            _that.getVideoFun2('05edddc148b141c5930301af43154942')
          });
      });
    },
    init3() {
      let _that = this;
      this.getPubKey3(function () {
        // 请自行修改以下变量值
        var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
        var secret = _that.setEncrypt3("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
        var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
        var playMode = 0; //初始播放模式：0-预览，1-回放
        var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        // var snapDir = ""; //抓图存储路径
        // var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        // 请自行修改以上变量值
        _that.oWebControl2.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: appkey, //API网关提供的appkey
            secret: secret, //API网关提供的secret
            ip: ip, //API网关IP地址
            playMode: playMode, //播放模式（决定显示预览还是回放界面）
            port: port, //端口
            // snapDir: snapDir, //抓图存储路径
            // videoDir: videoDir, //紧急录像或录像剪辑存储路径
            layout: layout, //布局
            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
            encryptedFields: encryptedFields, //加密字段
            showToolbar: showToolbar, //是否显示工具栏
            showSmart: showSmart, //是否显示智能信息
            buttonIDs: buttonIDs, //自定义工具条按钮
          }),
        })
          .then((oData) => {
            let width3 = document.querySelector("#camera2").offsetWidth;
            let height3 = document.querySelector("#camera2").offsetHeight;
            _that.oWebControl2.JS_Resize(width3, height3); // 初始化后resize一次，能和盒子大小一致。
            console.log(oData);
            console.log(width3,height3);
            _that.getVideoFun3('05edddc148b141c5930301af43154942')
          });
      });
    },
    // 设置窗口控制回调
    setCallbacks() {
      console.log(this.oWebControl);
      this.oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack,
      });
    },
    // 推送消息
    cbIntegrationCallBack(oData) {
      //操作抓图录像时可以打印信息
      console.log(oData);
    },
    //获取公钥
    getPubKey(callback) {
      this.oWebControl0.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024,
        }),
      })
        .then((oData) => {
          if (oData.responseMsg.data) {
            this.pubKey0 = oData.responseMsg.data;
            console.log(this.pubKey0);
            callback();
          }
        });
    },
    getPubKey2(callback) {
      this.oWebControl1.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024,
        }),
      })
        .then((oData) => {
          if (oData.responseMsg.data) {
            this.pubKey1 = oData.responseMsg.data;
            console.log(this.pubKey1);
            callback();
          }
        });
    },
    getPubKey3(callback) {
      this.oWebControl2.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024,
        }),
      })
        .then((oData) => {
          if (oData.responseMsg.data) {
            this.pubKey2 = oData.responseMsg.data;
            console.log(this.pubKey2);
            callback();
          }
        });
    },
    //RSA加密
    setEncrypt(value) {
      var encrypt = new window.JSEncrypt();
      encrypt.setPublicKey(this.pubKey0);
      return encrypt.encrypt(value);
    },
    setEncrypt2(value) {
      var encrypt2 = new window.JSEncrypt();
      encrypt2.setPublicKey(this.pubKey1);
      return encrypt2.encrypt(value);
    },
    setEncrypt3(value) {
      var encrypt3 = new window.JSEncrypt();
      encrypt3.setPublicKey(this.pubKey2);
      return encrypt3.encrypt(value);
    },
    //视频预览功能
    getVideoFun(Code) {
      //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
      var cameraIndexCode = Code; //获取输入的监控点编号值，必填
      var streamMode = 1; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      console.log(cameraIndexCode);
      this.oWebControl0.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      })
        .then((res) => {
          // 播放成功回调
          console.log('播放成功')
          console.log(res);
        },
          err => {
            console.log('播放失败')
            console.log(preUrl);
            // console.info('JS_Play failed:', err)
            console.info(err)
          });
    },
    getVideoFun2(Code) {
      //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
      var cameraIndexCode = Code; //获取输入的监控点编号值，必填
      var streamMode = 1; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      console.log(cameraIndexCode);
      this.oWebControl1.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      })
        .then((res) => {
          // 播放成功回调
          console.log('播放成功111111111')
          console.log(res);
        },
          err => {
            console.log('播放失败')
            console.log(preUrl);
            // console.info('JS_Play failed:', err)
            console.info(err)
          });
    },
    getVideoFun3(Code) {
      //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
      var cameraIndexCode = Code; //获取输入的监控点编号值，必填
      var streamMode = 1; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      console.log(cameraIndexCode);
      this.oWebControl2.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      })
        .then((res) => {
          // 播放成功回调
          console.log('播放成功22222222222')
          console.log(res);
        },
          err => {
            console.log('播放失败')
            console.log(preUrl);
            // console.info('JS_Play failed:', err)
            console.info(err)
          });
    },
    //停止全部预览
    stopVideoFun() {
      this.oWebControl0.JS_RequestInterface({
        funcName: "stopAllPreview",
      });
    },
    // 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
    // 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
    // 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
    destroyVideoDiv() {
      this.oWebControl2.JS_DestroyWnd()
        .then((data) => {
          console.log("销毁窗口成功");
        })
        .catch((err) => {
          console.log("销毁窗口失败");
        });
    },
    // 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
    zhuaPicFun() {
      this.oWebControl2.JS_RequestInterface({
        funcName: "snapShot",
        argument: {
          name: "D:\test.jpg", // 窗口布局
        },
      });
    },

  },
  // beforeDestroy() {
  //   this.player.destory();
  // }

  // },
};
</script>
<style>
.ty_bg {
  clear: both;
  background-image: url("../../assets/ty/tybg.jpg") !important;
}

.screen-box {
  background: none !important;
}
</style>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-around;


  .left {
    width: 33%;
    height: 75vh;
    // height: 100%;
    // border: 1px solid red;
    // margin-left: 2%;
    margin-top: -4%;

    .tiyuBla {
      width: 100%;
      height: 40%;
      background-image: url("../../assets/ty/ins_title_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size: 38px;
      font-weight: bold;
      position: relative;

      .wh_small {
        padding-top: 12px;
        font-size: 12px;
        text-align: right;
        padding-right: 10px;
        color: white;
        position: absolute;
        right: 0;
        top: 0;

      }
    }

    .tongji {
      width: 100%;
      // float: left;
      height: 2.4rem;
      background-image: url("../../assets/wh/ins_count.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-top: 0.48rem;

      .institle {
        color: #00c6ff;
        padding-left: 0.9rem;
        line-height: 0.38rem;
        height: 0.38rem;
        display: block;
        font-size: 16px;
      }

      .insval {
        width: 30%;
        height: 1.68rem;
        float: left;
        margin-left: 0.16rem;
      }

      .insval:first {
        margin-left: 0;
      }

      .insval img {
        padding-top: 0.268rem;
        display: block;
        text-align: center;
        height: 0.78rem;
        margin-left: auto;
        margin-right: auto;
      }

      .insval span {
        display: block;
        width: 100%;
        text-align: center;
      }

      .insval .insv {
        height: 0.48rem;
        line-height: 0.18rem;
        font-size: 22px;
        color: white;
      }

      .insval .inst {
        color: #6a6c7c;
        font-size: 12px;
        height: 0.12rem;
        line-height: 0.12rem;
      }
    }

    .dinszone {
      margin-top: 0.22rem;
      width: 100%;
      height: 0.48rem;
      float: left;
    }

    .dinszone .dins_title {
      display: block;
      height: 0.58rem;
      line-height: 0.44rem;
      color: #fff;
      font-size: 0.2rem;
      background-image: url('../../assets/wh/dins_title_bg.png');
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      padding-left: 0.96rem;
    }

    .bfb {
      width: 100%;
      height: 25%;
      background-image: url("../../assets/ty/pins_bh.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;

      .renshu {
        span {
          margin-right: 5px;

          img {
            width: 10px;
            height: 12px;
          }
        }

        position: absolute;
        top: 30%;
        left: 10%;
        color: #8199bd;
        font-weight: bold;
        font-size: 14px;
      }

      .num {
        color: white;
        font-weight: bold;
        font-size: 20px;
        position: absolute;
        top: 45%;
        left: 6%;
      }

      .cntTxt {
        width: 20%;
        height: 60%;
        // border: 1px solid red;
        position: absolute;
        top: -5%;
        left: 30.5%;
        text-align: center;
        padding-top: 2.5%;
      }

      .rsType {
        width: 30%;
        height: 35%;
        // border: 1px solid red;
        position: absolute;
        top: 30%;
        right: 4%;
        display: flex;
        justify-content: space-between;

        .typeItem {
          width: 30%;
          height: 95%;
          text-align: center;
          color: #687c9e;
          font-size: 14px;
        }
      }
    }
  }

  .center {
    margin-top: 3%;
    width: 30%;
    height: 72vh;
    // border: 1px solid #019ade;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    align-content: center;
    justify-content: center;
    background-image: url("../../assets/ty/vbig_bg.png");
    background-size: 100% 90%;
    background-repeat: no-repeat;

    .item {
      width: 70%;
      height: 34%;

      background-image: url("../../assets/ty/vsmall_bg.png");
      background-size: contain;
      background-repeat: no-repeat;

      &:nth-child(1) {
        margin-top: -65px;
      }
    }
  }

  .right {
    margin-top: 3%;
    width: 33%;
    height: 76vh;

    .pcgrliu {
      width: 100%;
      // width: 634px;
      // height: 290px;
      flex: 1;

      .venue_proportion_box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #00A7FF;
        font-size: 13px;

        .venue_proportion {
          flex: 1;
          // text-align: center;


          .venue_proportion_top {
            text-align: center;
            width: 75%;
            height: 9vh;
            line-height: 9vh;
            margin: 0 auto;
            background-image: url('../../assets/ty/右1-4.png');
            background-size: 100% 100%;
            background-position: 100% 100%;
            background-repeat: no-repeat;

            .venue_proportion_box_num {
              color: white;
              font-size: 16px;
              font-weight: bold;
              display: block;
              width: 60%;
              height: 9vh;
              line-height: 9vh;
              margin: 0 auto;
              background-image: url('../../assets/ty/右1-3.png');
              background-size: 100% 100%;
              background-position: 100% 100%;
              background-repeat: no-repeat;
            }
          }

          .venue_proportion_bo {

            text-align: center;
            width: 50%;
            height: 3vh;
            margin: 0 auto;
            margin-top: 20px;
            background-image: url('../../assets/ty/右1-5.png');
            background-size: 100% 100%;
            background-position: 100% 100%;
            background-repeat: no-repeat;

            span {
              line-height: 3vh;
            }

            // img {
            //   margin-left: 48px;
            // }

          }
        }
      }

      .pcg_title {
        display: block;
        height: 4vh;
        line-height: 3vh;
        background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
        background-size: 100% 100%;
        background-position: 0 center;
        padding-left: 0.98rem;
        color: #fff;
        font-size: 16px;
      }
    }

  }

  .charts {
    width: 225px;
    height: 150px;
  }

  .charts1 {
    width: 550px;
    height: 250px;
  }

}
</style>