qdtlui/src/views/keepWatch/index.vue

<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="areaData"
                            lazy
                            show-checkbox
                            :expand-on-click-node="false"
                            node-key="id"
                            :default-expanded-keys="expandedKeys"
                            :props="defaultProps"
                            :filter-node-method="filterNode"
                            :default-expand-all= 'isExpand'
                            ref="tree"
                            @check-change = 'treeChange'
                            style="background-color:#04283C;color:#C5D0D4"
                            >
                        </el-tree>
               </el-scrollbar>
            </div>
      </div>

     <div style="z-index:1000;width:150rem">
                 <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:0.5rem">巡检记录</div>
                 </div>
                 <div style="margin-top:1rem">
                        <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="10rem">
                        <el-form-item label="时间" prop="areaCode">
                            <el-date-picker
                                    v-model="queryForm.dateArry"
                                    @change='buttonChange'
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    style="width:40rem">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="巡检器" prop="deviceCode">
                             <el-select v-model="queryForm.deviceCode" placeholder="请选择设备" clearable size="small"  style="width:15rem">
                                <el-option
                                    v-for="dict in deviceList"
                                    :key="dict.deviceCode"
                                    :label="dict.deviceName"
                                    :value="dict.deviceCode"
                                />
                                </el-select>
                        </el-form-item>
                        <el-form-item label="巡检点" prop="checkpointCard">
                            <el-select v-model="queryForm.checkpointCard" placeholder="请选择巡检点" clearable size="small"  style="width:15rem">
                            <el-option
                                v-for="dict in locationList"
                                :key="dict.locationCode"
                                :label="dict.locationName"
                                :value="dict.locationCode"
                            />
                            </el-select>
                        </el-form-item>
                         <el-form-item label="巡检员" prop="patrolmanCard">
                            <el-select v-model="queryForm.patrolmanCard" placeholder="请选择巡检员" clearable size="small"  style="width:15rem" @change='buttonChange'>
                            <el-option
                                v-for="dict in patorlmanList"
                                :key="dict.card"
                                :label="dict.name"
                                :value="dict.card"
                            />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                            <el-button type="primary" icon="el-icon-search" size="mini" :disabled="buttonDisabled" @click="getTrail">轨迹</el-button>
                            <el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button>
                            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="exportQuery">导出</el-button>
                        </el-form-item>
                        </el-form>
                 </div>

                        <!-- <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button
                            style="width:8rem;height:3.2rem;"
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            @click="handleAdd"
                            v-hasPermi="['qdtl:area:add']"
                            >新增</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button
                            style="width:8rem;height:3.2rem;"
                            type="primary"
                            plain
                            icon="el-icon-edit"
                            :disabled="single"
                            @click="handleUpdate"
                            v-hasPermi="['qdtl:area:edit']"
                            >修改</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button
                            style="width:8rem;height:3.2rem;"
                            type="primary"
                            plain
                            icon="el-icon-delete"
                            :disabled="multiple"
                            @click="handleDelete"
                            v-hasPermi="['qdtl:area:remove']"
                            >删除</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                        </el-row> -->

                        <el-table  :data="logList"  stripe
                                    class="my_table"
                                    :row-class-name="tableRowClassName"
                                    :max-height="tableHeight"
                                    :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                        <!-- <el-table-column type="selection" width="55" align="center" /> -->
                                    <el-table-column type="index" width="55" align="center" label='序号'/>
                                    <el-table-column label="巡检员" align="center" prop="patrolmanName" />
                                    <el-table-column label="巡检点" align="center" prop="checkpointName" />
                                    <el-table-column label="巡检点卡号" align="center" prop="checkpointCard" />
                                    <el-table-column label="巡检器名称" align="center" prop="deviceName" />
                                    <el-table-column label="巡检设备号" align="center" prop="deviceCode" />
                                    <el-table-column label="所属区域" align="center" prop="areaName" />
                                    <el-table-column label="巡检卡号" align="center" prop="patrolmanCard" />
                                    <el-table-column label="时间" align="center" prop="createTime" />
                        </el-table>

                        <pagination
                        style="position:fixed;top:90rem;right:5rem;"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryForm.pageNum"
                        :limit.sync="queryForm.pageSize"
                        :layout="layout"
                        @pagination="getList"
                        />
      </div>
     </div>

     <el-dialog title="查看轨迹" :visible.sync="open" width="100rem" append-to-body @open="openMap" v-if="open">
      <div style="height:65rem">
      <div style="height:60rem;width:95rem;">
           <mapdiv ref='mapv' :pointObj='pointArry'></mapdiv>
      </div>
      <!-- <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="deleteLocation">清 除</el-button>
      </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVideo,queryCamera,editCamera } from "@/api/qdtl/video";
