人员任务分配

heyujie

2021-03-26 8d94a4a0a987f586a9f7f8826ebb76c19387f207

人员任务分配

 src/api/shuohuang.ts

@@ -109,7 +109,7 @@
  })
export const getTaskList = (query: any) =>
  request({
    url: '/data/api-c/lkg/getlstB',
    url: '/data/api-c/lkg/getTaskList',
    method: 'get',
    params: query
  })

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -25,8 +25,8 @@
                v-model="keyword1"
                placeholder="请输入机车号"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -35,8 +35,8 @@
                v-model="keyword2"
                placeholder="请输入车次"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <div>
@@ -45,39 +45,41 @@
                v-model="keyword3"
                placeholder="请输入司机姓名"
                size="small"
                style="margin: 0 10px;"
                clearable="true"
                style="margin: 0 10px"
                clearable
              ></el-input>
            </div>
            <el-button
              type="primary"
              @click="renderVideoTable"
              size="small"
              style="margin-right:10px;"
            >搜索</el-button>
            <!-- <el-checkbox v-model="isShowUndistributedOnly">仅显示未分配</el-checkbox> -->
            <el-checkbox v-model="notAssignedOnly">仅显示未分配</el-checkbox>
              style="margin-right: 10px"
              >搜索</el-button
            >
            <el-checkbox v-model="notAssignedOnly" @change="renderVideoTable">仅显示未分配</el-checkbox>
          </div>
          <div class="video-list">
            <el-checkbox-group v-model="trainNochecked">
              <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="vkey"
                  v-for="(v,vkey,i) in videoPackageList"
                  v-for="(v, vkey, i) in videoPackageList"
                  :key="i"
                >
                  <template slot="title">
                    <div>
                      <el-checkbox
                        :label="i"
                        style="padding-right:10px;"
                        :label="vkey"
                        style="padding-right: 10px"
                      ></el-checkbox>
                      <span>{{vkey}}({{v.length}})</span>
                      <span>{{ vkey }}({{ v.length }})</span>
                    </div>
                  </template>
                  <div class="video-detail" v-for="video in v" :key="video.ID">
                    <i class="el-icon-film" style="margin-left: 20px;"></i>
                    <span style="padding-left: 10px;">{{video.VideoName}}</span>
                    <i class="el-icon-film" style="margin-left: 20px"></i>
                    <span style="padding-left: 10px">{{
                      video.VideoName
                    }}</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
@@ -96,9 +98,19 @@
      </div>
      <div class="top-right partment">
        <div class="header">
         <el-checkbox v-model="isAllCheck" :indeterminate="isIndeterminate"  @change="handleCheckAllChange"></el-checkbox>
          <el-checkbox
            v-model="isAllCheck"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          ></el-checkbox>
          <div class="title">人员列表</div>
          <el-input size="small" @input="searchName" v-model="inputName" placeholder="请输入内容" clearable="true"></el-input>
          <el-input
            size="small"
            @input="searchName"
            v-model="inputName"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </div>
        <div class="body">
          <!-- <div class="flex-box">
@@ -107,9 +119,12 @@
            <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
          </div> -->
          <div class="person-list">
            <el-checkbox-group v-model="memberChecked" @change="handleCheckedCitiesChange">
            <el-checkbox-group
              v-model="memberChecked"
              @change="handleCheckedCitiesChange"
            >
              <div class="person" v-for="person in personList" :key="person.ID">
                <el-checkbox :label="person.ID">{{person.Name}}</el-checkbox>
                <el-checkbox :label="person.ID">{{ person.Name }}</el-checkbox>
              </div>
            </el-checkbox-group>
            <el-button
@@ -117,7 +132,8 @@
              type="primary"
              @click="toAddAssignList"
              size="small"
            >加入待分配列表</el-button>
              >加入待分配列表</el-button
            >
          </div>
        </div>
      </div>
