路线导航

zengh

2022-01-06 d5e4f6d62943640cdf4b89288546d3f779f43f7f

路线导航

 public/map/core/manager/widgetsmanager.js

@@ -145,6 +145,14 @@
                    "actived": false
                },
                {
                  "label": "抢单任务",
                  "id": "task",
                  "widgetClass": "widgets/task/task",
                  "type": "sider",
                  "cssPath": "widgets/task/task.css",
                  "actived": false
                },
                {
                    "label": "地图模式",
                    "id": "SupervisoryMap",
                    "widgetClass": "widgets/supervisoryMap/SupervisoryMap",

 public/map/index.html

@@ -43,7 +43,13 @@
    if(ISinit == null){
      init(openId,null);
    }

    function locations() {
      require(["dojo/topic"],
        function (topic) {
        topic.publish("location", "2323");
      }
      );
    }
    function init(openId,locationObj) {
      require(["base/framework", "base/AppEvent"],
        function (framework, AppEvent) {
@@ -51,7 +57,6 @@
          _framework.onSiderContainerShow();
          _framework.resize();
          _AppEvent = AppEvent;

          if (locationObj != null){
            //获取设备id
            window.clientID = locationObj.clientID;

 public/map/widgets/task/config.js

New file
@@ -0,0 +1,13 @@
/*
 * @Description:
 * @Version: 1.0
 * @Author: yangsx
 * @Date: 2019-12-09 19:01:40
 * @LastEditors: yangsx
 * @LastEditTime: 2019-12-14 10:00:41
 */
define([], function() {
  var config = {};

  return config;
});

 public/map/widgets/task/task.css

 public/map/widgets/task/task.js

New file
@@ -0,0 +1,321 @@
/*
 * @Description:
 * @Version: 1.0
 * @Author: yangsx
 * @Date: 2019-12-09 19:01:40
 * @LastEditors: yangsx
 * @LastEditTime: 2019-12-14 14:44:57
 */
define([
  "dojo",
  "dojo/_base/declare",
  "dojo/_base/lang",
  "base/BaseWidget",
  "dojo/text!widgets/task/template.html",
  "base/AppEvent",
  "base/ConfigData",
  "widgets/task/config",
  "dojo/dom",
  "dojo/dom-construct",
  "dojo/dom-attr",
  "dojo/dom-style",
  "dojo/on",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "esri/layers/FeatureLayer",
  "controls/tab/TabControl",
  "esri/dijit/SymbolStyler",
  "esri/styles/basic",
  "dojo/_base/array",
  "esri/InfoTemplate",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "esri/Color",
  "esri/toolbars/edit",
  "esri/graphic",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/geometry/Extent",
  "esri/tasks/FeatureSet",
  "esri/renderers/HeatmapRenderer",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/PictureMarkerSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/SpatialReference",
  "esri/tasks/GeometryService",
  "esri/tasks/ProjectParameters",
  "esri/layers/GraphicsLayer",
  "esri/layers/LabelLayer",
  "esri/symbols/TextSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/renderers/ClassBreaksRenderer",
  "esri/tasks/Geoprocessor",
  "esri/tasks/DataFile",
  "esri/geometry/webMercatorUtils",
  "esri/symbols/Font",
  "esri/geometry/ScreenPoint",
  "esri/layers/ImageParameters",
  "esri/geometry/geometryEngine",
  "esri/dijit/PopupTemplate",
  "widgets/clientManagement/FlareClusterLayer_v3",
  'dojo/topic',
  "dojo/domReady!"
], function (
  dojo,
  declare,
  lang,
  BaseWidget,
  template,
  AppEvent,
  ConfigData,
  config,
  dom,
  domConstruct,
  domAttr,
  domStyle,
  on,
  ArcGISDynamicMapServiceLayer,
  ArcGISTiledMapServiceLayer,
  FeatureLayer,
  TabControl,
  SymbolStyler,
  basic,
  arrayUtils,
  InfoTemplate,
  Query,
  QueryTask,
  Color,
  Edit,
  Graphic,
  Point,
  Polyline,
  Polygon,
  Extent,
  FeatureSet,
  HeatmapRenderer,
  SimpleLineSymbol,
  SimpleFillSymbol,
  PictureMarkerSymbol,
  SimpleMarkerSymbol,
  SpatialReference,
  GeometryService,
  ProjectParameters,
  GraphicsLayer,
  LabelLayer,
  TextSymbol,
  SimpleRenderer,
  ClassBreaksRenderer,
  Geoprocessor,
  DataFile,
  webMercatorUtils,
  Font,
  ScreenPoint,
  ImageParameters,
  geometryEngine,
  PopupTemplate,
  FlareClusterLayer,
  topic
) {
  var Widget = declare([BaseWidget], {
    widgetName: "task",
    label: "分发处置",
    templateString: template,
    _map: null,
    objThis: null,
    _siteLayer: new GraphicsLayer(),
    layuiLayer: null,
    layuiLadate: null,
    tabIndex: 0,

    // 保留添加实体图层的变量
    addEntitys: null,
    entitysData: [],


    // 巡逻区域或者巡逻路线的描述
    routeOrRegionDescribe: null,

    // 用来记录巡逻区域或者巡逻路线的下标的
    patrolIndex: 0,

    // 拖拽
    isDown: false,
    x: 0,
    y: 0,
    offset: null,
    moveThis: null,
    // 电子围栏需要新增的Id
    newElectronicFenceId: null,

    // 新增路线时，派发人员，人员名称，以及人员id
    peopleRealName: null,
    pepleRealId: null,
    constructor: function (options, srcRefNode) {
      this._map = options.map;
      objThis = this;

      this.addEntitys = new GraphicsLayer({
        id: 'addEntitys'
      });

      // 添加点面线的图层
      this.addPolygonEntitys = new GraphicsLayer({
        id: 'addPolygonEntitys'
      });
      // 添加所有图层的地方
      this.entityPolygonAll = new GraphicsLayer({
        id: 'entityPolygonAll'
      });


      this._map.addLayer(this.addEntitys);


      this._map.addLayer(this.addPolygonEntitys);
      this._map.addLayer(this.entityPolygonAll);

    },

    startup: function () {

      objThis._map.addLayer(objThis._siteLayer);


    },

    getQueryStringByKey: function (key) {
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },
    location: function (ces) {
      debugger
      alert("@3232")
    },
    open: function () {
      var that = this;
      topic.subscribe("location", lang.hitch(this, this.location));
      var baid = decodeURI(that.getQueryStringByKey('baid'));
      var entityData = '';
      var entityArr = [];
      entityData = baid.match(/\(([^)]*)\)/);

      // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
      if (entityData && entityData != '') {
        entityData = entityData[1].split(',');

        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
          // entityArr.push([Number(b[0]), Number(b[1])]);
        }

      }
      that.addPolygonAll(that.addEntitys, entityArr);
      that._map.centerAndZoom(new esri.geometry.Point(entityArr[Math.ceil(entityArr.length / 2)][0], entityArr[Math.ceil(entityArr.length / 2)][1], new esri.SpatialReference({wkid: 4326})), 14);

    },
    close: function () {

    },
    addPolygonAll: function (entitys, rings) {
      // entitys.clear();
      var graphic = null;
      var polylineSymbol = new SimpleLineSymbol();
      polylineSymbol.color = [255, 0, 0, 1];
      polylineSymbol.width = 4;
      var polyline = new Polyline({
        "paths": [rings],
        "spatialReference": {
          "wkid": 4326
        }
      });
      graphic = new Graphic(polyline, polylineSymbol)
      entitys.add(graphic);
    },
    addPoint: function (entitys, lgtd, lttd, img) {
      var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 32);
      symbol.xoffset = 0;
      symbol.yoffset = -2;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);
    },
    /**
     * 添加实体的公共方法
     * @param {*} entitys 实体类
     * @param {Array} entityContent 存放每个点详细数据的数组
     * @param {string} name 实体的名字
     * @param {*} item 实体数据
     * @param {*} lgtd 经度
     * @param {*} lttd 纬度
     * @param {*} outlineColors 颜色
     */
    createEntitys: function (entitys, lgtd, lttd, image) {

      var symbol = new esri.symbol.PictureMarkerSymbol(image, 44, 44);

      var width = 44;
      var height = 44;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));

      var graphic = new esri.Graphic(pt, symbol);

      setInterval(function () {
        if (width >= 60) {
          width = 44;
          height = 44;
        }
        width += 1;
        height += 1;
        symbol.width = width;
        symbol.height = height;
        graphic.setSymbol(symbol)
        entitys.add(graphic);
      }, 50)

    },
    /**
     * 添加闪烁实体的公共方法
     * @param {*} entitys 实体类
     * @param {*} lgtd 经度
     * @param {*} lttd 纬度
     * @param {*} color 颜色
     */
    createTwinkleEntitys: function (entitys, lgtd, lttd, image, color) {
      var symbol = new esri.symbol.PictureMarkerSymbol(image, 64, 64);
      var width = 64;
      var height = 64;
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));

      var graphic = new esri.Graphic(pt, symbol);

      setInterval(function () {
        if (width >= 80) {
          width = 64;
          height = 64;
        }
        width += 1;
        height += 1;
        symbol.width = width;
        symbol.height = height;
        graphic.setSymbol(symbol)
        entitys.add(graphic);
      }, 50)
    },
    addPoints: function (entitys, lgtd, lttd, img) {
      var symbol = new esri.symbol.PictureMarkerSymbol(img, 20, 20);
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);
    }
  });
  return Widget;
});

 public/map/widgets/task/template.html

