修改朔黄前端分析

zhangzengfei

2021-06-17 bae0368f502f524fc739003fe751fb0eb06c5859

修改朔黄前端分析

 src/api/shuohuang.ts

@@ -36,7 +36,7 @@
    method: 'get',
    params: query
  })
  export const getCarVideos = (query: any) =>
export const getCarVideos = (query: any) =>
  request({
    url: '/data/api-c/lkg/getCarVideos',
    method: 'get',
@@ -125,39 +125,46 @@
    method: 'post',
    data
  })
export const uploadDirectory = (data:any) =>
export const uploadDirectory = (data: any) =>
  request({
    url:'/data/api-c/user/uploadMulti',
    method:'post',
    url: '/data/api-c/user/uploadMulti',
    method: 'post',
    data
  })

export const getTransferRecord = (query:any) => request({
  url:'/data/api-c/saverecord/getlst',
export const getTransferRecord = (query: any) => request({
  url: '/data/api-c/saverecord/getlst',
  method: 'get',
  params: query
})

export const getTransferStatusList = () => request({
  url:'/data/api-c/saverecord/getStatusList',
  url: '/data/api-c/saverecord/getStatusList',
  method: 'get'
})
export const addDevice = (data:any)=>request({
  url:'/data/api-c/device/add',
export const addDevice = (data: any) => request({
  url: '/data/api-c/device/add',
  method: 'post',
  data
})
export const getDeviceList = ()=>request({
  url:'/data/api-c/device/getlst',
export const getDeviceList = () => request({
  url: '/data/api-c/device/getlst',
  method: 'get'
})
export const getDeviceInfoById = (query:any) => request({
  url:'/data/api-c/slot/getlst',
export const getDeviceInfoById = (query: any) => request({
  url: '/data/api-c/slot/getlst',
  method: 'get',
  params: query
})
export const getEventVideo = (query:any) => request({
  url:'/data/api-c/lkg/getEventClip',
export const getEventVideo = (query: any) => request({
  url: '/data/api-c/lkg/getEventClip',
  method: 'get',
  params: query
})
})

export const uploadLKG = (data: any) =>
  request({
    url: '/data/api-c/lkg/uploadLKGExcel',
    method: 'post',
    data
  })

 src/pages/cameraAccess/components/DataStackInfo.vue

@@ -457,8 +457,10 @@
      if (row.type === 1) {

        this.videoUrl = "/files/" + row.identifier + ".mp4"
        if (row.identifier == "") {
          this.videoUrl = row.path;
        }
      } else if (row.type === 2) {

        this.imgUrl = "/files/" + row.path.substr(row.path.lastIndexOf('/') + 1)
      }
    },

 src/pages/shuohuangMonitorAnalyze/components/charts/line.vue

@@ -9,11 +9,11 @@
      type: Object
    }
  },
  mounted () {
  mounted() {
    this.initLineChart();
  },
  methods: {
    initLineChart () {
    initLineChart() {
      this.$nextTick(() => {
        let dom = this.$echarts.init(this.$refs['lineChart']);
        dom && dom.setOption(this.options);

 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue

@@ -40,6 +40,7 @@
        </template>
        <el-menu-item index="transferMemo">视频转储记录</el-menu-item>
        <el-menu-item index="transferDeviceManage">转储设备管理</el-menu-item>
        <el-menu-item index="lkgManage">LKG数据管理</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
@@ -66,33 +67,33 @@
      type: Function
    }
  },
  data () {
  data() {
    return {
      publicPath: process.env.BASE_URL,
      activeIndex: 'guideIndex'
    }
  },
  mounted(){
  mounted() {
    console.log('mounted')
    window.onbeforeunload = () => {
      // debugger
      console.log('beforeunload')
      sessionStorage.setItem('leftNavAct', this.activeIndex);
    }
    if(!!sessionStorage.getItem('leftNavAct')){
    if (!!sessionStorage.getItem('leftNavAct')) {
      this.activeIndex = sessionStorage.getItem('leftNavAct');
      this.$emit('menuChange',this.activeIndex);
      this.$emit('menuChange', this.activeIndex);
    }
  },
  methods: {
    handleSelect(index,indePath){
    handleSelect(index, indePath) {
      this.activeIndex = index;
      this.$emit('menuChange',index);
      this.$emit('menuChange', index);
    },
    handleOpen () {
    handleOpen() {

    },
    handleClose () {
    handleClose() {

    }
  }
@@ -111,20 +112,19 @@
    border-bottom: 1px solid #eee;
    color: rgb(0, 150, 250);
  }
  .iconfont{
  .iconfont {
    padding-right: 10px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse){
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
  }
  .el-menu-item,
  .el-submenu__title {
    text-align: left;
  }
  .el-menu-item.is-active{
    color:#409EFF;
  .el-menu-item.is-active {
    color: #409eff;
    background-color: #ecf0fc;
  }
  
}
</style>

 src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue

New file
@@ -0,0 +1,65 @@
<template>
  <div class="lkg-manage">
    <div class="import-btn">
      <label>上传LKG数据文件</label>
      <el-button
        size="mini"
        type="primary"
        @click="uploadDirectoryTrigger"
        :loading="uploading"
      >点击上传</el-button>
      <input
        ref="directoryInput"
        @change="importDirectory"
        hidden
        type="file"
        accept=".xlsx, .xls"
        multiple
      />
    </div>
  </div>
</template>

<script>
import { uploadLKG } from "@/api/shuohuang"

export default {
  data() {
    return {
      uploading: false
    }
  },
  methods: {
    uploadDirectoryTrigger() {
      this.$refs['directoryInput'].click();
    },
    importDirectory() {
      let _this = this;
      _this.uploading = true;
      let formData = new FormData;
      for (let i = 0; i < this.$refs['directoryInput'].files.length; i++) {
        formData.append('files', this.$refs['directoryInput'].files[i])
      }

      uploadLKG(formData).then(res => {
        if (res && res.success) {
          this.$message.success("上传成功")
        }
        _this.uploading = false;
      }).catch(err => {
        this.$message.warning("上传失败", err)
        _this.uploading = false;
      })
    },
  }
}
</script>

<style lang="scss">
.lkg-manage {
  .import-btn {
    text-align: left;
    margin: 10px 20px;
  }
}
</style>

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -26,15 +26,9 @@
          v-show="!checkedConfigs.length"
          class="tip"
          style="padding-left: 5px; margin-top: 3px"
          >还未选择筛选条件</span
        >
        <div
          class="config-item"
          v-for="(config, index) in checkedConfigs"
          :key="index"
        >
          <span class="title">{{ config.title }}</span
          >&nbsp;:
        >还未选择筛选条件</span>
        <div class="config-item" v-for="(config, index) in checkedConfigs" :key="index">
          <span class="title">{{ config.title }}</span>&nbsp;:
          <span class="val" v-for="option in config.data" :key="option.id">
            <!-- <template>
              <div>
@@ -46,25 +40,17 @@
              <i>、</i>
            </span>
          </span>
          <i
            class="el-icon-close remove"
            @click="removeCheckedConfig(config)"
          ></i>
          <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
        </div>
        <el-button
          class="clear-config-btn"
          v-if="checkedConfigs.length"
          size="mini"
          @click="clearCheckedConfigs"
          >取消选择</el-button
        >
        >取消选择</el-button>
      </div>
      <div class="optional-config">
        <div
          class="config"
          v-for="(config, index) in optionalConfigs"
          :key="index"
        >
        <div class="config" v-for="(config, index) in optionalConfigs" :key="index">
          <template v-if="config.isShow">
            <div class="title">{{ config.title }}</div>
            <div class="options-wrap">
@@ -73,41 +59,23 @@
                :ref="'options' + config.id"
                :style="{ height: fixedOneLineHeight + 'px' }"
              >
                <div
                  class="option"
                  v-for="(option, index) in config.data"
                  :key="index"
                >
                <div class="option" v-for="(option, index) in config.data" :key="index">
                  <div v-show="config.isMultCheck">
                    <el-checkbox v-model="option.isChecked"></el-checkbox>
                    <span>{{ option.name }}</span>
                  </div>
                  <div
                    v-show="!config.isMultCheck"
                    @click="checkOption(config, option)"
                  >
                  <div v-show="!config.isMultCheck" @click="checkOption(config, option)">
                    <span>{{ option.name }}</span>
                  </div>
                </div>
              </div>
              <div class="btns text-center" v-show="config.isMultCheck">
                <el-button size="mini" @click="cancleMultCheck(config)"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="checkOption(config)"
                  >确定</el-button
                >
                <el-button size="mini" @click="cancleMultCheck(config)">取消</el-button>
                <el-button size="mini" type="primary" @click="checkOption(config)">确定</el-button>
              </div>
            </div>
            <div class="right-btns">
              <div
                class="more"
                v-if="config.showMore"
                @click="showMore(config)"
              >
              <div class="more" v-if="config.showMore" @click="showMore(config)">
                <span>更多</span>&nbsp;
                <i
                  :class="
@@ -130,11 +98,7 @@
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div>
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-submenu
                class="config-submenu"
                :popper-append-to-body="false"
@@ -149,8 +113,7 @@
                  :index="index + '-' + ind"
                  @click="checkOption(config, option)"
                  class="highlevel-option"
                  >{{ option.name }}</el-menu-item
                >
                >{{ option.name }}</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
@@ -161,22 +124,14 @@
      <div class="header-bar clearfix">
        <div class="left">
          <div>
            <el-select
              v-model="IsFollow"
              size="mini"
              @change="filterSearchData"
            >
            <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
              <el-option value label="全部"></el-option>
              <el-option :value="false" label="未关注"></el-option>
              <el-option :value="true" label="已关注"></el-option>
            </el-select>
          </div>
          <div>
            <el-select
              v-model="IsOperate"
              size="mini"
              @change="filterSearchData"
            >
            <el-select v-model="IsOperate" size="mini" @change="filterSearchData">
              <el-option value label="全部"></el-option>
              <el-option value="0" label="未处理"></el-option>
              <el-option value="1" label="已处理"></el-option>
@@ -192,11 +147,7 @@
            >
              <i class="el-icon-menu"></i>
            </div>
            <div
              class="type"
              :class="{ current: showType == 'list' }"
              @click="checkType('list')"
            >
            <div class="type" :class="{ current: showType == 'list' }" @click="checkType('list')">
              <i class="el-icon-s-operation"></i>
            </div>
          </div>
@@ -204,14 +155,7 @@
      </div>
      <div class="content" v-show="showType == 'menu'">
        <el-row :gutter="20">
          <el-col
            :xs="8"
            :sm="6"
            :md="6"
            :lg="6"
            v-for="data in tabData"
            :key="data.id"
          >
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
            <div class="card">
              <div class="video-wrap" @click="checkVideoDetail(data)">
                <img :src="data.VideoCover" alt />
@@ -236,27 +180,22 @@
                  </div>
                </div>
                <div class="mark-info">
                  <div
                    class="abnormal"
                    v-if="data.LableLst && data.LableLst.length"
                  >
                  <div class="abnormal" v-if="data.LableLst && data.LableLst.length">
                    <span
                      class="abnormal-label"
                      v-for="(label, index) in data.LableLst"
                      :key="index"
                      >{{
                        label.Desc +
                        (index == data.LableLst.length - 1 ? "" : "，")
                      }}</span
                    >
                      {{
                      label.Desc +
                      (index == data.LableLst.length - 1 ? "" : "，")
                      }}
                    </span>
                  </div>
                  <div v-else>
                    <span>无异常</span>
                  </div>
                  <div
                    class="event-tag"
                    v-if="data.EventLst && data.EventLst.length"
                  >
                  <div class="event-tag" v-if="data.EventLst && data.EventLst.length">
                    <el-tag
                      size="mini"
                      type="info"
@@ -264,25 +203,15 @@
                      :key="index"
                      style="margin-right: 5px; margin-bottom: 5px"
                      @click="checkEventVideo(label)"
                      >{{ label.Event }}</el-tag
                    >
                    >{{ label.Event }}</el-tag>
                  </div>
                </div>
                <div class="tag-info">
                  <div
                    class="tag"
                    v-for="(tag, index) in data.tags"
                    :key="index"
                  >
                    {{ tag }}
                  </div>
                  <div class="tag" v-for="(tag, index) in data.tags" :key="index">{{ tag }}</div>
                </div>
              </div>
              <div class="star" @click="toggleFollow(data)">
                <i
                  class="iconfont"
                  :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"
                ></i>
                <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i>
              </div>
            </div>
          </el-col>
@@ -300,33 +229,16 @@
        ></el-pagination>
      </div>
      <div class="content" v-show="showType == 'list'">
        <el-table
          :data="tableData"
          fit
          ref="elTable"
          @row-click="checkVideoDetail"
        >
        <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail">
          <el-table-column label="名称" prop="VideoName" sortable width="500">
            <template slot-scope="scope" style="cursor: pointer">
              <div>{{ scope.row.VideoName }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="大小"
            prop="VideoSize"
            sortable
          ></el-table-column>
          <el-table-column
            label="修改日期"
            prop="VideoUpdateDate"
            sortable
          ></el-table-column>
          <el-table-column
            label="创建日期"
            prop="VideoCreateDate"
            sortable
          ></el-table-column>
          <el-table-column label="大小" prop="VideoSize" sortable></el-table-column>
          <el-table-column label="修改日期" prop="VideoUpdateDate" sortable></el-table-column>
          <el-table-column label="创建日期" prop="VideoCreateDate" sortable></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
@@ -358,25 +270,27 @@

       v-drag v-resize

       -->
      -->
      <!-- <div > -->
          <!-- :modal="false" -->
        <el-dialog v-drag  v-resize
          class="dialog-video"
          :visible="videoDialogVisible"
          @close="closeDial"
          :close-on-click-modal="false"
          :destroy-on-close="true"
          :modal-append-to-body="false"
        >
          <div slot="title" class="title">
            <div class="center">
              <i class="el-icon-connection"></i>
              <span>播放视频</span>
            </div>
      <!-- :modal="false" -->
      <el-dialog
        v-drag
        v-resize
        class="dialog-video"
        :visible="videoDialogVisible"
        @close="closeDial"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :modal-append-to-body="false"
      >
        <div slot="title" class="title">
          <div class="center">
            <i class="el-icon-connection"></i>
            <span>播放视频</span>
          </div>
          <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
        </el-dialog>
        </div>
        <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
      </el-dialog>
      <!-- </div> -->

      <el-dialog
@@ -419,8 +333,8 @@
      keyword: "",
      IsFollow: "",
      searchTime: [
        new Date(2020, 0, 1, 0, 0, 0),
        new Date(2020, 11, 31, 23, 59, 59),
        new Date(2021, 0, 1, 0, 0, 0),
        new Date(2021, 11, 31, 23, 59, 59),
      ],
      curTabPage: 1,
      curTablePage: 1,
@@ -516,9 +430,9 @@
        }
      );
    },
    closeDial(){
    closeDial() {
      this.videoDialogVisible = false
      this.selectedVideo={}
      this.selectedVideo = {}
    },
    handleTabSizeChange(size) {
      this.tabPageSize = size;
@@ -696,7 +610,7 @@
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;
    },
    checkFollow() {},
    checkFollow() { },
    checkType(type) {
      this.showType = type;
      this.filterSearchData();
@@ -744,7 +658,7 @@
        opt.isChecked = false;
      });
    },
    handleSelect(key, keyPath) {},
    handleSelect(key, keyPath) { },
    showMore(config) {
      config.isShowMore = !config.isShowMore;
      this.$refs[`options${config.id}`][0].style.height = config.isShowMore
@@ -799,43 +713,43 @@
      };
    },
    resize(el, binding, vnode) {
        const dragDom = el.querySelector('.el-dialog') 
        dragDom.style.overflow = 'hidden'
        let minWidth = 400
        let minHeight = 300 //
        
        // 拉伸
        let resizeEl = document.createElement('div')
        dragDom.appendChild(resizeEl) // 在弹窗右下角加上一个10-10px的控制块
        resizeEl.style.cursor = 'nwse-resize'
        // resizeEl.style.cursor = 'se-resize'
        resizeEl.style.position = 'absolute'
        resizeEl.style.height = '12px'
        resizeEl.style.width = '12px'
        resizeEl.style.right = '0px'
        resizeEl.style.bottom = '0px' //鼠标拉伸弹窗
        resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //鼠标拉伸弹窗
      const dragDom = el.querySelector('.el-dialog')
      dragDom.style.overflow = 'hidden'
      let minWidth = 400
      let minHeight = 300 //

        resizeEl.onmousedown = (e) => {
            // 记录初始x位置
            const clientX = e.clientX // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - resizeEl.offsetLeft
            const disY = e.clientY - resizeEl.offsetTop
      // 拉伸
      let resizeEl = document.createElement('div')
      dragDom.appendChild(resizeEl) // 在弹窗右下角加上一个10-10px的控制块
      resizeEl.style.cursor = 'nwse-resize'
      // resizeEl.style.cursor = 'se-resize'
      resizeEl.style.position = 'absolute'
      resizeEl.style.height = '12px'
      resizeEl.style.width = '12px'
      resizeEl.style.right = '0px'
      resizeEl.style.bottom = '0px' //鼠标拉伸弹窗
      resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //鼠标拉伸弹窗

            document.onmousemove = function(e) {
                e.preventDefault() // 移动时禁用默认事件 // 通过事件委托，计算移动的距离
      resizeEl.onmousedown = (e) => {
        // 记录初始x位置
        const clientX = e.clientX // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - resizeEl.offsetLeft
        const disY = e.clientY - resizeEl.offsetTop

                const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
                const y = e.clientY - disY //比较是否小于最小宽高
                dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
                dragDom.style.height =
                    y > minHeight ? `${y}px` : minHeight + 'px'
            } //拉伸结束
            document.onmouseup = function(e) {
                document.onmousemove = null
                document.onmouseup = null
            }
        document.onmousemove = function (e) {
          e.preventDefault() // 移动时禁用默认事件 // 通过事件委托，计算移动的距离

          const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
          const y = e.clientY - disY //比较是否小于最小宽高
          dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
          dragDom.style.height =
            y > minHeight ? `${y}px` : minHeight + 'px'
        } //拉伸结束
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
  },
};
@@ -1164,8 +1078,8 @@
        background: #f5f5f5;
      }
    }
    .el-dialog__wrapper{
          top: -22px;
    .el-dialog__wrapper {
      top: -22px;
    }
    .dialog-video {
      // z-index: 2020 !important;
@@ -1176,9 +1090,8 @@
      .el-dialog__body {
        background: #eaeaea;
        padding: 0;
            // height: 100%;
    height: inherit;

        // height: 100%;
        height: inherit;
      }
      .el-dialog__header {
        padding: 3px;

 src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue

@@ -34,7 +34,10 @@
        :key="indicator.id"
      >
        <div class="title">
          <span class="dot" :class="{'kx':indicator.id=='kx','dx':indicator.id=='dx','ccgz':indicator.id=='ccgz'}"></span>
          <span
            class="dot"
            :class="{'kx':indicator.id=='kx','dx':indicator.id=='dx','ccgz':indicator.id=='ccgz'}"
          ></span>
          <span class="word">{{indicator.title}}</span>
        </div>
        <div class="indicator-val">{{indicator.slots.length}}</div>
@@ -52,7 +55,7 @@
          <label>设备状态:</label>
          <div>
            <el-select v-model="deviceState" size="small">
              <el-option></el-option>
              <el-option value="work" label="工作"></el-option>
            </el-select>
          </div>
        </div>
@@ -111,7 +114,7 @@
<script>
import { addDevice, getDeviceList, getDeviceInfoById } from '@/api/shuohuang';
export default {
  data () {
  data() {
    return {
      actTab: 'dev1',
      devices: [],
@@ -124,11 +127,11 @@
      IP: '',
    }
  },
  mounted () {
  mounted() {
    this.findDeviceList();
  },
  methods: {
    findDeviceList () {
    findDeviceList() {
      let _this = this;
      getDeviceList().then(res => {
        _this.devices = res.data;
@@ -136,7 +139,7 @@
        _this.findDeviceIfo()
      })
    },
    findDeviceIfo () {
    findDeviceIfo() {
      let _this = this;
      getDeviceInfoById({ DeviceID: this.actTab }).then(res => {
        // debugger
@@ -162,7 +165,7 @@
        //_this.generalIndicators
      })
    },
    toAddDevice () {
    toAddDevice() {
      let _this = this;
      let params = {
        Name: this.Name,
@@ -178,14 +181,14 @@
        }
      })
    },
    showAddDevice () {
    showAddDevice() {
      this.visibleOfialogAddDev = true;

    },
    checkTab (tab, event) {
    checkTab(tab, event) {
      this.findDeviceIfo();
    },
    checkSlot (row) {
    checkSlot(row) {

    }
  }
@@ -247,7 +250,7 @@
      flex: 1;
      position: relative;
      &:not(.lastOne):after {
        content: '';
        content: "";
        width: 1px;
        height: 57px;
        background: #e9e9e9;

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -9,15 +9,15 @@
          v-show="showLocChoise"
        >
          <span class="el-dropdown-link">
            {{ curCamera }}<i class="el-icon-arrow-down el-icon--right"></i>
            {{ curCamera }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in popDownArr"
              :key="index"
              :command="item"
              >{{ item.Camera }}</el-dropdown-item
            >
            >{{ item.Camera }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

@@ -118,13 +118,11 @@
          </template>
          <div class="player-control">
            <div class="progress-bar">
              <el-tooltip
                placement="top"
                v-for="(item, index) in eventMarks"
                :key="index"
              >
              <el-tooltip placement="top" v-for="(item, index) in eventMarks" :key="index">
                <div slot="content">
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                  {{ getTimeStr(item.offset) }}
                  <br />
                  {{ item.text }}
                </div>
                <div
                  class="self-dot"
@@ -134,13 +132,11 @@
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>
              <el-tooltip
                placement="top"
                v-for="(item, index) in labelMarks"
                :key="index"
              >
              <el-tooltip placement="top" v-for="(item, index) in labelMarks" :key="index">
                <div slot="content">
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                  {{ getTimeStr(item.offset) }}
                  <br />
                  {{ item.text }}
                </div>
                <div
                  class="label-dot"
@@ -161,7 +157,7 @@
                @mouseover.native="intoBar"
                @change="progressChange"
              ></el-slider>
            </div> 
            </div>
            <div class="control-zone">
              <span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
              <div class="play-btn">
@@ -205,23 +201,18 @@
                v-show="isUnusual == 1"
                type="primary"
                @click="addLabel(curVideo)"
                >添加标注</el-button
              >
              >添加标注</el-button>
            </div>
            <div class="flex-box fixed-height-box">
              <label v-if="!showTable">标注信息:</label>
              <div class="mark-list" v-if="!showTable">
                <div
                  class="mark"
                  v-for="mark in curVideo.LableLst"
                  :key="mark.ID"
                >
                <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
                  <div class="time">
                    <span
                      >{{ pad0(Math.floor(mark.Time / 60)) }}:{{
                        pad0(mark.Time % 60)
                      }}</span
                    >
                    <span>
                      {{ pad0(Math.floor(mark.Time / 60)) }}:{{
                      pad0(mark.Time % 60)
                      }}
                    </span>
                    <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                    <i class="el-icon-delete" @click="removeCurLabel(mark)"></i>
                  </div>
@@ -230,12 +221,12 @@
                  </div>
                </div>
              </div>
            </div></el-tab-pane
          >
            </div>
          </el-tab-pane>
          <!-- <div class="flex-box fixed-height-box2"></div> -->
          <dataset-chart style="width: 100%" v-if="showTable"></dataset-chart>

          <el-tab-pane label="公里标" name="second"> </el-tab-pane>
          <el-tab-pane label="公里标" name="second"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="bot-right block">
@@ -274,23 +265,16 @@
          <el-radio :label="1">标注在全部位置的视频段</el-radio>
          <el-radio :label="0">仅标注选中的视频段</el-radio>
        </el-radio-group>
      </div> -->
      </div>-->
      <div class="label-check">
        <p class="label">隐患问题:</p>
        <el-checkbox-group v-model="labelCheckedList">
          <el-checkbox
            v-for="item in labelOptions"
            :key="item.ID"
            :label="item.ID"
            >{{ item.Name }}</el-checkbox
          >
          <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{ item.Name }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="btns">
        <el-button @click="cancelLabelChecked" size="small">取消</el-button>
        <el-button @click="submitLabelChecked" size="small" type="primary"
          >确定</el-button
        >
        <el-button @click="submitLabelChecked" size="small" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
@@ -540,18 +524,18 @@
        Driver1: cmd.Driver1,
      }).then((res) => {
        _this.allCurVideos = res.data;
      _this.curCamera = cmd.Camera;
      _this.curRoomVideos = _this.allCurVideos.filter((item) => {
        return item.Camera == cmd.Camera;
        _this.curCamera = cmd.Camera;
        _this.curRoomVideos = _this.allCurVideos.filter((item) => {
          return item.Camera == cmd.Camera;
        });
        _this.curVideo = _this.curRoomVideos.find((item) => {
          return item.ID == cmd.ID;
        });
        _this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
        });
      });
      _this.curVideo = _this.curRoomVideos.find((item) => {
        return item.ID == cmd.ID;
      });
      _this.$nextTick(() => {
        _this.$refs[`player_${_this.curVideo.ID}`][0].init();
      });
      });
      

    },
    pad0(val) {
      return val < 10 ? "0" + val : val;
@@ -583,7 +567,8 @@
        if (_this.guid == 1) {
          _this.maxVideoTime = _this.curVideo.VideoTime;
        }
        _this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);

        _this.videoArrs = res.data.filter((item) => v.GroupID == item.GroupID);
        _this.allCurVideos = res.data;
        _this.curRoomVideos = _this.allCurVideos.filter((item) => {
          return item.Camera == "司机室";
@@ -600,7 +585,7 @@
    },
    getRelatedVideos(video) {
      let _this = this;
      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
      getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => {
        let arr = [];
        let map = {};
        res.data.forEach((item) => {
@@ -618,7 +603,7 @@
      });
    },
    refreshCurVideoLabel(video) {
      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
      getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => {
        res.data.forEach((d) => {
          if (d.ID === video.ID) {
            video.LableLst = d.LableLst;
@@ -630,7 +615,7 @@
      this.refreshCurVideoLabel(video);
      this.curVideo = video;
      this.videoArrs = this.allCurVideos.filter(
        (item) => video.UniqeID == item.UniqeID
        (item) => video.GroupID == item.GroupID
      );
      this.$nextTick(() => {
        this.$refs[`player_${this.curVideo.ID}`][0].init();
@@ -656,7 +641,7 @@
            `calc(` + 100 / guid + `%)`;
          // this.$refs["playerWrap"].offsetHeight / guid + "px";
        }
        console.log(this.$refs[`player_${this.videoArrs[index].ID}`]);
        // console.log(this.$refs[`player_${this.videoArrs[index].ID}`]);
      });
    },
    cancelLabelChecked() {
@@ -681,12 +666,12 @@
      let query = {
        ID: this.selectedLabelId,
        ParentID: tempArr.join(","),
        ParentUniqID: this.curVideo.UniqeID + "",
        ParentUniqID: this.curVideo.GroupID + "",
        Time: Math.round(this.setLabelTime) + "",
        Codes: this.labelCheckedList.join(","),
        Desc: desc.join("，"),
      };
      

      editLabel(query).then((rsp) => {
        if (rsp && rsp.success) {
          _this.labelDialogVisible = false;
@@ -728,7 +713,7 @@
        Desc: mark.Desc,
        ParentUniqID: mark.ParentUniqID,
        Time: mark.Time,
        ParentID:mark.ParentID
        ParentID: mark.ParentID
      };
      delLabel(obj).then((rsp) => {
        if (rsp && rsp.success) {
@@ -751,6 +736,11 @@
      });
    },
    mergeMarks(videoInfo) {
      if (!videoInfo.EventLst || !videoInfo.LableLst) {
        console.log("mergeMarks data null")
        return;
      }

      const eMarks = videoInfo.EventLst.map((item) => {
        return {
          offset: item.SecondsInVideo,

 src/pages/shuohuangMonitorAnalyze/index/App.vue

@@ -11,55 +11,71 @@
        <top-nav></top-nav>
      </div>
      <div class="container">
        <!-- 首页 -->
        <guideIndex v-show="actPage=='guideIndex'"></guideIndex>

        <searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
        <memberManage v-if="actPage=='memberManage'"></memberManage>
        <taskManage v-if="actPage=='taskManage'"></taskManage>
        <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
        <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
        <configManage v-if="actPage=='configManage'"></configManage>
        <guideIndex v-if="actPage=='guideIndex'"></guideIndex>
        <lkg v-if="actPage=='lkgManage'"></lkg>
      </div>
    </div>
  </div>
</template>

<script>
import LeftNav from '../components/leftNav';
import Lkg from '../components/lkgManage'
import TopNav from '../components/topNav';
import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
import MemberManage from '../components/memberManage';
import LeftNav from '../components/leftNav';
import GuideIndex from '../components/guideIndex';
import TaskManage from '../components/taskManage';
import TransferMemo from '../components/transferMemo';
import TransferDeviceManage from '../components/transferDeviceManage';
import ConfigManage from '../components/configManage';
import GuideIndex from '../components/guideIndex';
import MemberManage from '../components/memberManage';
import TransferDeviceManage from '../components/transferDeviceManage';
import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';

export default {
  components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage, GuideIndex },
  data () {
  components: {
    Lkg,
    LeftNav,
    TopNav,
    SearchForVideoAnalyze,
    MemberManage,
    TaskManage,
    TransferMemo,
    TransferDeviceManage,
    ConfigManage,
    GuideIndex
  },
  data() {
    return {
      isCollapse: false,
      actPage: 'guideIndex',
    }
  },
  mounted () {

  mounted() {
    // this.actPage = 'guideIndex';
  },
  methods: {
    markNav () {
    markNav() {
      sessionStorage.setItem('actPage', this.actPage);
      this.menuChange(this.actPage);
    },
    toggleCollapse () {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      //通知当前活动页table(如果有) doLayout
    },
    menuChange (path) {
      if(path == 'taskscreen'){
    menuChange(path) {
      if (path == 'taskscreen') {
        //window.location.href = window.location.href+'taskscreen/index.html'
        window.open(window.location.href+'taskscreen/index.html','_blank')
      }else if(path == 'hiddendangerscreen'){
        window.open(window.location.href + 'taskscreen/index.html', '_blank')
      } else if (path == 'hiddendangerscreen') {
        //window.location.href = window.location.href+'hiddendangerscreen/index.html'
        window.open(window.location.href+'hiddendangerscreen/index.html','_blank')
        window.open(window.location.href + 'hiddendangerscreen/index.html', '_blank')
      }
      this.actPage = path;
    }
@@ -70,11 +86,11 @@
<style lang="scss">
.flex-box {
  display: flex;
  >label {
  > label {
    padding-right: 10px;
  }
}
.flex-end{
.flex-end {
  display: flex;
  justify-content: flex-end;
}
@@ -119,7 +135,7 @@
      padding: 0 3px;
      color: #0096fa;
    }
    i[class^='el-icon'] {
    i[class^="el-icon"] {
      padding: 3px;
      font-size: 16px;
      color: #0096fa;

 vue.config.js

@@ -41,10 +41,7 @@
})

// const serverUrl = "http://58.118.225.79:41243" // 羊五
const serverUrl = "http://192.168.20.10:7009"



const serverUrl = "http://192.168.20.117:7009"

module.exports = {
  pages,
@@ -91,7 +88,7 @@
      },
      "/data/api-v/app/findAllApp": {
        // target: '/',
        target: 'http://localhost:8081/',
        target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/data/api-v/app/findAllApp': 'apps.json'