@@ -127,18 +143,24 @@
      <div class="header">
        <div class="title">任务列表</div>
        <div class="header-right flex-box">
          <el-radio-group v-model="taskType" size="mini">
          <el-radio-group v-model="taskType" size="mini" @change="renderTaskTable">
            <el-radio-button label="1">待分配</el-radio-button>
            <el-radio-button label="2">已分配</el-radio-button>
          </el-radio-group>
          <el-input
            class="keyword-input"
            placeholder="请输入"
            placeholder="搜索关键字"
            v-model="keyWordOfTask"
            size="mini"
            style="margin-left: 10px;"
            style="margin-left: 10px"
            @input="reRenderWhenClear"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="renderTaskTable"></el-button>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchKeyword"
            ></el-button>
          </el-input>
        </div>
      </div>
@@ -148,31 +170,54 @@
            type="primary"
            size="small"
            @click="distributeTask"
            v-if="taskType==1&&taskVideoChecked.length"
          >分配任务</el-button>
            v-if="taskType == 1"
            >分配任务</el-button
          >
        </div>
        <el-table
          class="thbg"
          :data="taskTableData"
          v-if="taskTableData"
          ref="elTable"
          @selection-change="taskTableSelection"
          v-loading
        >
          <el-table-column v-if="taskType==1" type="selection" width="55"></el-table-column>
          <el-table-column prop="LocomotiveNumber" label="机车号"></el-table-column>
          <el-table-column
            v-if="taskType == 1"
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column prop="Title" label="机车号"></el-table-column>
          <el-table-column label="视频数量">
            <template slot-scope="scope">
              <div>{{scope.row.LKGList.length}}</div>
              <div>{{ scope.row.LKGList.length }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="DistributionUser" label="分配人"></el-table-column>
          <el-table-column prop="DistributionDate" label="分配时间"></el-table-column>
          <el-table-column prop="HandlingUsers" label="处理人"></el-table-column>
          <el-table-column
            prop="DistributionUser"
            label="分配人"
          ></el-table-column>
          <el-table-column
            prop="DistributionDate"
            label="分配时间"
          ></el-table-column>
          <el-table-column
            prop="HandlingUsers"
            label="处理人"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <span @click="cancelDistribute(scope.row)" v-show="taskType==1">取消分配</span>
                <span @click="cancelDistribute(scope.row)" v-show="taskType==2">取消指派</span>
                <span
                  @click="cancelDistribute(scope.row)"
                  v-show="taskType == 1"
                  >取消分配</span
                >
                <span
                  @click="cancelDistribute(scope.row)"
                  v-show="taskType == 2"
                  >取消指派</span
                >
                <!-- <span @click="toggleCollapse(scope.row)">查看/隐藏车次</span> -->
              </div>
            </template>
@@ -183,13 +228,15 @@
                class="video-item"
                v-for="video in scope.row.LKGList"
                :key="video.ID"
              >{{video.VideoName}}</div>
              >
                {{ video.VideoName }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :visible="orgTreeDialogVisible">
    <!-- <el-dialog :visible="orgTreeDialogVisible">
      <div>
        <el-tree
          :data="organizeData"
@@ -201,124 +248,109 @@
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small" @click="orgTreeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="searchMemberByOrg">确定</el-button>
          <el-button size="small" @click="orgTreeDialogVisible = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="searchMemberByOrg"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
    </el-dialog> -->
  </div>
</template>

<script>
import { getOrganizeTree, getMemberByOrg, getVideoListBySearch, addToAssignList, getTaskList, distributeTask, cancelMission } from '@/api/shuohuang';
import {
  getOrganizeTree,
  getMemberByOrg,
  getVideoListBySearch,
  addToAssignList,
  getTaskList,
  distributeTask,
  cancelMission,
} from "@/api/shuohuang";
export default {
  data () {
  data() {
    return {
      isAllCheck:false,
      taskType: '1',
      keyWordOfTask: '',
      // videoSearchTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            start.setHours(0, 0, 0);
            end.setTime(end.getTime() - 3600 * 1000 * 24);
            end.setHours(23, 59, 59);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            //start.setHours(0,0,0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      isAllCheck: false,
      taskType: "1",
      keyWordOfTask: "",
      isShowUndistributedOnly: false,
      videoPackageList: {},
      trainNochecked: [],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
      // trainNoPageSizes: [5, 8, 12],
      trainNoTotal: 0,
      keyword1: '',
      keyword2: '',
      keyword3: '',
      actCollapseName: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],
      keyword1: "",
      keyword2: "",
      keyword3: "",
      actCollapseName: "",
      personList: [],
      memberChecked: [],
      taskTableData: [],
      taskTableData: null,
      taskVideoChecked: [],
      notAssignedOnly: false,
      isIndeterminate:false,
      inputName:""
    }
      isIndeterminate: false,
      inputName: "",
    };
  },
  mounted () {
    this.getOrganizeTreeData();
  mounted() {
    // this.getOrganizeTreeData();
    this.refreshAll();
  },
  watch: {
    taskType (n, o) {
      this.renderTaskTable();
    }
  },
  methods: {
    searchName(val){
      console.log(this.personList ,val);
      if (val=="") {
        this.searchMemberByOrg()
    reRenderWhenClear(val){
      if (val.trim() == "") {
        this.renderTaskTable()
      }
      if (val.trim()=="") {
        return 
    },
    searchName(val) {
      console.log(this.personList, val);
      if (val == "") {
        this.searchMemberByOrg();
      }
      this.personList = this.personList.filter(item=>{
        return item.Name.indexOf(val)>-1
      })
      if (val.trim() == "") {
        return;
      }
      this.personList = this.personList.filter((item) => {
        return item.Name.indexOf(val) > -1;
      });
    },
    handleCheckAllChange(val) {
      let arr =[]
      this.personList.forEach(item=>{
        arr.push(item.ID)
      })
        this.memberChecked = val ? arr : [];
        this.isIndeterminate = false;
      },
       handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.isAllCheck = checkedCount === this.personList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.personList.length;
      },
    cancelDistribute (row) {
      cancelMission({ UniqeID: row.LKGList[0].UniqeID }).then(res => {
      let arr = [];
      this.personList.forEach((item) => {
        arr.push(item.ID);
      });
      this.memberChecked = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.isAllCheck = checkedCount === this.personList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.personList.length;
    },
    cancelDistribute(row) {
      let arr = row.LKGList.map((x) => x.ID);
      cancelMission({ LkgIDs: arr }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          this.refreshAll();
        }
      })
      });
    },
    refreshAll () {
    searchKeyword() {
      const val = this.keyWordOfTask
      this.taskTableData = this.taskTableData.filter((item) => {
        const b1 = item.DistributionUser.indexOf(val) > -1;
        const b2 = item.HandlingUsers.indexOf(val) > -1;
        const b3 = item.Title.indexOf(val) > -1;
        return b1 || b2 || b3;
      });
    },
    refreshAll() {
      this.trainNochecked = [];
      this.checkedOrg = {};
      this.memberChecked = [];
@@ -326,121 +358,131 @@
      this.renderVideoTable();
      this.renderTaskTable();
    },
    taskTableSelection (val) {
      this.taskVideoChecked = val
    taskTableSelection(val) {
      let arr = val.map((item) => item.LKGList.map((x) => x.ID));
      this.taskVideoChecked = arr;
    },
    renderTaskTable () {
    renderTaskTable() {
      let _this = this;
      let params = {
        IsPackage: 0,
        Status: this.taskType
      };
      getTaskList(params).then(res => {
        _this.taskTableData = res.data
      })
      getTaskList({
        Status: this.taskType,
      }).then((res) => {
        _this.taskTableData = res.data;
      });
    },
    // handleTrainNoSizeChange (size) {
    //   this.trainNoPageSize = size;
    //   this.renderVideoTable();
    // },
    handleTrainNoCurChange () {
      this.renderVideoTable();
    },
    renderVideoTable () {
    renderVideoTable() {
      let _this = this;
      let params = {
      getVideoListBySearch({
        CarNumber: this.keyword1,
        TrainNumber: this.keyword2,
        DriverName: this.keyword3,
        // PageIndex: this.trainNoCurPage,
        // PageSize: this.trainNoPageSize,
        notAssignedOnly: this.notAssignedOnly,
      };
      getVideoListBySearch(params).then(res => {
        _this.videoPackageList = res.data
      }).then((res) => {
        _this.videoPackageList = res.data;
        _this.trainNoTotal = res.total;
      });
    },
    toAddAssignList () {
    toAddAssignList() {
      let _this = this;
      let params = {
        UserID: this.memberChecked[0],
        UniqeID: this.trainNochecked.join(',')
      };
      addToAssignList(params).then(res => {
      let total = this.trainNochecked.length;
      let people = this.memberChecked.length;
      let least = (total / people) | 0;
      let left = total % people;

      let checkedTrain = [...this.trainNochecked];
      let pickList = [];
      for (let i = 0; i < people; i++) {
        pickList[i] = [];
        if (i < left) {
          for (let j = 0; j < least + 1; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        } else {
          for (let j = 0; j < least; j++) {
            pickList[i].push(...this.videoPackageList[checkedTrain[0]]);
            checkedTrain.shift();
          }
        }
      }
      let arr = pickList.map((a) => {
        return a.map((item) => item.ID);
      });

      addToAssignList({
        UserID: this.memberChecked,
        LkgIDs: arr,
      }).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
            type: "success",
            message: res.msg,
          });
          _this.refreshAll();
        }
      })
      });
    },
    searchMemberByOrg () {
    searchMemberByOrg() {
      let _this = this;
      getMemberByOrg({}).then(res => {
      getMemberByOrg({}).then((res) => {
        _this.personList = res.data;
        // _this.orgTreeDialogVisible = false;
      })
      });
    },
    deepNodeChildren (node) {
      if (node.ChildDept && node.ChildDept.length > 0) {
        return node.ChildDept.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          if (child.ChildDept) {
            childObj.children = this.deepNodeChildren(child)
          }
          if (child.UserLst) {
            childObj.children = this.deepNodeChildren(child)
          }
          return childObj;
        });
      } else if (node.UserLst && node.UserLst.length > 0) {
        return node.UserLst.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          return childObj;
        });
      }
    },
    checkOrgNode (a, b, c) {
      this.checkedOrg = a
    },
    getOrganizeTreeData () {
    // deepNodeChildren(node) {
    //   if (node.ChildDept && node.ChildDept.length > 0) {
    //     return node.ChildDept.map((child) => {
    //       let childObj = {};
    //       childObj.id = child.ID;
    //       childObj.label = child.Name;
    //       childObj.Status = child.Status;
    //       if (child.ChildDept) {
    //         childObj.children = this.deepNodeChildren(child);
    //       }
    //       if (child.UserLst) {
    //         childObj.children = this.deepNodeChildren(child);
    //       }
    //       return childObj;
    //     });
    //   } else if (node.UserLst && node.UserLst.length > 0) {
    //     return node.UserLst.map((child) => {
    //       let childObj = {};
    //       childObj.id = child.ID;
    //       childObj.label = child.Name;
    //       childObj.Status = child.Status;
    //       return childObj;
    //     });
    //   }
    // },
    // checkOrgNode(a, b, c) {
    //   this.checkedOrg = a;
    // },
    // getOrganizeTreeData() {
    //   let _this = this;
    //   getOrganizeTree().then((res) => {
    //     _this.organizeData = res.data.map((item) => {
    //       let obj = {};
    //       obj.id = item.ID;
    //       obj.label = item.Name;
    //       obj.Status = item.Status;
    //       obj.children = _this.deepNodeChildren(item);
    //       return obj;
    //     });
    //   });
    // },
    distributeTask() {
      let _this = this;
      getOrganizeTree().then(res => {
        _this.organizeData = res.data.map(item => {
          let obj = {};
          obj.id = item.ID;
          obj.label = item.Name;
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
        })
      })
    },
    distributeTask () {
      let _this = this;
      let arr = this.taskVideoChecked.map(train => train['LKGList'][0]['UniqeID'])
      let params = {
        UniqeID: arr.join(',')
      }
      distributeTask(params).then(res => {
      distributeTask({
        LkgIDs: this.taskVideoChecked,
      }).then((res) => {
        _this.renderTaskTable();
      })
      });
    },

    // selOrg () {
    //   this.orgTreeDialogVisible = true;
    // },
  }
}
  },
};
</script>

<style lang="scss">
@@ -457,11 +499,12 @@
    height: 40px;
    .title {
      float: left;
      padding-left: 20px;
      height: 40px;
      padding-left: 10px;

      line-height: 40px;
      font-size: 14px;
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
    }
    .header-right {
      float: right;
@@ -491,7 +534,7 @@
        text-align: left;
        .el-checkbox-group {
          margin-bottom: 20px;
          .el-checkbox__label{
          .el-checkbox__label {
            display: none;
          }
          .video-detail {
@@ -507,18 +550,18 @@
      width: 360px;
      height: 465px;
      // overflow-y:auto;
      .header{
        .el-input{
              line-height: 41px;
            width: 185px;
            font-size: 14px;
      .header {
        .el-input {
          line-height: 41px;
          width: 185px;
          font-size: 14px;
        }
        .el-checkbox{
        .el-checkbox {
          float: left;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;  
          font-size: 14px;
        }
      }
      .checked-org {
@@ -531,16 +574,16 @@
      .person-list {
        padding-top: 14px;

        .el-checkbox-group{
        .el-checkbox-group {
          height: 330px;

        margin-bottom: 8px;
        overflow: auto;
          margin-bottom: 8px;
          overflow: auto;
        }
        .person {
          text-align: left;
          margin-bottom: 10px;
          

          padding-bottom: 6px;
          border-bottom: 1px solid #eee;
        }

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -119,17 +119,13 @@
            </div>
          </template>
          <div class="player-control">
            <!-- <div class="progress-bar"></div> -->
            <!--

            -->
            <div class="progress-bar">
              <el-tooltip
                placement="top"
                v-for="(item, index) in eventMarks"
                :key="index"
              >
                <div slot="content">
                <div slot="content"> 
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                </div>
                <div
@@ -140,19 +136,51 @@
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>
              <!-- :marks="marks"  -->
              <el-tooltip
                placement="top"
                v-for="(item, index) in labelMarks"
                :key="index"
              >
                <div slot="content">
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                </div>
                <div
                  class="label-dot"
                  :style="{
                    left: (item.offset/maxSecond)*100 + '%',
                  }"
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>

                <el-tooltip placement="top" :offset="440-hoverOffset"
                :hide-after="0" :visible-arrow="false" 
                >
  <div slot="content" >{{hoverTime}}</div>
              <el-slider
                v-model="curTime"
                :format-tooltip="formatTooltip"
                :max="maxSecond"
                @mousemove.native="triggerHover"
                @change="progressChange"
                @input="inTimeChange"
              ></el-slider>
</el-tooltip>
              
            </div>
            <div class="control-zone">
              <span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
              <div class="play-btn" @click="playAll" v-if="showPlayBtn"></div>
              <div class="stop-btn" @click="pauseAll" v-else></div>
              

              <div class="play-btn" @click="playAll" v-if="showPlayBtn">

                <span class="icon iconfont">&#xe628;</span>

              </div>
              <div class="stop-btn" @click="pauseAll" v-else>

                <span class="icon iconfont">&#xe6fc;</span>
              </div>
            </div>
          </div>
        </div>
@@ -205,7 +233,7 @@
          <!-- <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">
@@ -318,16 +346,15 @@
      curTime: 0,
      showPlayBtn: true,
      eventMarks: [],
      marks: {
        45: {},
        373: {},
      },
      marks: {},
      labelMarks: [],
      maxDuration: 0,
      maxVideoTime: "",
      curPlayTime: "00:00",
      maxSecond: 0,
      isStop: false,
      hoverTime:"",
      hoverOffset:0,
    };
  },
  watch: {
@@ -355,6 +382,10 @@
    this.getRelatedVideos(this.videoDetails);
  },
  methods: {
    triggerHover(e){
      this.hoverOffset=e.offsetX
      this.hoverTime=this.getTimeStr((e.offsetX/880)*this.maxSecond)
    },
    getPlayStatus(e) {
      console.log(e, 1111);
    },
@@ -500,42 +531,15 @@
          item.marks = _this.mergeMarks(item);
        });
        _this.curVideo = res.data.find((item) => item.ID == v.ID);
        console.log(_this.curVideo);
        let map = {},
          map2 = {};
        let arr1 = [],
          arr2 = [];
        _this.curVideo.marks.forEach((item) => {
        _this.curVideo.marks.forEach(item=>{
          if (item.type == 0) {
            map[item.offset] = {
              style: {
                color: "white",
              },
              label: item.text,
            };
            _this.eventMarks.push(item)
          } else {
            map[+item.offset] = {
              style: {
                color: "yellow",
              },
              label: item.text,
            };
            _this.labelMarks.push(item)
          }
        });
        // _this.eventMarks = map
        _this.labelMarks = map2;

        // videoInfo.EventLst.forEach((item) => {
        //   map[item.SecondsInVideo] = {
        //     style:{
        //       color: 'black'
        //     },
        //     label: item.Event + (item.Desc == "" ? "" : ": " + item.Desc)
        //   }
        // });

        if (this.guid == 1) {
          this.maxVideoTime = this.curVideo.VideoTime;
        })
        if (_this.guid == 1) {
          _this.maxVideoTime = _this.curVideo.VideoTime;
        }
        _this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
        _this.allCurVideos = res.data;
@@ -543,12 +547,12 @@
          return item.Camera == "司机室";
        });

        this.$nextTick(() => {
        _this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
          let arr = this.maxVideoTime.split(":");
          let arr = _this.maxVideoTime.split(":");
          let min = +arr[0],
            sec = +arr[1];
          this.maxSecond = min * 60 + sec;
          _this.maxSecond = min * 60 + sec;
        });
      });
    },
@@ -651,12 +655,6 @@
              _this.curVideo.LableLst.push(label);
            }
          });
          // getRelatedVideoInfo({ UniqeID: _this.videoDetails.UniqeID }).then(res => {
          //   res.data.forEach(d => {
          //     let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
          //     someVideo.LableLst = d.LableLst
          //   })
          // })

          this.$message.success("添加成功");
          // 标注