New file
@@ -0,0 +1 @@
<div></div>

 src/router/views/index.js

@@ -293,8 +293,17 @@
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/policeTracking/policeTracking')
  }]
}, {
    path: 'details',
    name: '任务详情',
    meta: {
      i18n: 'details'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/activitys/policeTracking')
  }]
}
, {
  path: '/healthcode',
  component: Layout,
  redirect: '/healthcode/healthcodePage',

 src/styles/element-ui.scss

@@ -113,6 +113,7 @@
.el-table__body tr.hover-row > td {
  background-color: $mainBhover !important;
}

.el-button--text {
  color: $fontColor !important;
}

 src/views/activitys/policeTracking.vue

New file
@@ -0,0 +1,605 @@
<template>
  <el-row>
    <el-col :span="12">
      <div style="background: #fff; height: 100%">
        <el-card class="trackClass" style="overflow-y: auto">
          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-message-solid avue-group__icon"></i>
                <h1 class="avue-group__title">任务信息</h1>
              </div>
            </div>
          </div>

          <el-card>
            <el-form
              :model="form"
              label-position="right"
              size="mini"
              class="policeForm"
              label-width="100px"
              style="
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
            >
              <el-row>
                <el-col span="12">
                  <el-form-item label="任务标题">
                    <el-input
                      disabled="true"
                      v-model="form.rname"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="下发时间">
                    <el-input
                      disabled="true"
                      v-model="form.time"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="24">
                  <el-form-item label="任务内容">
                    <el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="省份" class="cityClassParams">
                    <avue-form :option="itemOption" v-model="form"></avue-form>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="任务状态">
                    <el-input
                      disabled="true"
                      v-model="form.rtype"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="积分数值">
                    <el-input
                      disabled="true"
                      v-model="form.integral"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="接收人数">
                    <el-input
                      disabled="true"
                      v-model="form.jnum"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <!-- <div
              class="grid-content bg-purple-light"
              style="text-align: center"
            >
              <el-button @click="onSubmit()" type="primary">派发</el-button>
            </div> -->
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-s-custom avue-group__icon"></i>
                <h1 class="avue-group__title">接收人信息</h1>
              </div>
            </div>
          </div>

          <el-card>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="240"
              @row-click="rowclick"
            >
              <el-table-column
                prop="ind"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="联系电话"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="online_status"
                label="在线状态"
                width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="tenantName"
                label="所属部门"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="status"
                label="人员状态"
                width="120"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-s-order avue-group__icon"></i>
                <h1 class="avue-group__title">任务反馈</h1>
              </div>
            </div>
          </div>

          <el-card>
            <el-input
              disabled="true"
              type="textarea"
              v-model="security.result"
              autocomplete="off"
            ></el-input>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-camera-solid avue-group__icon"></i>
                <h1 class="avue-group__title">现场图片</h1>
              </div>
            </div>
          </div>

          <el-card class="scene-image-box">
            <el-image
              v-for="(item, index) in imgSrc"
              :key="index"
              :src="item"
              :preview-src-list="srcList"
              v-show="imgSrc.length > 0"
            ></el-image>
            <span v-show="imgSrc.length == 0">暂无现场图片</span>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-video-camera-solid avue-group__icon"></i>
                <h1 class="avue-group__title">现场视频</h1>
              </div>
            </div>
          </div>

          <el-card>
            <video
              :src="feedbackVideo"
              style="width: 200px; height: 200px; object-fit: fill"
              controls
              v-show="feedbackVideo != ''"
            ></video>
            <span v-show="feedbackVideo == ''">暂无现场视频</span>
          </el-card>
        </el-card>
      </div>
    </el-col>

    <el-col :span="12">
      <iframe
        id="mapDiv"
        ref="mapDiv"
        :src="baseUrl"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </el-col>
  </el-row>
</template>

<script>
  import axios from "axios";
  import {getList, getclient} from "@/api/real/real";
  import {update} from "@/api/real/real";

  export default {
    inject: ["reload"],
    data() {
      return {
        flag: true,
        selectOptions: [],
        receivingList: [],
        security: {},
        imgSrc: [],
        srcList: [],
        form: {},
        itemOption: {
          menuBtn: false,
          column: [
            {
              disabled: true,
              row: false,
              prop: "province",
              type: "select",
              placeholder: "省份",
              props: {
                label: "name",
                value: "code",
              },
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 1,
              labelWidth: "0",
              className: "cityClassSelect",
            },
            {
              disabled: true,
              row: false,
              prop: "city",
              type: "select",
              placeholder: "地市",
              props: {
                label: "name",
                value: "code",
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 1,
              labelWidth: "0",
              className: "cityClassSelect",
            },
            {
              disabled: true,
              row: false,
              prop: "district",
              type: "select",
              placeholder: "区县",
              props: {
                label: "name",
                value: "code",
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 1,
              labelWidth: "0",
              className: "cityClassSelect",
            },
          ],
        },
        tableData: [],
        multipleSelection: [],
        ensureNames: "",
        ensureId: "",
        baseUrl: "",
        oldVideoSatart: false,
        vaddress: null,
        audios: [],
        feedbackVideo: "",
      };
    },
    created() {

      this.form = this.$route.query;
      this.baseUrl = `/map/index.html?openid=task&baid=${this.form.line}`;

    },
    mounted() {
      this.getAudios();
      this.getImgAndVideo();
      this.getList();
      // this.$refs.mapDiv.onload = () => {
      //   window.frames[0].init("AlertSecurity", {
      //     x: this.form.jd,
      //     y: this.form.wd,
      //   });
      // };
    },
    updated() {
      var arr = [];
      this.tableData.forEach((item) => {
        if (item.id == this.form.oneId) {
          arr.push(item);
        }
      });

      // if (this.form.jtype != 2) {
      //   this.toggleSelection(arr);
      // }
    },
    methods: {
      rowclick(row, column, event){
        var iframe = window.document.getElementById("mapDiv");
        iframe.contentWindow.locations();
      },
      onSubmit() {
        var that = this;

        var userId = JSON.parse(
          window.localStorage.getItem("群防群控后台管理系统-userInfo")
        ).content.nick_name;

        if (that.form.securityArr != null && that.form.securityArr != "") {
          that.form.jtype = "1";
          if (typeof that.form.securityArr != "string") {
            var security = "";
            that.form.securityArr.forEach((item) => {
              security = security + item + ",";
            });
            that.form.securityArr = security.substring(0, security.length - 1);
          }

          if (that.form.securityArr == "" || that.form.securityArr == null) {
            that.form.jtype = "0";
            that.form.alarmPeople = "";
          } else {
            that.form.jtype = "1";
            //已派发保安
            that.form.alarmPeople = userId;
          }

          axios({
            url: "/api/alarm/alarm/submit",
            method: "post",
            data: that.form,
          }).then((resdata) => {
            that.$message({
              message: "派遣完成",
              type: "success",
            });
          });
        } else {
          that.$message({
            message: "未选择保安，请重试",
            type: "warning",
          });
        }
      },

      getList() {
        var that = this;
        this.form
        axios({
          method: "get",
          url: "/api/taskqd/queryReceiver",
          params: {
            serid: this.form.serid,
          },
        }).then((res) => {
          var i = 0;
          res.data.data.forEach((item) => {
            that.tableData.push({
              id: item.id,
              ind: (i += 1),
              name: item.real_name,
              phone: item.phone,
              online_status: item.online_status == 1 ? "在线" : "掉线",
              status: "已抵达",
              tenantName: item.tenantName,
            });
          });
        });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      getAudios() {
        axios({
          method: "get",
          url: "/api/avideo/list",
          params: {
            jid: this.form.id,
          },
        }).then((resdata) => {
          if (resdata.data.data.records.length > 0)
            this.audios = resdata.data.data.records;
        });
      },
      getImgAndVideo() {
        axios({
          method: "post",
          url: "/api/feedback/feedback/selectFeedEdit",
          params: {
            jid: this.form.id,
          },
        }).then((resdata) => {
          if (resdata.data.data.length > 0) {
            if (resdata.data.data[0].List.length > 0)
              this.security = resdata.data.data[0].List[0];
            if (resdata.data.data[0].tp.length > 0) {
              this.imgSrc = resdata.data.data[0].tp;
              this.srcList = resdata.data.data[0].tp;
            }
            if (resdata.data.data[0].sp.length > 0) {
              this.feedbackVideo = resdata.data.data[0].sp[0];
            }
          }
        });
      },

      oldOpenVideo() {
        getclient(this.form.id).then((res) => {
          if (res.data.data.vaddress != "") {
            this.vaddress = res.data.data.vaddress;
          }
          this.oldVideoSatart = true;
        });
      },

      updatedPageData() {
        var that = this;
        /*      axios({
                method: "get",
                url: "/api/alarm/alarm/page",
                params: {
                  id: that.form.id,
                },
              }).then(function (res) {
                that.form = res.data.data.records[0];
                if (
                  !(
                    that.form.securityArr &&
                    that.form.securityArr != null &&
                    that.form.securityArr != undefined &&
                    that.form.securityArr.length > 0
                  )
                ) {
                  that.form.securityArr = [];
                }
                that.getList(); //报错deptId格式不对liu.2021.5.7
              });*/
      },
    },
  };
</script>

<style scoped lang="scss">

  /deep/ .el-table tbody tr:hover > td {
    background-color: #1d5ce4 !important
  }

  .el-col {
    height: calc(100% - 5px);
  }

  .trackClass {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
  }

  .receiving-alarm-box {
    line-height: 32px !important;
    height: 200px;
    overflow-y: auto;

    .el-card__body {
      padding: 0 10px !important;
    }
  }

  .audios-box,
  .scene-image-box {
    line-height: 32px !important;
    height: auto;
    max-height: 200px;
    overflow-y: auto;

    .el-card__body {
      display: flex;
      padding: 0 10px !important;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .x-audio-wrap.inline {
        margin: 10px;
      }

      .el-image {
        margin: 10px;
        width: 160px;
        height: 80px;
      }
    }
  }

  #old_video::-webkit-media-controls-timeline {
    display: block;
  }

</style>

 src/views/activitys/real.vue

@@ -20,6 +20,7 @@
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-click="rowClick"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
@@ -1181,13 +1182,13 @@
    PoliceTracking(row) {
      var arr = [];
      this.$store.state.tags.tagList.forEach((item) => {
        if (item.label != "任务追踪") {
        if (item.label != "任务详情") {
          arr.push(item);
        }
      });
      this.$store.state.tags.tagList = arr;
      //警情追踪
      this.$router.push({ path: "/policeTracking/track", query: row });
      this.$router.push({ path: "/policeTracking/details", query: row });
    },
    //打开新增窗体
    openAdd() {

 vue.config.js

@@ -7,6 +7,7 @@
 * @LastEditTime: 2021-01-29 15:58:39
 */
module.exports = {

  //路径前缀
  publicPath: "./",
  lintOnSave: true,
@@ -42,12 +43,13 @@
        //target: 'http://localhost:82/',
        // target: 'http://223.82.109.183:2082/api/',
        // target: 'http://192.168.0.107:85/',//唐
        //target: 'http://localhost:83/',
        //target: 'http://223.82.109.183:2082/api/',
        target: 'http://localhost:83/',
        //target: 'http://223.82.109.183:2082/api/',
        //target: 'http://localhost:83/',
        //target: 'https://web.byisf.com/api/',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',

        ws: true,
        pathRewrite: {
          '^/api': '/'