南昌市物联网技防平台-前端
Administrator
2021-04-23 8f3062cd6729850839b02b4dc0a4a76c4322f1c4
src/views/policeTracking/policeTracking.vue
@@ -22,148 +22,149 @@
            </div>
          </div>
          <el-form
            :model="form"
            label-position="right"
            size="mini"
            class="policeForm"
            label-width="100px"
            style="
              background: #fff;
              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.galarmPeople"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="报警人电话">
                  <el-input
                    disabled="true"
                    v-model="form.phoneNumber"
                    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.oneContacts"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="负责人电话">
                  <el-input
                    disabled="true"
                    v-model="form.onePhone"
                    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.place"
                    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.waringType"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="设备编号">
                  <el-input
                    disabled="true"
                    v-model="form.deviceNumber"
                    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.alarmPeople"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <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="报警时间">
                  <el-input
                    disabled="true"
                    v-model="form.alarmTime"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="历史视频">
                  <el-button type="primary" @click.stop="oldVideoSatart = true"
                    >视频播放
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="备注">
                  <el-input
                    disabled="true"
                    v-model="form.bz"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-card>
            <el-form
              :model="form"
              label-position="right"
              size="mini"
              class="policeForm"
              label-width="100px"
              style="
                background: #fff;
                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.galarmPeople"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="报警人电话">
                    <el-input
                      disabled="true"
                      v-model="form.phoneNumber"
                      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.oneContacts"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="负责人电话">
                    <el-input
                      disabled="true"
                      v-model="form.onePhone"
                      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.place"
                      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.waringType"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="设备编号">
                    <el-input
                      disabled="true"
                      v-model="form.deviceNumber"
                      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.alarmPeople"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <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="报警时间">
                    <el-input
                      disabled="true"
                      v-model="form.alarmTime"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="历史视频">
                    <el-button type="primary" @click.stop="oldOpenVideo"
                      >视频播放
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="备注">
                    <el-input
                      disabled="true"
                      v-model="form.bz"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div
            v-if="form.jtype != 2"
@@ -185,7 +186,9 @@
                <i class="el-icon-document avue-group__icon"></i>
                <h1 class="avue-group__title">人员信息</h1>
                <el-button
                  @click="onSubmit('通知' + ensureNames, 1), (flag = false)"
                  @click="
                    onSubmit('通知' + ensureNames, 1, ensureId), (flag = false)
                  "
                  size="small"
                  style="position: absolute; right: 0"
                  :disabled="!flag"
@@ -329,147 +332,141 @@
            </div>
          </div>
          <el-form
            :model="security"
            label-position="right"
            size="mini"
            label-width="100px"
            style="
              background: #fff;
              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="security.snumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="人员名称">
                  <el-input
                    disabled="true"
                    v-model="security.sname"
                    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="security.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>
          <div class="demo-image__placeholder">
            <div
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
          <el-card>
            <el-form
              :model="security"
              label-position="right"
              size="mini"
              label-width="100px"
              style="
                background: #fff;
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
            >
              <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>
              <el-row>
                <el-col span="12">
                  <el-form-item label="人员编号">
                    <el-input
                      disabled="true"
                      v-model="security.snumber"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="人员名称">
                    <el-input
                      disabled="true"
                      v-model="security.sname"
                      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="security.phone"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </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.describe"
              autocomplete="off"
            ></el-input>
          </el-card>
            <div class="block">
              <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>
            <div class="block">
              <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>
              <div>
                <video
                  :src="feedbackVideo"
                  style="width: 100%; height: 100%; object-fit: fill"
                  controls
                  v-show="feedbackVideo != ''"
                ></video>
                <span v-show="feedbackVideo == ''">暂无现场视频</span>
          <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: 100%; height: 100%; object-fit: fill"
              controls
              v-show="feedbackVideo != ''"
            ></video>
            <span v-show="feedbackVideo == ''">暂无现场视频</span>
          </el-card>
          <el-row :align="center" style="margin-top: 40px">
            <el-col :offset="10">
@@ -502,7 +499,6 @@
        :visible.sync="oldVideoSatart"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @opened="oldOpenVideo"
        @close="vaddress = ''"
        append-to-body
      >
@@ -590,6 +586,7 @@
      tableData: [],
      multipleSelection: [],
      ensureNames: "",
      ensureId: "",
      baseUrl: "",
      oldVideoSatart: false,
      vaddress: null,
@@ -621,7 +618,10 @@
        arr.push(item);
      }
    });
    this.toggleSelection(arr);
    if (this.form.jtype != 2) {
      this.toggleSelection(arr);
    }
  },
  methods: {
    getDate() {
@@ -732,23 +732,27 @@
          currenS,
      };
    },
    onSubmit(zc, jtype) {
    onSubmit(zc, jtype, ensureId) {
      var that = this;
      var subData = {
        jid: this.form.id,
        jtype: jtype,
        rid: this.form.alarmId,
        bz: this.form.bz,
        snumber: this.form.alarmId,
        sname: this.form.alarmPeople,
        zc: zc,
        zctime: this.getDate().current,
      };
      if (ensureId && ensureId != "") {
        subData.securityArr = ensureId;
      }
      axios
        .post(
          "/api/blade-jfpts/alarm/alarm/updateJtype",
          {},
          {
            params: {
              jid: this.form.id,
              jtype: jtype,
              rid: this.form.alarmId,
              bz: this.form.bz,
              snumber: this.form.alarmId,
              sname: this.form.alarmPeople,
              zc: zc,
              zctime: this.getDate().current,
            },
            params: subData,
          }
        )
        .then(function (res) {
@@ -816,8 +820,12 @@
    },
    handleSelectionChange(val) {
      console.log(val, 9898);
      this.ensureNames = "";
      this.ensureId = "";
      val.forEach((item, index) => {
        this.ensureId += item.id;
        this.ensureId += ",";
        if (index == val.length - 1) {
          this.ensureNames += item.name;
          this.ensureNames += "。";
@@ -848,7 +856,8 @@
          jid: this.form.id,
        },
      }).then((resdata) => {
        this.audios = resdata.data.data.records;
        if (resdata.data.data.records.length > 0)
          this.audios = resdata.data.data.records;
      });
    },
@@ -860,22 +869,28 @@
          jid: this.form.id,
        },
      }).then((resdata) => {
        console.log(resdata.data.data[0], 56569);
        this.security = resdata.data.data[0].List[0];
        this.imgSrc = resdata.data.data[0].tp;
        this.srcList = resdata.data.data[0].tp;
        this.feedbackVideo = resdata.data.data[0].sp[0];
        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.vaddress = res.data.data.vaddress;
        }
        this.oldVideoSatart = true;
      });
    }
    },
  },
};
</script>