@@ -701,16 +699,14 @@
          text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
          type: 0,
        };
        this.eventMarks.push(obj);
        return obj;
      });
      const labMarks = videoInfo.LableLst.map((lable) => {
        let obj = {
          offset: lable.Time,
          offset: +lable.Time,
          text: lable.Desc,
          type: 1,
        };
        this.labelMarks.push(obj);
        return obj;
      });
      return eMarks.concat(labMarks);
@@ -818,6 +814,9 @@
              float: left;
            }
          }
          // .prism-controlbar{
          //   display: none;
          // }
          .currentPlayer {
            border: 2px solid aqua;
            height: 100%;
@@ -828,24 +827,41 @@
          }
        }
        .player-control {
          background-color: black;
          background-color: #fff;
          height: 75px;
          width: 100%;
          .progress-bar {
            margin: 0px 30px;
            position: relative;
            .self-dot {
              top: 16px;
              // top: 16px;
              position: absolute;
              height: 6px;
              width: 3px;
              width: 6px;
              z-index: 1;
              background-color: lightcoral;
              border-radius: 60%;
              // border-radius: 30%;
              // pointer-events: none;
              cursor: pointer;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            .label-dot{
              // top: 16px;
              position: absolute;
              height: 6px;
              width: 6px;
              z-index: 1;
              background-color: yellowgreen;
              cursor: pointer;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            .el-slider{
                  margin: 16px 0;
                  .el-slider__runway{
                    margin: 0;
                  }
            }
            .el-slider__button {
              width: 12px;
@@ -859,24 +875,27 @@
            .time {
              float: left;
              margin-left: 23px;
              color: #fff;
              // color: #fff;
            }
            .play-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
                no-repeat;
              background-size: contain;
              // background: url(/apps/shuohuangMonitorAnalyze/img/smallplay.png)
              
              margin: 0 auto;
              .iconfont{
                    font-size: 25px;
              }
            }
            .stop-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
                no-repeat;
              background-size: contain;
              // background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
              .iconfont{
                    font-size: 25px;
              }
              margin: 0 auto;
            }
          }

 vue.config.js

@@ -119,3 +119,4 @@
    }
  }
}
// http://111.205.161.131:40143/