From 5674d35f196ed7767cf5c70bde0777a89ac7c9e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98daijinzheng=40xingtongworld=2Ecom=E2=80=99?=
 <‘ceshi@qq.com’>
Date: Thu, 13 Jul 2023 19:02:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=B7=E5=BA=B7web=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=A4=84=E7=90=862?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ty/index.vue   |    3 -
 src/views/ty/index24.vue | 1463 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 1463 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ty/index24.vue

diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue
index 902d3d4..0b3a41b 100644
--- a/src/views/ty/index.vue
+++ b/src/views/ty/index.vue
@@ -175,9 +175,6 @@ export default {
     // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
     this.$nextTick(() => {
       this.initPlugin();
-      // this.initPlugin(playWnd2);
-      // this.initPlugin(playWnd3);
-
     });
   },
 
diff --git a/src/views/ty/index24.vue b/src/views/ty/index24.vue
new file mode 100644
index 0000000..3727899
--- /dev/null
+++ b/src/views/ty/index24.vue
@@ -0,0 +1,1463 @@
+<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 class="bfb">
+            <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
+  
+            <div class="num">24,352,345</div> -->
+  
+            <!-- <div class="cntTxt">
+                       <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
+                       <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
+                    </div> -->
+  
+            <!-- <div class="cntTxt">
+                <canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts"
+                  @click="tap" />
+              </div> -->
+  
+            <!-- <div class="rsType">
+              <div class="typeItem">
+                <div>安静</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" />
+              </div>
+              <div class="typeItem">
+                <div>舒适</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" />
+              </div>
+              <div class="typeItem">
+                <div>拥挤</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
+              </div>
+            </div>
+          </div> -->
+          </div>
+  
+          <div class="center">
+            <div class="item">
+              <!-- <Video :src="src1" :poster="poster" /> -->
+              <!-- <video style="width: 90%;margin-top:0.4rem;height: 80%;" class="demo-video" ref="player" muted autoplay></video> -->
+              <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="playWnd" autoplay></video>
+              <!--<button onclick="flv_load()">加载</button>-->
+              <!-- <button onclick="flv_start()">开始</button> -->
+              <!-- <button onclick="flv_pause()">暂停</button>
+              <button onclick="flv_destroy()">停止</button>
+              <input style="width:100px" type="text" name="seekpoint" />
+              <button onclick="flv_seekto()">跳转</button> -->
+            </div>
+            <div class="item">
+              <!-- <video style="width: 90%;margin-top:0.4rem;height: 80%;" class="demo-video" ref="player" muted autoplay></video> -->
+              <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="playWnd2" autoplay></video>
+            </div>
+            <div class="item">
+              <!-- <video style="width: 90%;margin-top:0.4rem;height: 80%;" class="demo-video" ref="player" muted autoplay></video> -->
+              <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="playWnd3" autoplay></video>
+            </div>
+            <!-- <div class="item"></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">
+                    <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
+                    <span class="venue_proportion_box_num">25%</span>
+                  </div>
+                  <div class="venue_proportion_bo">
+                    <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
+                    <span>体育场</span>
+                  </div>
+                </div>
+                <div class="venue_proportion">
+                  <div class="venue_proportion_top">
+                    <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
+                    <span class="venue_proportion_box_num">25%</span>
+                  </div>
+                  <div class="venue_proportion_bo">
+                    <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
+                    <span>体育馆</span>
+                  </div>
+                </div>
+                <div class="venue_proportion">
+                  <div class="venue_proportion_top">
+                    <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
+                    <span class="venue_proportion_box_num">25%</span>
+                  </div>
+                  <div class="venue_proportion_bo">
+                    <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
+                    <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: {
+      LivePlayer
+    },
+    data() {
+      return {
+        player: '',
+        videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa/',
+        initCount: 0,
+        pubKey: '',
+        oWebControl2: '',
+  
+      };
+    },
+    created() {
+      // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
+      this.$nextTick(() => {
+        this.initPlugin();
+        this.initPlugin2();
+        this.initPlugin3();
+        // this.initPlugin(playWnd2);
+        // this.initPlugin(playWnd3);
+  
+      });
+    },
+  
+    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
+          const tmpdata = res.data.returnData
+          console.log(tmpdata);
+          // 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);
+          // });
+  
+        });
+      },
+  
+      // 创建播放实例
+      initPlugin() {
+        let _that = this;
+        const oWebControl = new window.WebControl({
+          szPluginContainer: 'playWnd', // 指定容器id
+          iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+          iServicePortEnd: 15900,
+          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+          cbConnectSuccess() {
+            console.log('创建WebControl实例成功');
+            oWebControl.JS_StartService('window', {
+              // WebControl实例创建成功后需要启动服务
+              dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
+            })
+              .then(
+                () => {
+                  // // 启动插件服务成功
+                  oWebControl.JS_SetWindowControlCallback({
+                    // 设置消息回调
+                    cbIntegrationCallBack: _that.cbIntegrationCallBack,
+                  });
+                  oWebControl.JS_CreateWnd('playWnd').then(() => {
+                    //JS_CreateWnd创建视频播放窗口，宽高可设定
+                    _that.init(); // 创建播放实例成功后初始化
+                    
+                  });
+                },
+                () => {
+                  // 启动插件服务失败
+                  console.log('启动插件服务失败');
+                }
+              )
+              .catch((err) => {
+                console.log(err);
+              });
+          },
+          cbConnectError() {
+            // 创建WebControl实例失败
+            console.log('xxx');
+            oWebControl = null;
+            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...');
+            window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+            this.initCount++;
+            if (this.initCount < 3) {
+              setTimeout(function () {
+                this.initPlugin();
+              }, 3000);
+            } else {
+              $('#playWnd').html('插件启动失败，请检查插件是否安装！');
+            }
+          },
+          cbConnectClose(bNormalClose) {
+            // 异常断开：bNormalClose = false
+            // JS_Disconnect正常断开：bNormalClose = true
+            console.log('cbConnectClose');
+            oWebControl = null;
+          },
+        });
+        this.oWebControl2 = oWebControl;
+      },
+      initPlugin2() {
+        let _that = this;
+        const oWebControl = new window.WebControl({
+          szPluginContainer: 'playWnd2', // 指定容器id
+          iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+          iServicePortEnd: 15900,
+          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+          cbConnectSuccess() {
+            console.log('创建WebControl实例成功');
+            oWebControl.JS_StartService('window', {
+              // WebControl实例创建成功后需要启动服务
+              dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
+            })
+              .then(
+                () => {
+                  // // 启动插件服务成功
+                  oWebControl.JS_SetWindowControlCallback({
+                    // 设置消息回调
+                    cbIntegrationCallBack: _that.cbIntegrationCallBack,
+                  });
+                  oWebControl.JS_CreateWnd('playWnd2').then(() => {
+                    //JS_CreateWnd创建视频播放窗口，宽高可设定
+                    _that.init(); // 创建播放实例成功后初始化
+                    
+                  });
+                },
+                () => {
+                  // 启动插件服务失败
+                  console.log('启动插件服务失败');
+                }
+              )
+              .catch((err) => {
+                console.log(err);
+              });
+          },
+          cbConnectError() {
+            // 创建WebControl实例失败
+            console.log('xxx');
+            oWebControl = null;
+            $('#playWnd2').html('插件未启动，正在尝试启动，请稍候...');
+            window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+            this.initCount++;
+            if (this.initCount < 3) {
+              setTimeout(function () {
+                this.initPlugin();
+              }, 3000);
+            } else {
+              $('#playWnd2').html('插件启动失败，请检查插件是否安装！');
+            }
+          },
+          cbConnectClose(bNormalClose) {
+            // 异常断开：bNormalClose = false
+            // JS_Disconnect正常断开：bNormalClose = true
+            console.log('cbConnectClose');
+            oWebControl = null;
+          },
+        });
+        this.oWebControl2 = oWebControl;
+      },
+      initPlugin3() {
+        let _that = this;
+        const oWebControl = new window.WebControl({
+          szPluginContainer: 'playWnd3', // 指定容器id
+          iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+          iServicePortEnd: 15900,
+          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+          cbConnectSuccess() {
+            console.log('创建WebControl实例成功');
+            oWebControl.JS_StartService('window', {
+              // WebControl实例创建成功后需要启动服务
+              dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
+            })
+              .then(
+                () => {
+                  // // 启动插件服务成功
+                  oWebControl.JS_SetWindowControlCallback({
+                    // 设置消息回调
+                    cbIntegrationCallBack: _that.cbIntegrationCallBack,
+                  });
+                  oWebControl.JS_CreateWnd('playWnd3').then(() => {
+                    //JS_CreateWnd创建视频播放窗口，宽高可设定
+                    _that.init(); // 创建播放实例成功后初始化
+                    
+                  });
+                },
+                () => {
+                  // 启动插件服务失败
+                  console.log('启动插件服务失败');
+                }
+              )
+              .catch((err) => {
+                console.log(err);
+              });
+          },
+          cbConnectError() {
+            // 创建WebControl实例失败
+            console.log('xxx');
+            oWebControl = null;
+            $('#playWnd3').html('插件未启动，正在尝试启动，请稍候...');
+            window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+            this.initCount++;
+            if (this.initCount < 3) {
+              setTimeout(function () {
+                this.initPlugin();
+              }, 3000);
+            } else {
+              $('#playWnd3').html('插件启动失败，请检查插件是否安装！');
+            }
+          },
+          cbConnectClose(bNormalClose) {
+            // 异常断开：bNormalClose = false
+            // JS_Disconnect正常断开：bNormalClose = true
+            console.log('cbConnectClose');
+            oWebControl = null;
+          },
+        });
+        this.oWebControl2 = oWebControl;
+      },
+      //初始化
+      init() {
+        let _that = this;
+        this.getPubKey(function () {
+          // 请自行修改以下变量值
+          var appkey = "28730366"; //综合安防管理平台提供的appkey，必填
+          var secret = _that.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填
+          var ip = "10.19.132.75"; //综合安防管理平台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 width = document.querySelector("#playWnd").offsetWidth;
+              let height = document.querySelector("#playWnd").offsetHeight;
+              let width2 = document.querySelector("#playWnd2").offsetWidth;
+              let height2 = document.querySelector("#playWnd2").offsetHeight;
+              let width3 = document.querySelector("#playWnd3").offsetWidth;
+              let height3 = document.querySelector("#playWnd3").offsetHeight;
+              _that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
+              _that.oWebControl2.JS_Resize(width2, height2); // 初始化后resize一次，能和盒子大小一致。
+              _that.oWebControl2.JS_Resize(width3, height3); // 初始化后resize一次，能和盒子大小一致。
+              console.log(oData);
+              _that.getVideoFun('05edddc148b141c5930301af43154942')
+            });
+        });
+      },
+      // 设置窗口控制回调
+      setCallbacks() {
+        this.oWebControl.JS_SetWindowControlCallback({
+          cbIntegrationCallBack: this.cbIntegrationCallBack,
+        });
+      },
+      // 推送消息
+      cbIntegrationCallBack(oData) {
+        //操作抓图录像时可以打印信息
+        console.log(oData);
+      },
+      //获取公钥
+      getPubKey(callback) {
+        this.oWebControl2.JS_RequestInterface({
+          funcName: "getRSAPubKey",
+          argument: JSON.stringify({
+            keyLength: 1024,
+          }),
+        })
+          .then((oData) => {
+            if (oData.responseMsg.data) {
+              this.pubKey = oData.responseMsg.data;
+              console.log(this.pubKey);
+              callback();
+            }
+          });
+      },
+      //RSA加密
+      setEncrypt(value) {
+        var encrypt = new window.JSEncrypt();
+        encrypt.setPublicKey(this.pubKey);
+        return encrypt.encrypt(value);
+      },
+      //视频预览功能
+      getVideoFun(Code) {
+        //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
+        var cameraIndexCode = Code; //获取输入的监控点编号值，必填
+        var streamMode = 0; //主子码流标识：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('播放成功')
+            console.log(res);
+          },
+            err => {
+              console.log('播放失败')
+              console.log(preUrl);
+              // console.info('JS_Play failed:', err)
+              console.info(err)
+            });
+      },
+      //停止全部预览
+      stopVideoFun() {
+        this.oWebControl2.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;
+      // border: 1px solid #019ade;
+      // display: flex;
+      // flex-wrap: wrap;
+  
+      .pcgrliu {
+        width: 100%;
+        // width: 634px;
+        // height: 290px;
+        flex: 1;
+  
+        &:nth-child(2) {
+          // margin-top: 0.5rem;
+        }
+  
+        .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;
+        }
+      }
+  
+      // align-items: center;
+      // align-content: center;
+      // justify-content: center;
+      // background-image: url("../../assets/ty/vbig_bg.png");
+      // background-size: contain;
+      // background-repeat: no-repeat;
+  
+      // .item {
+      //   width: 80%;
+      //   height: 30%;
+      //   margin-top: 5px;
+      //   background-image: url("../../assets/ty/vsmall_bg.png");
+      //   background-size: contain;
+      //   background-repeat: no-repeat;
+      // }
+  
+      // .item:nth-child(2),
+      // .item:nth-child(4) {
+      //   margin-right: 60px;
+      // }
+    }
+  
+    .charts {
+      width: 225px;
+      height: 150px;
+    }
+  
+    .charts1 {
+      width: 550px;
+      height: 250px;
+    }
+  
+    // .btgym {
+    //   width: 100%;
+    //   height: 100%;
+    //   background-image: url('../../assets/index/bg.jpg') !important;
+    //   background-size: 100% 100%;
+    //   background-position: 100% 100%;
+    //   background-repeat: no-repeat;
+    // }
+  
+  
+    // .wh_bg {
+    //   clear: both;
+    //   background-image: url("../../assets/wh/whbg.jpg") !important;
+    // }
+  }
+  </style>
\ No newline at end of file