视频流

package.json

@@ -36,6 +36,7 @@
         "url": "https://gitee.com/y_project/RuoYi-Vue.git"
     },
     "dependencies": {
+        "@liveqing/liveplayer": "^2.7.10",
         "@riophae/vue-treeselect": "0.4.0",
         "axios": "0.24.0",
         "clipboard": "2.0.8",
@@ -56,6 +57,8 @@
         "quill": "1.3.7",
         "screenfull": "5.0.2",
         "sortablejs": "1.10.2",
+        "video.js": "^8.10.0",
+        "videojs-contrib-hls": "^5.15.0",
         "vue": "2.6.12",
         "vue-count-to": "1.0.13",
         "vue-cropper": "0.5.5",

public/index.html

@@ -210,6 +210,7 @@
     <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
     <link rel="stylesheet" href="./html/bootstrap.min.css">
     <script src="./html/bootstrap.bundle.min.js"></script>
+    <script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
     <!-- 用于前端与插件交互 -->
 
     <script type="text/javascript">

src/components/livePlayer.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="videoDiv">
+        <div class="videoClass">
+            <div style="margin-top:0.5vh">
+                <!-- <video autoplay controls width="97%" height="100%" :id="videoElementId"></video> -->
+                <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch style="width:100%;height:100%;margin-top:1vh"></LivePlayer>               
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import LivePlayer from '@liveqing/liveplayer' // vue2
+
+export default {
+    data() {
+        return {
+            videoName: '获取中……',
+            rtsp: '获取中……',
+            flvPlayer: '',
+            videoUrl:'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8',
+        };
+    },
+    components: {
+        LivePlayer
+    },
+    beforeDestroy() { 
+          this.destoryVideo(this.flvPlayer);
+    },
+    props: {
+        videoId: String,
+        videoElementId: String
+    },
+    computed: {
+        mainMenuIndex: function () {
+            return this.$store.state.mainMenuIndex;
+        },
+
+    },
+    mounted() {
+        this.$nextTick(() => {
+            // this.createVideo()
+            this.getVideoData(this.videoId)
+        })
+    },
+    methods: {
+        destoryVideo(flvPlayer) {
+            flvPlayer.pause();
+            flvPlayer.unload();
+            flvPlayer.detachMediaElement();
+            flvPlayer.destroy();
+            flvPlayer = null;
+        },
+        getVideoData(data) {
+            console.log(data)
+            var param = {
+                id: data
+            }
+            // postVideoUrlHttp(params).then(response =>{ 
+            //                         console.log(response.data);
+            //                         var obj = {};
+            //                         obj.videoUrl = response.data
+            //                         obj.videoName = this.videoDicList[index].dictLabel
+            //                         this.createVideo(obj.videoUrl)
+            //                  })
+            //this.createVideo(obj.videoUrl)
+        },
+        isShowDiv() {
+            this.$parent.isShowVideoDiv = false
+        }
+
+    }
+}
+</script>
+
+<style>
+.label_class {
+    width: 100rem;
+    height: 32rem;
+    margin-left: 10rem
+}
+
+.videoDiv {
+
+    .videoClass {
+        /* background: url("~@/assets/images/home/frame_liusuliuxiang@2x.png") no-repeat;
+        background-size: 100% 100%; */
+        height: 100%;
+        width: 100%;
+        padding-left: 1vw
+    }
+
+}
+</style>

src/views/new/index.vue

@@ -93,11 +93,11 @@
                                                                         font-family: Adobe Heiti Std;
                                                                         font-weight: normal;
                                                                         color: #FFFFFF;
-                                                                        ">预警总数</div>
+                                                                        ">隐患总数</div>
                                                                 <div style='font-size: 2rem;
                                                                         font-family: Myriad Pro;
                                                                         font-weight: 400;
-                                                                        color: #21F5F2;'>0</div>
+                                                                        color: #21F5F2;'>{{incidentTotal}}</div>
                                                         </div>
                                                         </div>
                                                         <div class="yjcontent2" style="padding-left:2rem;padding-top:1.5rem">
@@ -105,11 +105,11 @@
                                                                 <div style="font-size: 1.4rem;
                                                                         font-family: Adobe Heiti Std;
                                                                         font-weight: normal;
-                                                                        color: #FFFFFF;">未处理预警</div>
+                                                                        color: #FFFFFF;">未处理隐患</div>
                                                                 <div  style='font-size: 2rem;
                                                                         font-family: Myriad Pro;
                                                                         font-weight: 400;
-                                                                        color: #23B9FF;'>0</div>
+                                                                        color: #23B9FF;'>{{unDealTotal}}</div>
                                                         </div>
                                                         </div>
                                                         </div>
@@ -183,6 +183,8 @@
                     },
                     staticCount:0,
                     dynamicCount:2,
+                    unDealTotal:0,
+                    incidentTotal:0,
                     areaCount:0,
                     lcData:{
                          weeks:[],
@@ -191,6 +193,7 @@
                     queryIncidentParams: {
                       queryFlag: '1'
                     },
+                    areaIncidentTotal:[],
               };
           },
           components:{
@@ -199,9 +202,9 @@
             videodiv,
           },
           mounted() {
-              this.initchart();
+        //       this.initchart();
               this.getGovern();
-              this.inityjchart();
+        //       this.inityjchart();
         //       this.getGdChart();
               this.getImgList();
               this.getWorkList();
@@ -281,6 +284,12 @@
               },
               getGovern(){
                       getgovern().then(data =>{
+                             console.log(data)
+                             this.unDealTotal = data.data.unDealTotal
+                             this.incidentTotal = data.data.incidentTotal
+                             this.areaIncidentTotal = data.data.areaIncidentTotal
+                             this.inityjchart();
+                             this.initchart(data.data.areaIncidentDetail);
                              this.userList  = data.data.checkStatic;
                              this.tdxjCount = data.data.xunTotalDistance;
                              this.tdcsCount = data.data.checkPointLogNum;
@@ -300,7 +309,25 @@
                               this.initlcchart();
                       })
               },