import { getDicts } from "@/api/system/dict/data";
import { listLocation } from "@/api/qdtl/location";
import { listDevice } from "@/api/qdtl/device";
import { getPatrolman,getLog,getTrail } from "@/api/qdtl/data";
import { httpRequest } from "@/api/data/http";
import videodiv from "@/components/Videoplayer/index.vue"
import headerdiv from '@/components/HeaderDiv/index.vue'
import mapdiv from "@/components/map/index.vue"

export default {
    dicts: ['tl_area_type','tl_device_type','tl_xun_area'],
    data() {
      return {
        itemName:'巡检监测',
        isExpand:true,
        videoMap:new Map(),
        nameObj:{
              channel:'',
              name:''
        },
        areaData:[],
        // videoMap:new Map(),
        expandedKeys:[],
        videoIndex:1,
        currentindexNew:2,
        remarkName:false,
        logList:[],
        open:false,
        locationList:[],
        buttonDisabled:true,
        deviceList:[],
        patorlmanList:[],
        data: [{
        }],
        defaultProps: {
          children: 'children',
          label: 'label',
          id:'value'
        },
        filterText:'',
        layout:"total, prev, pager, next,jumper",
        tableHeight:600,
        ccode:'',
        jsonArry:[],
        total: 0,
        trailData:[],
        queryForm: {
                pageNum: 1,
                pageSize: 10,
                areaCode: null,
                areaName: null,
                areaType: null,
                areaId:null,
        },
        creamData:[],
        pointIdArry:[],
        pointArry:[],
        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,
      mapdiv
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
        // this.getvideo()
        this.getTableHeight();
    },
    
    mounted(){
      this.getTree();
      this.listLocation();
      this.listDevice();
      this.getPatrolman();
      this.getList();
    },
    beforeDestroy(){
    },
    methods:{
        exportQuery(){
                this.download('/qdtl/log/export', {
                  ...this.queryForm
                }, `巡检监测_${new Date().getTime()}.xlsx`)
        },
        getTableHeight(){
                 var h = document.body.clientHeight;
                 this.tableHeight = h*0.6
                //  console.log(1111111111);
                 console.log(this.tableHeight);
        },
        getTrail(){
             var trail = {};
             trail.areaId = this.queryForm.areaId
             trail.patrolmanCard = this.queryForm.patrolmanCard
             trail.deviceCode = this.queryForm.deviceCode
             trail.checkpointCard = this.queryForm.checkpointCard
             trail.endTime = this.queryForm.endTime
             trail.beginTime = this.queryForm.beginTime
             getTrail(trail).then(response=>{
                   console.log(response);
                   this.trailData = response.data
                   this.pointArry.data = this.trailData;
                   this.pointArry.type = 8
                   this.open = true
             })
        },
        getList(){
            console.log(this.queryForm);
            getLog(this.queryForm).then(response =>{
                 console.log(response);
                 this.logList = response.rows
                 this.total = response.total
            })
        },
         openMap(){
             console.log(11111111)
            this.pointArry.data = this.trailData;
            this.pointArry.type = 8
            console.log(this.pointArry);
            },
        getTree(){
              var treeDate = {
                    label:'所有',
                    value:1
              }
              treeDate.children = this.dict.type.tl_xun_area
              this.areaData.push(treeDate);
        },
        listLocation(){
              listLocation().then(response =>{
                    this.locationList = response.rows
              })
        },
        listDevice(){
              listDevice().then(response =>{
                   this.deviceList = response.rows
              })
        },
        getPatrolman(){
              getPatrolman().then(response =>{
                   this.patorlmanList = response.rows
              })
        },
        tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
        },  
        filterNode(value, data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
        },
        treeChange(data, node){
            let tree = this.$refs.tree;
            let array = tree.getCheckedNodes().concat(tree.getHalfCheckedNodes())
            var areaArray = []
            for(var index in array){
                    if(array[index].value != 1){
                        areaArray.push(array[index].value);       
                    }        
            }
            this.queryForm.areaId = areaArray.join(',')
            this.getList();
            // console.log(this.queryForm.areaId)
        },
        buttonChange(){
            console.log(this.queryForm.dateArry != null);
            console.log(this.queryForm.patrolmanCard != null);
            console.log(this.queryForm.patrolmanCard != '');
            if(this.queryForm.dateArry != null){
                var start = this.queryForm.dateArry[0];
                var end = this.queryForm.dateArry[1];
                this.queryForm.beginTime = start;
                this.queryForm.endTime = end;
                var startDay = new Date(start).setHours(0,0,0,0);;
                var endDay = new Date(end).setHours(0,0,0,0);;
                if(startDay == endDay && this.queryForm.patrolmanCard != null && this.queryForm.patrolmanCard != ''){
                        this.buttonDisabled = false
                }else{
                        this.buttonDisabled = true
                }
            }
            console.log(this.buttonDisabled)
        }
    }
};
</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
     }

      .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:2rem;
          display: inline-flex
          /* float: left; */
       }

    .el-range-editor--medium .el-range-separator{
        color:white
    }
</style>