-              initchart(){
+              initchart(data){
+                    console.log(data)
+                    var areaName = [];
+                    var yujCount = [];
+                    var unDealCount = [];
+
+                    for(var index in data){
+                        // console.log(data[])
+                        areaName.push(data[index].areaName);
+                        console.log(data[index].detail.key2);
+                        if(data[index].detail.key1){
+                                yujCount.push(data[index].detail.key1+data[index].detail.key2);
+                                unDealCount.push(data[index].detail.key2);
+                        }else{
+                                yujCount.push(data[index].detail.key2);
+                                unDealCount.push(data[index].detail.key2);
+                        }
+                    }
+                    console.log(yujCount);
                     var myChart = this.$echarts.init(document.getElementById('yjchart'));
                     var option = {
                                   color: ['#3DFCCD', '#23B9FF'],
@@ -335,7 +362,7 @@
                                   },
                                   yAxis: {
                                       type: 'category',
-                                      data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇'],
+                                      data: areaName,
                                       axisLabel: {
                                                               show: true,
                                                               textStyle: {
@@ -345,20 +372,35 @@
                                   },
                                   series: [
                                       {
-                                      name: '已处理预警',
+                                      name: '已处理隐患',
                                       type: 'bar',
-                                      data: [573, 289, 357, 405, 501, 286]
+                                      data: unDealCount
                                       },
                                       {
-                                      name: '预警总数',
+                                      name: '隐患总数',
                                       type: 'bar',
-                                      data: [582, 366, 391, 498, 577, 337]
+                                      data: yujCount
                                       }
                                   ]
                                   };
                       myChart.setOption(option);
               },
-              inityjchart(){
+              inityjchart(data){
+                  var seriesArrary =[
+                                          { value: 0, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
+                                          { value: 0, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
+                                          { value: 0, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
+                                          { value: 0, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
+                                          { value: 0, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
+                                          { value: 0, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
+                  ]
+                  for (var i in seriesArrary){
+                        for(var j in this.areaIncidentTotal){
+                            if(seriesArrary[i].name == this.areaIncidentTotal[j].areaName){
+                                          seriesArrary[i].value = this.areaIncidentTotal[j].num
+                            }
+                  }
+                  }
                   var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
                   var option = {
                                   series: [
@@ -377,15 +419,7 @@
                                               formatter: '{b} ({d}%)'
                                           }
                                       },
-                                      data: [
-                                          { value: 40, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
-                                          { value: 38, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
-                                          { value: 32, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
-                                          { value: 30, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
-                                          { value: 28, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
-                                          { value: 26, name: '其它' ,  itemStyle: { color: '#1C3F83' },},
-                                          { value: 22, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
-                                      ]
+                                      data:seriesArrary
                                       }
                                   ]
                               };
@@ -504,7 +538,7 @@
                                   },
                                   series: [
                                       {
-                                      name: '已处理预警',
+                                      name: '巡检⾥程（⽶）',
                                       type: 'bar',
                                       data: this.lcData.counts,
                                       barWidth:10

src/views/new/statics.vue

@@ -0,0 +1,538 @@
+<template>
+      <div style="width:100%;height:100%;position:relative">
+                 <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+                <div style="display: flex;flex-direction: row;">
+                        
+                </div>
+      </div>
+</template>
+    
+    <script>
+    import moment from "moment";
+    import mapdiv from "../../components/map/index.vue"
+    import { listWork } from "@/api/qdtl/work";
+    import headerdiv from '@/components/HeaderDiv/index.vue'
+    import { httpRequest } from "@/api/data/http";
+    import { getLineData,getResource,getgovern,getincidentList } from "@/api/qdtl/data";
+    
+    import videodiv from "../../components/Videoplayer/index.vue"
+    
+    export default {
+        name: "big",
+        data() {
+            return {
+                  workList:[],
+                  incidentList:[],
+                  userList:[],
+                  areaList:[],
+                  tdxjCount:111,
+                  tdcsCount:152,
+                  currentindexNew:3,
+                  videoChartDate:{},
+                  ccode:"32068166001320000235",
+                  videoParams:{
+                    url:'http://2.90.220.252:9017/artemis-web/debug',
+                    params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+                  },
+                  staticCount:0,
+                  dynamicCount:2,
+                  areaCount:0,
+                  lcData:{
+                       weeks:[],
+                       counts:[]
+                  },
+                  queryIncidentParams: {
+                    queryFlag: '1'
+                  },
+            };
+        },
+        components:{
+          mapdiv,
+          headerdiv,
+          videodiv,
+        },
+        mounted() {
+            this.initchart();
+            this.getGovern();
+            this.inityjchart();
+            this.getGdChart();
+            this.getImgList();
+            this.getWorkList();
+        },
+        methods:{
+            getWorkList(){
+              var obj = {
+                          status:1
+                        }
+              listWork(obj).then(response =>{
+                    this.workList = response.rows
+                    //console.log(response);
+              })
+            },
+            getImageUrl(pic){
+                   return process.env.VUE_APP_BASE_API+pic
+            },
+            getImgList(){
+                  getincidentList(this.queryIncidentParams).then(response =>{
+                          console.log(response);
+                          for(var index in response.rows){
+                                  if(response.rows[index].pics != null && response.rows[index].pics != '' && response.rows[index].dealPics != null && response.rows[index].dealPics != '' && response.rows[index].status == 2 && this.incidentList.length < 6){
+                                         this.incidentList.push(response.rows[index]);
+                                  }
+                          }
+                          console.log(this.incidentList)
+                  })
+            },
+            getGdChart(){
+                 var myChart = this.$echarts.init(document.getElementById('gdChart'));
+                 var option = {
+                                xAxis: {
+                                    type: 'category',
+                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                                     axisLabel: {
+                                                show: true,
+                                                textStyle: {
+                                                color: '#ACB6B9'   //这里用参数代替了
+                                            }
+                                    },
+                                },
+                                yAxis: {
+                                     axisLabel: {
+                                                show: true,
+                                                textStyle: {
+                                                color: '#ACB6B9'   //这里用参数代替了
+                                            }
+                                    },
+                                    type: 'value'
+                                },
+                                color: new this.$echarts.graphic.LinearGradient(
+                                        0, 0, 0, 1,
+                                        [
+                                            {offset: 1, color: '#2275E4'},                   //柱图渐变色
+                                            {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+                                        ]
+                               ),
+                                series: [
+                                    {
+                                            barWidth:15,
+                                            data: [120, 200, 150, 80, 70, 110, 130],
+                                            type: 'bar'
+                                    }
+                                ]
+                    };
+                 myChart.setOption(option);
+            },
+            tableRowClassName({ row, rowIndex }) {
+                    if ((rowIndex + 1) % 2 === 0) {
+                        return "warning-row";
+                    } else {
+                        return "success-row";
+                    }
+            },
+            changeMapTab(index){
+                this.$refs.mapdiv.iconSelect = index
+            },
+            getGovern(){
+                    getgovern().then(data =>{
+                           this.userList  = data.data.checkStatic;
+                           this.tdxjCount = data.data.xunTotalDistance;
+                           this.tdcsCount = data.data.checkPointLogNum;
+                           this.videoChartDate.name = [];
+                           this.videoChartDate.count = [];
+                           this.areaList = data.data.areaStatics
+                           for(var index in data.data.cameraslist){
+                                   this.videoChartDate.name.push(data.data.cameraslist[index].name);
+                                   this.videoChartDate.count.push(data.data.cameraslist[index].num);
+                           }
+                           this.initVideochart();
+                           for(var index in data.data.locationLogDaysList){
+                                   this.lcData.weeks.push(data.data.locationLogDaysList[index].week)
+                                   this.lcData.counts.push(data.data.locationLogDaysList[index].distance)
+    
+                           }
+                            this.initlcchart();
+                    })
+            },
+            initchart(){
+                  var myChart = this.$echarts.init(document.getElementById('yjchart'));
+                  var option = {
+                                color: ['#3DFCCD', '#23B9FF'],
+                                tooltip: {
+                                    trigger: 'axis',
+                                    axisPointer: {
+                                    type: 'shadow'
+                                    }
+                                },
+                                legend: {
+                                       x:'left',
+                                       textStyle:{
+                                                fontSize: 12,//字体大小
+                                                color: '"#fft'//字体颜色
+                                        },
+                                },
+                                grid: {
+                                    left: '3%',
+                                    right: '4%',
+                                    bottom: '3%',
+                                    containLabel: true
+                                },
+                                xAxis: {
+                                    type: 'value',
+                                    boundaryGap: [0, 0.01],
+                                    axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                                },
+                                },
+                                yAxis: {
+                                    type: 'category',
+                                    data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇'],
+                                    axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                                },
+                                },
+                                series: [
+                                    {
+                                    name: '已处理预警',
+                                    type: 'bar',
+                                    data: [573, 289, 357, 405, 501, 286]
+                                    },
+                                    {
+                                    name: '预警总数',
+                                    type: 'bar',
+                                    data: [582, 366, 391, 498, 577, 337]
+                                    }
+                                ]
+                                };
+                    myChart.setOption(option);
+            },
+            inityjchart(){
+                var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
+                var option = {
+                                series: [
+                                    {
+                                    name: 'Nightingale Chart',
+                                    type: 'pie',
+                                    radius: [20, 100],
+                                    center: ['50%', '50%'],
+                                    roseType: 'area',
+                                    itemStyle: {
+                                        borderRadius: 8
+                                    },
+                                     label: {
+                                        normal: {
+                                            show: true,
+                                            formatter: '{b} ({d}%)'
+                                        }
+                                    },
+                                    data: [
+                                        { value: 40, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
+                                        { value: 38, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
+                                        { value: 32, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
+                                        { value: 30, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
+                                        { value: 28, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
+                                        { value: 26, name: '其它' ,  itemStyle: { color: '#1C3F83' },},
+                                        { value: 22, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
+                                    ]
+                                    }
+                                ]
+                            };
+                            myChart.setOption(option);
+    
+            },
+             initVideochart(){
+                    var myChart = this.$echarts.init(document.getElementById('videoeChart'));
+                    var option = {
+                                    tooltip: {
+                                            trigger: 'axis',
+                                            axisPointer: {
+                                            type: 'shadow'
+                                            }
+                                    },
+                                    grid: {
+                                            left: '3%',
+                                            right: '4%',
+                                            top: '3%',
+                                            bottom:'3%',
+                                            containLabel: true
+                                    },
+                                    xAxis: {
+                                            type: 'value',
+                                            boundaryGap: [0, 0.01],
+                                            axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                            },
+                                            splitLine: {
+                                                            show: false,
+                                                            lineStyle: {
+                                                                    color: "#006691"
+                                                                    }
+                                            },
+                                    },
+                                    yAxis: {
+                                            type: 'category',
+                                            data: this.videoChartDate.name,
+                                            axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                            },
+                                             splitLine: {
+                                                            show: false,
+                                                            lineStyle: {
+                                                                    color: "#006691"
+                                                                    }
+                                            },
+    
+                                    },
+                                    series: [
+                                            {
+                                            name: '探头',
+                                            type: 'bar',
+                                            barWidth:10,
+                                            itemStyle: {
+                                                    normal: {
+                                                            color:'#3BFFE8'
+                                                    }
+                                           },
+                                            data: this.videoChartDate.count
+                                            },
+                                    ]
+                                    };
+                        myChart.setOption(option);
+            },
+            initlcchart(){
+                    var myChart = this.$echarts.init(document.getElementById('lcChart'));
+                   var option = {
+                                color: [
+                                  new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                            offset: 0,
+                                                            color: '#00E3C0'
+                                                    }, {
+                                                            offset: 1,
+                                                            color: '#0068DC'
+                                                    }]),
+                                  ],
+                                tooltip: {
+                                    trigger: 'axis',
+                                    axisPointer: {
+                                    type: 'shadow'
+                                    }
+                                },
+                                grid: {
+                                    left: '3%',
+                                    right: '4%',
+                                    bottom: '1%',
+                                    top:'15%',
+                                    containLabel: true
+                                },
+                                yAxis: {
+                                    type: 'value',
+                                    boundaryGap: [0, 0.01],
+                                    axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                                },
+                                },
+                                xAxis: {
+                                    type: 'category',
+                                    data: this.lcData.weeks,
+                                    axisLabel: {
+                                                            show: true,
+                                                            textStyle: {
+                                                            color: '#ACB6B9'   //这里用参数代替了
+                                                       }
+                                                },
+                                },
+                                series: [
+                                    {
+                                    name: '已处理预警',
+                                    type: 'bar',
+                                    data: this.lcData.counts,
+                                    barWidth:10
+                                    },
+                                ]
+                                };
+                        myChart.setOption(option);
+            },
+        }
+    };
+    </script>
+    
+    <style rel="stylesheet/scss" lang="scss">
+     .el-table__empty-block{
+            background-color: #112832
+     }
+     .publicTitle{
+              background: url("~@/assets/images/title@2x.png") no-repeat;
+              background-size: 100% 100%;
+              width:95%;
+              height:3.9rem;
+              padding-left:1.5rem;
+              padding-top:0.7rem;
+              display: inline-flex;
+           }
+    .publicTitle2{
+        background: url("~@/assets/images/title2@2x.png") no-repeat;
+        background-size: 100% 100%;
+        width:95%;
+        height:3.9rem;
+        padding-left:1.5rem;
+        padding-top:0.7rem;
+        display: inline-flex;
+    }
+    .yjcontent1{
+              background: url("~@/assets/images/safe/bg2.png") no-repeat;
+              background-size: 100% 100%;
+              width:18.7rem;
+              height:8.3rem;
+              margin-left:3.5rem;
+              margin-top:1rem;
+              display: inline-flex;
+              // display: inline-flex;
+    }
+    .yjcontent2{
+              background: url("~@/assets/images/safe/bg1.png") no-repeat;
+              background-size: 100% 100%;
+              width:18.7rem;
+              height:8.3rem;
+              margin-left:3.5rem;
+              margin-top:1rem;
+              display: inline-flex;
+              // display: inline-flex;
+    }
+    .zdyjcontrnt{
+              background: url("~@/assets/images/safe/组 15@2x.png") no-repeat;
+              background-size: 100% 100%;
+              width:42.7rem;
+              height:12rem;
+              margin-left:1.5rem;
+              margin-top:1rem;
+              display: inline-flex;
+    }
+    
+    .bgcontent{
+              background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
+              background-size: 100% 100%;
+              width:6.9rem;
+              height:6.9rem;
+              margin-left:1.5rem;
+              margin-top:1rem;
+              display: inline-flex;
+    }
+    
+    .pieChart{
+              background: url("~@/assets/images/safe/piechart.png") no-repeat;
+              background-size: 100% 100%;
+              width:38.8rem;
+              height:17.5rem;
+              margin-left:4rem;
+              margin-top:1rem;
+              display: inline-flex;
+    }
+    
+    .countClass{
+        font-size: 2.4rem;
+        font-family: AlibabaSans;
+        font-weight: 500;
+        color: #30FDFF;
+    }
+    
+    .deptClass{
+        font-size: 1.4rem;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        color: #BAC3C4;
+    }
+    
+    .tdgove{
+              background: url("~@/assets/images/goverce/态势1@2x.png") no-repeat;
+              background-size: 100% 100%;
+              width:32rem;
+              height:9.6rem;
+              margin-left:3.5rem;
+              margin-top:1rem;
+              display: inline-flex;
+              // display: inline-flex;
+    }
+    
+    .tdgove2{
+              background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
+              background-size: 100% 100%;
+              width:37.2rem;
+              height:9.9rem;
+              margin-left:3.5rem;
+              display: inline-flex;
+              // display: inline-flex;
+    }
+    .fontClass{
+            font-size: 1.5rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 2.6rem;
+    }
+    
+    .EngClass{
+            font-size: 1.2rem;
+            font-family: AlibabaSans;
+            font-weight: 400;
+            color: #B7D0FA;
+            line-height: 1.1rem;
+            opacity: 0.4;
+    }
+    
+    .countClass{
+            font-size: 2.1rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #25FFDE;
+            line-height: 2rem;
+    }
+    
+    .countClass2{
+            font-size: 1.5rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 2.6rem;
+    }
+    
+    .isTop{
+            margin-top:2rem;
+    }
+    
+    .prcentClass{
+              background: url("~@/assets/images/goverce/prcent.png") no-repeat;
+              background-size: 100% 100%;
+              width:95%;
+              height:28rem;
+              padding-left:25rem
+    }
+    
+    .imgClass{
+            width: 40rem;
+            height: 20rem;
+            border: 0.1rem solid #30FFE7;
+    }
+    
+    .fontType{
+            font-size: 1.4rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #DFEEF3;
+            opacity: 0.8;
+    }
+    </style>
+    

src/views/qdtl/incident/index.vue

@@ -1,195 +1,213 @@
 <template>
   <div class="app-container">
-     <!-- <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv> -->
-     <div class="divtitle">
-       <img src="~@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
-       <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:1rem">{{divtitle}}</div>
-      </div>
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem" style="margin-top:1rem">
-     <el-row>
-         <el-col :span="18">
-                <el-form-item>
-                    <el-button type="primary"  size="mini" @click="getincidentExport">导出</el-button>
-                    <!-- <el-button type="primary"  size="mini" @click="handleQuery">批量导出</el-button> -->
-                </el-form-item>
-         </el-col>
-         <el-col :span="6">
-                     <el-input
-                                    v-model="queryParams.name"
-                                    placeholder="请输入事件名称"
-                                    clearable
-                                    size="small"
-                                    style="width:30rem"
-                                    />
-                    <el-button type="primary"  size="mini" @click="handleQuery">确定</el-button>
-         </el-col>
-     </el-row>
+    <!-- <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv> -->
+    <div class="divtitle">
+      <img src="~@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem" />
+      <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:1rem">
+        {{ divtitle }}</div>
+    </div>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem"
+      style="margin-top:1rem">
+      <el-row>
+        <el-col :span="18">
+          <el-date-picker v-model="value1" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
+            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="getincidentExport">导出</el-button>
+            <!-- <el-button type="primary"  size="mini" @click="handleQuery">批量导出</el-button> -->
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="queryParams.name" placeholder="请输入事件名称" clearable size="small" style="width:30rem" />
+          <el-button type="primary" size="mini" @click="handleQuery">确定</el-button>
+        </el-col>
+      </el-row>
     </el-form>
 
-    <el-table v-loading="loading" :data="documentList" @selection-change="handleSelectionChange" stripe
-      class="my_table"
-      :row-class-name="tableRowClassName"
-      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
-                    <el-table-column label="序号" align="center" type='index' />
-                    <!-- <el-table-column label="区域" align="center" prop="area" /> -->
-                    <el-table-column label="区域" align="center" prop="area">
-                        <template slot-scope="scope">
-                        <dict-tag :options="dict.type.tl_xun_area" :value="scope.row.area"/>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="位置" align="center" prop="address" />
-                    <el-table-column label="上报时间" align="center" prop="happenTime" />
-                    <el-table-column label="事件等级" align="center" class-name="small-padding fixed-width">
-                                <template slot-scope="scope">
-                                     <div :class='"color_"+scope.row.incLevel'>
-                                        {{getLevel(scope.row.incLevel)}}
-                                     </div>
-                                </template>
-                    </el-table-column>
-                     <el-table-column label="状态" align="center" class-name="small-padding fixed-width">
-                                <template slot-scope="scope">
-                                     <div>
-                                        {{getStatus(scope.row.status)}}
-                                     </div>
-                                </template>
-                    </el-table-column>
-                    <el-table-column label="事件名称" align="center" prop="name" />
-                    <el-table-column label="事件描述" align="center" prop="detail" />
-                    <el-table-column label="相关图片" align="center" class-name="small-padding fixed-width">
-                                <template slot-scope="scope">
-                                      {{getCount(scope.row.pics)+getCount(scope.row.dealPics)}}
-                                </template>
-                    </el-table-column>
-                    <el-table-column label="上报人" align="center" prop="createByName" />
-                    <el-table-column label="接收人" align="center" prop="acceptUserName" />
-                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-                                <template slot-scope="scope">
-                                        <el-button
-                                            size="mini"
-                                            type="text"
-                                            @click="openDetail(scope.row)"
-                                        >查看详细</el-button>
-                                </template>
-                    </el-table-column>
+    <el-table v-loading="loading" :data="documentList" @selection-change="handleSelectionChange" stripe class="my_table"
+      :row-class-name="tableRowClassName" :header-cell-style="{ background: '#24A3B3 50%', color: '#C5D0D4' }">
+      <el-table-column label="序号" align="center" type='index' />
+      <!-- <el-table-column label="区域" align="center" prop="area" /> -->
+      <el-table-column label="区域" align="center" prop="area">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.tl_xun_area" :value="scope.row.area" />
+        </template>
+      </el-table-column>
+      <el-table-column label="位置" align="center" prop="address" />
+      <el-table-column label="上报时间" align="center" prop="happenTime" />
+      <el-table-column label="事件等级" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <div :class='"color_" + scope.row.incLevel'>
+            {{ getLevel(scope.row.incLevel) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <div>
+            {{ getStatus(scope.row.status) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="事件名称" align="center" prop="name" />
+      <el-table-column label="事件描述" align="center" prop="detail" />
+      <el-table-column label="相关图片" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          {{ getCount(scope.row.pics) + getCount(scope.row.dealPics) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="上报人" align="center" prop="createByName" />
+      <el-table-column label="接收人" align="center" prop="acceptUserName" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="openDetail(scope.row)">查看详细</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
-    <el-dialog
-            :title="title"
-            :visible.sync="dialogVisible"
-            v-if='dialogVisible'
-            width="90%"
-            >
-            <div style="height:80vh">
-                   <el-col :span="8">
-                       <div style="padding-left:10rem">
-                            <div style="font-size: 1.6rem;
+    <el-dialog :title="title" :visible.sync="dialogVisible" v-if='dialogVisible' width="90%">
+      <div style="height:80vh">
+        <el-col :span="8">
+          <div style="padding-left:10rem">
+            <div style="font-size: 1.6rem;
                                         font-family: Microsoft YaHei;
                                         font-weight: 400;
                                         color: #3DFFEA;
                                         line-height: 36px;">
-                                        基本信息
-                            </div>
-                            <div style="font-size: 16px;
+              基本信息
+            </div>
+            <div style="font-size: 16px;
                                         font-family: Microsoft YaHei;
                                         font-weight: 400;
                                         color: #C5D0D4;
                                         line-height: 36px;
                                         margin-top:10rem">
-                               <el-row type="flex" class="row-bg">
-                                    <el-col :span="5"><div  style="float:right">区域:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{getAreaName(detailObj.area)}}</div></el-col>
-                               </el-row>
-                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div  style="float:right">位置:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.address}}</div></el-col>
-                               </el-row>
-                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">上报时间:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.happenTime}}</div></el-col>
-                               </el-row>
-                                <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">状态:</div></el-col>
-                                    <el-col :span="19">
-                                        <div style="padding-left:2rem">
-                                                <div>
-                                                    {{getStatus(detailObj.status)}}
-                                                </div>
-                                        </div></el-col>
-                               </el-row>
-                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">事件等级:</div></el-col>
-                                    <el-col :span="19">
-                                        <div style="padding-left:2rem">
-                                                <div :class='"color_"+detailObj.incLevel'>
-                                                    {{getLevel(detailObj.incLevel)}}
-                                                </div>
-                                        </div></el-col>
-                               </el-row>
-                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">事件名称:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.name}}</div></el-col>
-                               </el-row>
-                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">事件描述:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.detail}}</div></el-col>
-                               </el-row>
-                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">上报人:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.createByName}}</div></el-col>
-                               </el-row>
-                                 <el-row type="flex" class="row-bg" style="margin-top:2rem">
-                                    <el-col :span="5"><div style="float:right">接收人:</div></el-col>
-                                    <el-col :span="19"><div style="padding-left:2rem">{{detailObj.acceptUserName}}</div></el-col>
-                               </el-row>
-                           </div>
-                       </div>
-                   </el-col>
-                   <el-col :span="16">
-                           <div>
-                                    <div style="font-size: 1.6rem;
+              <el-row type="flex" class="row-bg">
+                <el-col :span="5">
+                  <div style="float:right">区域:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ getAreaName(detailObj.area) }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">位置:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.address }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">上报时间:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.happenTime }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">状态:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">
+                    <div>
+                      {{ getStatus(detailObj.status) }}
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">事件等级:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">
+                    <div :class='"color_" + detailObj.incLevel'>
+                      {{ getLevel(detailObj.incLevel) }}
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">事件名称:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.name }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">事件描述:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.detail }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">上报人:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.createByName }}</div>
+                </el-col>
+              </el-row>
+              <el-row type="flex" class="row-bg" style="margin-top:2rem">
+                <el-col :span="5">
+                  <div style="float:right">接收人:</div>
+                </el-col>
+                <el-col :span="19">
+                  <div style="padding-left:2rem">{{ detailObj.acceptUserName }}</div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <div>
+            <div style="font-size: 1.6rem;
                                                     font-family: Microsoft YaHei;
                                                     font-weight: 400;
                                                     color: #3DFFEA;
                                                     line-height: 36px;">
-                                                    相关图片
-                                    </div>
-                                    <div style="padding-top:2rem;padding-left:5rem">
-                                              <img :src='getImage()' style="width: 88.7rem;height: 50.7rem;"/>
-                                    </div>
-                                    <div v-if="detailObj.pics" style="display:flex; flex-direction: row;margin-top:3rem;padding-left:5rem">
-                                                <div v-for="(pic,index) in detailObj.picList.split(',')">
-                                                     <div :class='selectindex === index?"imgSelect":""' v-if="pic !== ''" @click="selectImg(index)" style="margin-left:1rem">
-                                                     <img :src='getImageUrl(pic)' style="width: 11.7rem;height: 8.7rem;"/>
-                                                     </div>
-                                                </div>
-                                                <!-- <div v-for="(pic,index) in detailObj.dealPics.split(',')">
+              相关图片
+            </div>
+            <div style="padding-top:2rem;padding-left:5rem">
+              <img :src='getImage()' style="width: 88.7rem;height: 50.7rem;" />
+            </div>
+            <div v-if="detailObj.pics" style="display:flex; flex-direction: row;margin-top:3rem;padding-left:5rem">
+              <div v-for="(pic, index) in detailObj.picList.split(',')">
+                <div :class='selectindex === index ? "imgSelect" : ""' v-if="pic !== ''" @click="selectImg(index)"
+                  style="margin-left:1rem">
+                  <img :src='getImageUrl(pic)' style="width: 11.7rem;height: 8.7rem;" />
+                </div>
+              </div>
+              <!-- <div v-for="(pic,index) in detailObj.dealPics.split(',')">
                                                      <div :class='selectindex === index?"imgSelect":""' @click="selectImg(index)" style="margin-left:1rem">
                                                      <img :src='getImageUrl(pic)' style="width: 11.7rem;height: 8.7rem;"/>
                                                      </div>
                                                 </div> -->
-                                    </div>
-                           </div>
-                   </el-col>
             </div>
-            <!-- <span slot="footer" class="dialog-footer">
+          </div>
+        </el-col>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
             </span> -->
-            </el-dialog>
+    </el-dialog>
 
   </div>
 </template>
 
 <script>
-import { getincidentList,getincidentExport } from "@/api/qdtl/data";
+import { getincidentList, getincidentExport } from "@/api/qdtl/data";
 import { listWork } from "@/api/qdtl/work";
 import { listDocument } from '@/api/qdtl/document'
 import headerdiv from '@/components/HeaderDiv/index.vue'
@@ -202,15 +220,15 @@ export default {
   dicts: ['tl_xun_area'],
   data() {
     return {
-      pageList:[],
+      pageList: [],
 
-      picImage:'',
+      picImage: '',
 
-      detailObj:{},
+      detailObj: {},
       // 遮罩层
       loading: false,
 
-      divtitle:'隐患上报列表',
+      divtitle: '隐患上报列表',
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -228,126 +246,138 @@ export default {
       // 是否显示弹出层
       open: false,
 
-      dialogVisible:false,
+      dialogVisible: false,
 
-      isEdit:'true',
+      isEdit: 'true',
 
-      selectUser:[],
+      selectUser: [],
 
-      userList:[],
+      userList: [],
 
-      dateRange:'',
+      dateRange: '',
 
-      dateRangeArry:[],
+      dateRangeArry: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         queryFlag: '1',
       },
+      value1: [],
       // 表单参数
       form: {},
-      selectindex:0,
+      selectindex: 0,
 
-      formObj:{},
+      formObj: {},
 
-      pointArry:{
-        locations:'',
-        type:''
+      pointArry: {
+        locations: '',
+        type: ''
       },
-      scheduleList:[],
+      scheduleList: [],
       // 表单校验
       rules: {
       }
     };
   },
-   components:{
-      mapdiv,
-      headerdiv,
-      addDocument
-    },
+  components: {
+    mapdiv,
+    headerdiv,
+    addDocument
+  },
   created() {
     this.getList();
     // this.handleAdd();
     // this.dialogVisible = false;
     // this.getAreaList();
   },
-   mounted() {
-       this.dialogVisible = true;
-       this.dialogVisible = false;
-   },
+  mounted() {
+    this.dialogVisible = true;
+    this.dialogVisible = false;
+  },
   methods: {
-      getincidentExport(){
-         this.download('/qdtl/incident/export', {
-                        ...this.queryParams
-                    }, `location_${new Date().getTime()}.xlsx`)
-              // getincidentExport(this.queryParams).then(response =>{
-              //          console.log(response);
-              // })
-      },
-      selectImg(index){
-            //console.log(index);
-            //this.detailObj.index = index;
-            this.selectindex=index;
-            this.picImage = this.detailObj.picList.split(',')[index];
-            console.log(this.picImage);
-             //console.log(this.detailObj.index);
-      },
-      getAreaName(id){
-            console.log(this.dict.type.tl_xun_area);
-            for(var index in this.dict.type.tl_xun_area){
-                     if(this.dict.type.tl_xun_area[index].value == id){
-                                    return this.dict.type.tl_xun_area[index].label
-                     }
-            }
-      },
-      getImage (){
-            return process.env.VUE_APP_BASE_API+this.picImage
-      },
-      getImageUrl(pic){
-            return process.env.VUE_APP_BASE_API+pic
-      },
-      openDetail(obj){
-            //console.log(obj);
-            this.dialogVisible = true
-            this.detailObj = obj
-            console.log(this.detailObj.dealPics);
-            this.detailObj.picList = this.detailObj.pics+','+this.detailObj.dealPics
-            this.picImage = this.detailObj.pics.split(',')[0];
-            this.selectindex = 0;
-            console.log(this.picImage);
-      },
-      getStatus(status){
-               if(status == 1){
-                      return '未处理'
-               }else{
-                      return '已处理'
-               }
-      },
-      getLevel(level){
-           if(level == 0){
-                  return '紧急'
-           }else if(level == 1){
-                  return '一般'
-           }else if(level == 2){
-                  return '重大'
-           }
-      },
-      getCount(data){
-          if(data){
-              return data.split(',').length
-          }else{
-              return 0
-          }
-      },
+    getincidentExport() {
+      var beginTime = this.value1[0] + " 00:00:00";
+      var endTime = this.value1[1] + " 24:00:00";
+      let days = (new Date(endTime) - new Date(beginTime)) / 1000 / 60 / 60 / 24
+      console.log(days);
+      var obj = {
+        beginTime: beginTime,
+        endTime: endTime
+      }
+      console.log(obj)
+      if (days < 60) {
+        this.download('/qdtl/incident/export', obj, `location_${new Date().getTime()}.xlsx`)
+        getincidentExport(this.queryParams).then(response => {
+          // console.log(response);
+        })
+      }else{
+        this.$modal.msgError("时间跨度不得超过两月");
+      }
+    },
+    selectImg(index) {
+      //console.log(index);
+      //this.detailObj.index = index;
+      this.selectindex = index;
+      this.picImage = this.detailObj.picList.split(',')[index];
+      console.log(this.picImage);
+      //console.log(this.detailObj.index);
+    },
+    getAreaName(id) {
+      console.log(this.dict.type.tl_xun_area);
+      for (var index in this.dict.type.tl_xun_area) {
+        if (this.dict.type.tl_xun_area[index].value == id) {
+          return this.dict.type.tl_xun_area[index].label
+        }
+      }
+    },
+    getImage() {
+      return process.env.VUE_APP_BASE_API + this.picImage
+    },
+    getImageUrl(pic) {
+      return process.env.VUE_APP_BASE_API + pic
+    },
+    openDetail(obj) {
+      //console.log(obj);
+      this.dialogVisible = true
+      this.detailObj = obj
+      console.log(this.detailObj.dealPics);
+      this.detailObj.picList = this.detailObj.pics + ',' + this.detailObj.dealPics
+      this.picImage = this.detailObj.pics.split(',')[0];
+      this.selectindex = 0;
+      console.log(this.picImage);
+    },
+    getStatus(status) {
+      if (status == 1) {
+        return '未处理'
+      } else {
+        return '已处理'
+      }
+    },
+    getLevel(level) {
+      if (level == 0) {
+        return '紧急'
+      } else if (level == 1) {
+        return '一般'
+      } else if (level == 2) {
+        return '重大'
+      }
+    },
+    getCount(data) {
+      if (data) {
+        return data.split(',').length
+      } else {
+        return 0
+      }
+    },
     /** 查询巡检点管理列表 */
     getList() {
-    //   this.loading = true;
-     getincidentList(this.queryParams).then(response =>{
-         console.log(response);
-               this.documentList = response.rows
-               this.total = response.total
-     })
+      //   this.loading = true;
+      getincidentList(this.queryParams).then(response => {
+        console.log(response);
+        this.documentList = response.rows
+        this.total = response.total
+      })
     },
 
     // 取消按钮
@@ -387,7 +417,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -398,32 +428,32 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-     this.formObj = row;
-     this.title = "修改公文";
-     this.dialogVisible = true
-    //  console.log(this.$refs.documentDiv.queryParams);
-    //   getLocation(id).then(response => {
-    //     this.form = response.data;
-    //     this.open = true;
-    //     this.title = "修改巡检点管理";
-    //     this.openMap();
-    //   });
+      this.formObj = row;
+      this.title = "修改公文";
+      this.dialogVisible = true
+      //  console.log(this.$refs.documentDiv.queryParams);
+      //   getLocation(id).then(response => {
+      //     this.form = response.data;
+      //     this.open = true;
+      //     this.title = "修改巡检点管理";
+      //     this.openMap();
+      //   });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-              if(this.$refs.mapv.locations.length > 0){
-                  this.form.lnglat = this.$refs.mapv.locations.join(',');
-              }
+            if (this.$refs.mapv.locations.length > 0) {
+              this.form.lnglat = this.$refs.mapv.locations.join(',');
+            }
             updateLocation(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-              this.form.lnglat = this.$refs.mapv.locations.join(',');
+            this.form.lnglat = this.$refs.mapv.locations.join(',');
             addLocation(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -436,12 +466,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除巡检点管理编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除巡检点管理编号为"' + ids + '"的数据项？').then(function () {
         return delLocation(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -449,12 +479,12 @@ export default {
         ...this.queryParams
       }, `location_${new Date().getTime()}.xlsx`)
     },
-        tableRowClassName({ row, rowIndex }) {
-        if ((rowIndex + 1) % 2 === 0) {
-             return "warning-row";
-        } else {
-             return "success-row";
-        }
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
     },
 
   }
@@ -463,27 +493,31 @@ export default {
 
 
 <style scoped>
- .divtitle{
-          background: url("~@/assets/images/title2@2x.png") no-repeat;
-          background-size: 100% 100%;
-          width:100%;
-          height:3.9rem;
-          padding-top:0.8rem;
-          padding-left:3rem;
-          display: inline-flex;
-       }
-.color_1{
-       color: #C5D0D4;
+.divtitle {
+  background: url("~@/assets/images/title2@2x.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 3.9rem;
+  padding-top: 0.8rem;
+  padding-left: 3rem;
+  display: inline-flex;
+}
+
+.color_1 {
+  color: #C5D0D4;
 }
-.color_0{
-    color: #FF7400;
+
+.color_0 {
+  color: #FF7400;
 }
-.color_2{
-    color: #F4002D;
+
+.color_2 {
+  color: #F4002D;
 }
-.imgSelect{
-    background: #041824;
-    border: 1px solid rgba(66,255,231,0.46);
-    opacity: 0.84;
+
+.imgSelect {
+  background: #041824;
+  border: 1px solid rgba(66, 255, 231, 0.46);
+  opacity: 0.84;
 }
 </style>

src/views/qdtl/video/video copy.vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="app-container">
+    <headerdiv
+      ref="headerDiv"
+      :currentindexP="currentindexNew"
+      :menuNameP="itemName"
+    ></headerdiv>
+    <div style="display: inline-flex">
+      <div class="leftTree">
+        <el-input
+          placeholder="输入关键字进行过滤"
+          v-model="filterText"
+          style="margin-top: 1rem"
+        >
+        </el-input>
+        <div style="height: 83vh">
+          <el-scrollbar style="height: 110%">
+            <el-tree
+              :data="treedata"
+              :load="loadNode"
+              lazy
+              :expand-on-click-node="false"
+              node-key="id"
+              :default-expanded-keys="expandedKeys"
+              :default-checked-keys="[5]"
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              ref="tree"
+              @node-click="treeChange"
+              style="background-color: #04283c; color: #c5d0d4"
+            >
+            </el-tree>
+          </el-scrollbar>
+        </div>
+      </div>
+
+      <!-- <div
+        v-if="isvideo"
+        style="
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 100%;
+          height: 90%;
+          padding-left: 33rem;
+          margin-top: 5rem;
+          z-index: 1000;
+        "
+      >
+        <videodiv
+          :cameracode="ccode"
+          style="height: 100%; width: 100%"
+        ></videodiv>
+      </div>
+      <div
+        v-if="!isvideo"
+        style="
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 100%;
+          height: 90%;
+          padding-left: 33rem;
+          margin-top: 5rem;
+          z-index: 1000;
+        "
+      > -->
+        <!-- <iframe :src="videoplaysrc" style="width:96%;height:100%"></iframe> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listVideo, queryCamera, editCamera } from "@/api/qdtl/video";
+import { getSinglePawns } from "@/api/qdtl/data";
+
+import { httpRequest } from "@/api/data/http";
+import videodiv from "@/components/Videoplayer/index.vue";
+import headerdiv from "@/components/HeaderDiv/index.vue";
+
+let player;
+export default {
+  data() {
+    return {
+      itemName: "视频监测",
+      videoMap: new Map(),
+      nameObj: {
+        channel: "",
+        name: "",
+      },
+      videoplaysrc:"",
+      treedata: [
+        {
+          id: 1,
+          label: "监控视频",
+          children: [],
+        },
+        {
+          id: 100,
+          label: "单兵",
+          children: [],
+        },
+      ],
+      dbdata: [],
+      videoData: [],
+      isvideo: true,
+      // videoMap:new Map(),
+      expandedKeys: [],
+      videoIndex: 1,
+      currentindexNew: 2,
+      remarkName: false,
+      data: [
+        {
+          id: 1,
+          label: "一级 1",
+          children: [
+            {
+              id: 4,
+              label: "二级 1-1",
+              children: [
+                {
+                  id: 9,
+                  label: "三级 1-1-1",
+                },
+                {
+                  id: 10,
+                  label: "三级 1-1-2",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "一级 2",
+          children: [
+            {
+              id: 5,
+              label: "二级 2-1",
+            },
+            {
+              id: 6,
+              label: "二级 2-2",
+            },
+          ],
+        },
+        {
+          id: 3,
+          label: "一级 3",
+          children: [
+            {
+              id: 7,
+              label: "二级 3-1",
+            },
+            {
+              id: 8,
+              label: "二级 3-2",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      filterText: "",
+      ccode: "",
+      jsonArry: [],
+      creamData: [],
+      pointIdArry: [],
+      regionIndexCode: "",
+      queryParams: {
+        url: "http://2.90.220.252:9017/artemis-web/debug",
+        params:
+          '{"httpMethod":"POST","path":"/api/resource/v1/regions","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}',
+      },
+      videoParams: {
+        url: "http://2.90.220.252:9017/artemis-web/debug",
+        //  params:'{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+this.regionIndexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+      },
+    };
+  },
+  components: {
+    videodiv,
+    headerdiv,
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+    videoData(val) {
+      this.treedata[0].children = val;
+    },
+    dbdata(val) {
+      this.treedata[1].children = val;
+    },
+  },
+  created() {
+    this.getvideo();
+  },
+
+  mounted() {
+    window.videosize = "3x3";
+    this.queryCamera();
+
+    getSinglePawns().then((res) => {
+      this.dbdata = res.data.map((res) => {
+        return { id: res.code, label: res.name, playaddr: res.playaddr };
+      });
+    });
+  },
+  beforeDestroy() {
+    window.videosize = "1x1";
+    closevideo();
+  },
+  methods: {
+    openName(node, data) {
+      if (this.nameObj.name.length > 0) {
+        this.nameObj.channel = data.id;
+        console.log(this.nameObj);
+        editCamera(this.nameObj).then((response) => {
+          console.log(response);
+        });
+      }
+    },
+    editCamera() {
+      editCamera().then((data) => {});
+    },
+    queryCamera() {
+      queryCamera().then((data) => {
+        this.videoMap = data.data;
+      });
+    },
+    loadNode(node, resolve) {
+      console.log(node)
+      // if (node.level > 4) return resolve([]);
+      if (node.level === 0) {
+        return resolve(this.treedata);
+      }
+      if (node.id === 1 && node.level === 1) {
+        return resolve(this.treedata[0].children);
+      }
+
+      if (node.id != 1 && node.level === 1) {
+        console.log(this.treedata[0]);
+        return resolve(this.treedata[1].children);
+      }
+      if (node.id === 1 && node.level === 1) {
+        var childrens = [];
+        for (var index in this.videoData) {
+          if (node.data.id == this.jsonArry[index].parentIndexCode) {
+            childrens.push(this.jsonArry[index]);
+          }
+        }
+        return resolve(childrens);
+      }
+      if (node.level < 4) {
+        var childrens = [];
+        for (var index in this.jsonArry) {
+          if (node.data.id == this.jsonArry[index].parentIndexCode) {
+            childrens.push(this.jsonArry[index]);
+          }
+        }
+        return resolve(childrens);
+      }
+
+      if (node.level >= 4) {
+        console.log(node.data.id);
+        this.videoParams.params =
+          '{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "' +
+          node.data.indexCode +
+          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
+         var childrens = [];
+            for (var index in this.jsonArry) {
+              if (node.data.id == this.jsonArry[index].parentIndexCode) {
+                console.log(this.jsonArry[index]);
+                //console.log(childerns);
+                childrens.push(this.jsonArry[index]);
+              }
+            }
+       httpRequest(this.videoParams).then((data) => {
+          console.log(data);
+          var json = JSON.parse(data.data);
+          // console.log(json);
+          for (var index in json.data.list) {
+            // console.log();\
+            var obj = json.data.list[index];
+            obj.id = obj.cameraIndexCode;
+            // remarkName
+            if (this.videoMap[obj.id]) {
+              obj.label = this.videoMap[obj.id];
+            } else {
+              obj.label = obj.name;
+            }
+            obj.data = obj;
+            obj.lnglat = obj.longitude + "," + obj.latitude;
+            childrens.push(obj);
+          }
+          resolve(childrens);
+        });
+      }
+
+      //return resolve([]);
+    },
+    getvideo() {
+      httpRequest(this.queryParams).then((response) => {
+        try {
+          //  console.log(response);
+          var json = JSON.parse(response.data);
+          console.log(response.data);
+          console.log(json);
+          for (var index in json.data.list) {
+            // obj = json.data.list[index]
+            // obj.id = obj.indexCode;
+            // obj.label = obj.name;
+            // obj.data = obj;
+            var obj = json.data.list[index];
+            obj.id = obj.indexCode;
+            obj.label = obj.name;
+            obj.data = obj;
+            this.jsonArry.push(obj);
+            if (obj.parentIndexCode == -1) {
+              this.videoData.push(obj);
+              this.expandedKeys.push(obj.id);
+            }
+            // this.expandedKeys.push(obj.id);
+            if (this.videoData.length > 0) {
+              if (obj.parentIndexCode == this.videoData[0].id) {
+                this.expandedKeys.push(obj.id);
+              }
+            }
+          }
+        } catch (error) {}
+      });
+    },
+    getList() {
+      listVideo().then((response) => {
+        console.log(response);
+        this.videoData = response.data;
+        console.log(this.videoData);
+        for (var index in this.videoData) {
+          var obj = this.videoData[index];
+          obj.label = obj.areaName;
+          obj.children = [];
+          for (var i in obj.monitors) {
+            var monitor = obj.monitors[i];
+            monitor.data = monitor;
+            monitor.label = monitor.name;
+            obj.children.push(monitor);
+          }
+        }
+        console.log(this.videoData);
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    treeChange(data, node) {
+      var arry = this.$refs.tree.getCheckedNodes();
+      console.log(data)
+      if (data.cameraIndexCode != null) {
+        console.log(data.cameraIndexCode);
+        this.isvideo = true;
+        window.startPreview(data.cameraIndexCode, -1);
+      } else {
+        if (data.playaddr != null) {
+          this.isvideo = false;
+          this.videoplaysrc = "/webLive.html?url=" + data.playaddr;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.leftTree {
+  /* float:left; */
+  width: 32rem;
+  background-color: #04283c;
+  padding: 10px;
+  padding-top: 0;
+  min-height: 95vh;
+  z-index: 1001;
+}
+.app-container {
+  padding: 0;
+}
+</style>

src/views/qdtl/video/video.vue

@@ -1,71 +1,74 @@
 <template>
   <div class="app-container">
-    <headerdiv
-      ref="headerDiv"
-      :currentindexP="currentindexNew"
-      :menuNameP="itemName"
-    ></headerdiv>
+    <headerdiv ref="headerDiv" :currentindexP="currentindexNew" :menuNameP="itemName"></headerdiv>
     <div style="display: inline-flex">
       <div class="leftTree">
-        <el-input
-          placeholder="输入关键字进行过滤"
-          v-model="filterText"
-          style="margin-top: 1rem"
-        >
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-top: 1rem">
         </el-input>
         <div style="height: 83vh">
           <el-scrollbar style="height: 110%">
-            <el-tree
-              :data="treedata"
-              :load="loadNode"
-              lazy
-              :expand-on-click-node="false"
-              node-key="id"
-              :default-expanded-keys="expandedKeys"
-              :default-checked-keys="[5]"
-              :props="defaultProps"
-              :filter-node-method="filterNode"
-              ref="tree"
-              @node-click="treeChange"
-              style="background-color: #04283c; color: #c5d0d4"
-            >
+            <el-tree :data="treedata" :load="loadNode" lazy :expand-on-click-node="false" node-key="id"
+              :default-expanded-keys="expandedKeys" :default-checked-keys="[5]" :props="defaultProps"
+              :filter-node-method="filterNode" ref="tree" @node-click="treeChange"
+              style="background-color: #04283c; color: #c5d0d4">
             </el-tree>
           </el-scrollbar>
         </div>
       </div>
-
-      <div
-        v-if="isvideo"
-        style="
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 100%;
-          height: 90%;
-          padding-left: 33rem;
-          margin-top: 5rem;
-          z-index: 1000;
-        "
-      >
-        <videodiv
-          :cameracode="ccode"
-          style="height: 100%; width: 100%"
-        ></videodiv>
-      </div>
-      <div
-        v-if="!isvideo"
-        style="
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 100%;
-          height: 90%;
-          padding-left: 33rem;
-          margin-top: 5rem;
-          z-index: 1000;
-        "
-      >
-        <iframe :src="videoplaysrc" style="width:96%;height:100%"></iframe>
+      <div style="width: 82vw;margin-left: 1vw;">
+        <div style="padding-top:1vh">
+          <el-form ref="form" :inline="true" :model="form" label-width="100px">
+            <!-- <el-form-item label="所属航段" prop="航段">
+                            <el-select v-model="form.hangdaoName" placeholder="请选择" @change="initVideoData()">
+                                <el-option v-for="item in hangdaoList" :key="item" :label="item" :value="item">
+                                </el-option>
+                            </el-select>
+                        </el-form-item> -->
+            <el-form-item label="宫格数量" prop="航段">
+              <el-select v-model="form.type" placeholder="请选择">
+                <el-option v-for="item in typeList" :key="item" :label="item" :value="item">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="width: 100%;" v-if="form.type == '单视频'">
+          <liveqing videoElementId="videoId1" style="width: 80vw;height: 80vh;"></liveqing>
+          <!-- </div> -->
+        </div>
+        <div style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;" v-if="form.type == '四宫格'">
+          <!-- <div v-for="item in 9"> -->
+          <!-- <video v-for="item in 4" style="width: 49%;margin-left:0.5%" :src="videoList[item - 1]" controls="controls"
+            :autoplay="false" muted="muted" :ref="`videoref${item}`"></video> -->
+          <!-- </div> -->
+          <div v-for="item in 4"
+            style="width: 40vw;height: 40vh;margin-left: 0.5vw;margin-top: 0.5vh;position: relative;">
+            <div
+              style="cursor: pointer;color: #ffffff;font-size: 1.5rem;top:10px;right: 10px; position: absolute;z-index: 999;"
+              @click="deleteVideo(item)">
+              <i class="el-icon-close"></i>
+            </div>
+            <LivePlayer v-if="displayList[item - 1]" :videoUrl="videoList[item - 1]" fluent autoplay live stretch
+              style="width:100%;height:100%;">
+            </LivePlayer>
+          </div>
+          <!-- <div style="width: 35vw;margin-left:1vw" class='video_content' v-for="(item, index) in 4">
+            <liveqing :videoElementId="videoId+index" style="width:40vw;height: 40vh;"></liveqing>
+          </div> -->
+        </div>
+        <div style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;" v-if="form.type == '九宫格'">
+          <div v-for="item in 9"
+            style="width: 26vw;height: 26vh;margin-left: 0.5vw;margin-top: 0.5vh;position: relative;">
+            <div
+              style="cursor: pointer;color: #ffffff;font-size: 1.5rem;top:10px;right: 10px; position: absolute;z-index: 999;"
+              @click="deleteVideo(item)">
+              <i class="el-icon-close"></i>
+            </div>
+            <LivePlayer v-if="displayList[item - 1]" :videoUrl="videoList[item - 1]" fluent autoplay live stretch
+              style="width:100%;height:100%;">
+            </LivePlayer>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -79,21 +82,32 @@ import { httpRequest } from "@/api/data/http";
 import videodiv from "@/components/Videoplayer/index.vue";
 import headerdiv from "@/components/HeaderDiv/index.vue";
 
+import LivePlayer from '@liveqing/liveplayer' // vue2
+
+import liveqing from "@/components/livePlayer.vue";
+
 let player;
 export default {
   data() {
     return {
+      typeList: ['单视频', '四宫格', '九宫格'],
+      displayList: [true, true, true, true, true, true, true, true, true],
+      videoList: [
+
+      ],
+      form: { type: '四宫格' },
+      timer: null,
       itemName: "视频监测",
       videoMap: new Map(),
       nameObj: {
         channel: "",
         name: "",
       },
-      videoplaysrc:"",
+      videoplaysrc: "",
       treedata: [
         {
           id: 1,
-          label: "监控视屏",
+          label: "监控视频",
           children: [],
         },
         {
@@ -104,6 +118,7 @@ export default {
       ],
       dbdata: [],
       videoData: [],
+      videoCodeList: [],
       isvideo: true,
       // videoMap:new Map(),
       expandedKeys: [],
@@ -179,11 +194,16 @@ export default {
         url: "http://2.90.220.252:9017/artemis-web/debug",
         //  params:'{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+this.regionIndexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
       },
+      hlsParams: {
+        url: "http://2.90.220.252:9017/artemis-web/debug",
+      }
     };
   },
   components: {
     videodiv,
     headerdiv,
+    liveqing,
+    LivePlayer
   },
   watch: {
     filterText(val) {
@@ -198,10 +218,13 @@ export default {
   },
   created() {
     this.getvideo();
+    var that = this
+    this.timer = setInterval(() => {
+      that.initVideoList();
+    }, 60000);
   },
 
   mounted() {
-    window.videosize = "3x3";
     this.queryCamera();
 
     getSinglePawns().then((res) => {
@@ -211,21 +234,25 @@ export default {
     });
   },
   beforeDestroy() {
-    window.videosize = "1x1";
-    closevideo();
+    window.clearInterval(this.timer)
+    // window.videosize = "1x1";
+    // closevideo();
   },
   methods: {
+    selectVideo(item) {
+    },
+    addVideo() {
+      this.videoList.push('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
+    },
     openName(node, data) {
       if (this.nameObj.name.length > 0) {
         this.nameObj.channel = data.id;
-        console.log(this.nameObj);
         editCamera(this.nameObj).then((response) => {
-          console.log(response);
         });
       }
     },
     editCamera() {
-      editCamera().then((data) => {});
+      editCamera().then((data) => { });
     },
     queryCamera() {
       queryCamera().then((data) => {
@@ -233,7 +260,6 @@ export default {
       });
     },
     loadNode(node, resolve) {
-      console.log(node)
       // if (node.level > 4) return resolve([]);
       if (node.level === 0) {
         return resolve(this.treedata);
@@ -243,7 +269,6 @@ export default {
       }
 
       if (node.id != 1 && node.level === 1) {
-        console.log(this.treedata[0]);
         return resolve(this.treedata[1].children);
       }
       if (node.id === 1 && node.level === 1) {
@@ -266,21 +291,18 @@ export default {
       }
 
       if (node.level >= 4) {
-        console.log(node.data.id);
         this.videoParams.params =
           '{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "' +
           node.data.indexCode +
           '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
-         var childrens = [];
-            for (var index in this.jsonArry) {
-              if (node.data.id == this.jsonArry[index].parentIndexCode) {
-                console.log(this.jsonArry[index]);
-                //console.log(childerns);
-                childrens.push(this.jsonArry[index]);
-              }
-            }
-       httpRequest(this.videoParams).then((data) => {
-          console.log(data);
+        var childrens = [];
+        for (var index in this.jsonArry) {
+          if (node.data.id == this.jsonArry[index].parentIndexCode) {
+            //console.log(childerns);
+            childrens.push(this.jsonArry[index]);
+          }
+        }
+        httpRequest(this.videoParams).then((data) => {
           var json = JSON.parse(data.data);
           // console.log(json);
           for (var index in json.data.list) {
@@ -308,8 +330,6 @@ export default {
         try {
           //  console.log(response);
           var json = JSON.parse(response.data);
-          console.log(response.data);
-          console.log(json);
           for (var index in json.data.list) {
             // obj = json.data.list[index]
             // obj.id = obj.indexCode;
@@ -331,14 +351,12 @@ export default {
               }
             }
           }
-        } catch (error) {}
+        } catch (error) { }
       });
     },
     getList() {
       listVideo().then((response) => {
-        console.log(response);
         this.videoData = response.data;
-        console.log(this.videoData);
         for (var index in this.videoData) {
           var obj = this.videoData[index];
           obj.label = obj.areaName;
@@ -350,26 +368,82 @@ export default {
             obj.children.push(monitor);
           }
         }
-        console.log(this.videoData);
       });
     },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    deleteVideo(item) {
+      this.videoCodeList.splice(item - 1,1);
+      this.videoList.splice(item - 1, 1);
+    },
+    initVideoList() {
+      this.videoList = [];
+      for (var index in this.videoCodeList) {
+        console.log(this.videoCodeList)
+        this.hlsParams.params =
+          '{"httpMethod":"POST","path":"/api/video/v1/cameras/previewURLs","headers":{},"query":{},"parameter":{},"body":{"streamType":0,"protocol":"hls","transmode":0,"expand":"transcode=0","cameraIndexCode": "' +
+          this.videoCodeList[index] +
+          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
+        httpRequest(this.hlsParams).then((data) => {
+          var videoData = JSON.parse(data.data);
+          var url = videoData.data.url
+          url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
+          console.log(url)
+          // console.log(window.location.host+window.location.port)
+          this.videoList.push(url);
+        })
+      }
+    },
     treeChange(data, node) {
       var arry = this.$refs.tree.getCheckedNodes();
-      console.log(data)
       if (data.cameraIndexCode != null) {
-        console.log(data.cameraIndexCode);
-        this.isvideo = true;
-        window.startPreview(data.cameraIndexCode, -1);
-      } else {
-        if (data.playaddr != null) {
-          this.isvideo = false;
-          this.videoplaysrc = "/webLive.html?url=" + data.playaddr;
-        }
+        this.hlsParams.params =
+          '{"httpMethod":"POST","path":"/api/video/v1/cameras/previewURLs","headers":{},"query":{},"parameter":{},"body":{"streamType":0,"protocol":"hls","transmode":0,"expand":"transcode=0","cameraIndexCode": "' +
+          data.cameraIndexCode +
+          '"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}';
+        httpRequest(this.hlsParams).then((res) => {
+          var videoData = JSON.parse(res.data);
+          var dataList = [];
+          if (this.form.type == '四宫格') {
+            if (this.videoList.length < 4) {
+              var url = 'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'
+              // var url = videoData.data.url
+              // this.videoCodeList.push(data.cameraIndexCode);
+              // console.log(this.videoCodeList)
+              // url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
+              // // console.log(window.location.host+window.location.port)
+              // console.log(url)
+              this.videoList.push(url);
+            } else {
+              this.$message('摄像机已满');
+            }
+          } else if (this.form.type == '九宫格') {
+            if (this.videoList.length < 9) {
+              // var url = 'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'
+              var url = videoData.data.url
+              this.videoCodeList.push(data.cameraIndexCode);
+              url = url.replace('http://2.90.220.252:83', 'https://qd.liaochengde.com:9001');
+              // console.log(window.location.host+window.location.port)
+              this.videoList.push(url);
+            } else {
+              this.$message('摄像机已满');
+            }
+          }
+        })
       }
+
+      // if (data.cameraIndexCode != null) {
+      //   console.log(data.cameraIndexCode);
+      //   this.isvideo = true;
+      //   window.startPreview(data.cameraIndexCode, -1);
+      // } else {
+      //   if (data.playaddr != null) {
+      //     this.isvideo = false;
+      //     this.videoplaysrc = "/webLive.html?url=" + data.playaddr;
+      //   }
+      // }
     },
   },
 };
@@ -378,14 +452,22 @@ export default {
 <style>
 .leftTree {
   /* float:left; */
-  width: 32rem;
+  width: 16vw;
   background-color: #04283c;
   padding: 10px;
   padding-top: 0;
   min-height: 95vh;
   z-index: 1001;
 }
+
 .app-container {
+  width: 100vw;
+  height: 100vh;
   padding: 0;
 }
+
+.selectVideo {
+  border-style: solid;
+  border-color: #98bf21;
+}
 </style>