任务追踪和树形背景

liuyg

2021-07-16 06f3288fe2add882234fe4ac904f885280c0699b

任务追踪和树形背景

 src/styles/element-ui.scss

@@ -171,7 +171,7 @@
  color: $fontColor !important;
}
.el-tree {
  background-color: $inputB !important;
  background-color: $mainB !important;
  color: $fontColor !important;
}
.el-table th {

 src/views/policeTracking/policeTracking.vue

@@ -30,7 +30,6 @@
              class="policeForm"
              label-width="100px"
              style="
                background: #fff;
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
@@ -61,10 +60,7 @@
              <el-row>
                <el-col span="24">
                  <el-form-item label="备注">
                    <el-input
                      v-model="form.bz"
                      autocomplete="off"
                    ></el-input>
                    <el-input v-model="form.bz" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
@@ -85,24 +81,29 @@
              </el-row>
              <el-row>
                <el-col span="12">
                  <avue-form :option="securityArritem" v-model="form"></avue-form>
                  <avue-form
                    :option="securityArritem"
                    v-model="form"
                  ></avue-form>
                </el-col>
<!--                <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.alarmPeople"-->
                <!--                      autocomplete="off"-->
                <!--                    ></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
              </el-row>
            </el-form>

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

          </el-card>

          <div
@@ -131,7 +132,6 @@
              size="mini"
              label-width="100px"
              style="
                background: #fff;
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
@@ -300,239 +300,202 @@
</template>

<script>
  import axios from "axios";
  import {getList, getclient} from "@/api/real/real";
  import {update} from "@/api/real/real";
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",
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",
            },
            {
              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",
            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",
            },
            {
              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",
            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",
            },
          ],
        }, securityArritem: {
          menuBtn: false,
          column: [
            {
              label: "处警员",
              prop: "securityArr",
              type: "tree",
              multiple: true,
              leafOnly: "",
              span: 24,
              dicUrl: "/api/catalogs/catalogs/getBigTree",
              props: {
                label: "title"
              },
              rules: [{
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 1,
            labelWidth: "0",
            className: "cityClassSelect",
          },
        ],
      },
      securityArritem: {
        menuBtn: false,
        column: [
          {
            label: "处警员",
            prop: "securityArr",
            type: "tree",
            multiple: true,
            leafOnly: "",
            span: 24,
            dicUrl: "/api/catalogs/catalogs/getBigTree",
            props: {
              label: "title",
            },
            rules: [
              {
                required: true,
                message: "请选择处警员",
                trigger: "blur"
              }],
            },
          ],
        },
        tableData: [],
        multipleSelection: [],
        ensureNames: "",
        ensureId: "",
        baseUrl: "",
        oldVideoSatart: false,
        vaddress: null,
        audios: [],
        feedbackVideo: "",
      };
    },
    created() {
      this.form = this.$route.query;
      if (
        !(
          this.form.securityArr &&
          this.form.securityArr != null &&
          this.form.securityArr != undefined &&
          this.form.securityArr.length > 0
        )
      ) {
        this.form.securityArr = [];
      }
      this.updatedPageData();
      this.vaddress = this.form.vaddress;
      this.getReceivingAlarm();
      this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}`;
    },
    mounted() {
      this.getAudios();
      this.getImgAndVideo();
      this.$refs.mapDiv.onload = () => {
        window.frames[1].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);
        }
                trigger: "blur",
              },
            ],
          },
        ],
      },
      tableData: [],
      multipleSelection: [],
      ensureNames: "",
      ensureId: "",
      baseUrl: "",
      oldVideoSatart: false,
      vaddress: null,
      audios: [],
      feedbackVideo: "",
    };
  },
  created() {
    this.form = this.$route.query;
    if (
      !(
        this.form.securityArr &&
        this.form.securityArr != null &&
        this.form.securityArr != undefined &&
        this.form.securityArr.length > 0
      )
    ) {
      this.form.securityArr = [];
    }
    this.updatedPageData();
    this.vaddress = this.form.vaddress;
    this.getReceivingAlarm();
    this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}`;
  },
  mounted() {
    this.getAudios();
    this.getImgAndVideo();
    this.$refs.mapDiv.onload = () => {
      window.frames[1].init("AlertSecurity", {
        x: this.form.jd,
        y: this.form.wd,
      });

      if (this.form.jtype != 2) {
        this.toggleSelection(arr);
    };
  },
  updated() {
    var arr = [];
    this.tableData.forEach((item) => {
      if (item.id == this.form.oneId) {
        arr.push(item);
      }
    },
    methods: {
      getDate() {
        // 当前时间
        var timestamp = Date.parse(new Date());
        var serverDate = new Date(timestamp);
    });

        // 本周周一的时间
        var mondayTime =
          timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
        var mondayData = new Date(mondayTime);
        //年
        var mondayY = mondayData.getFullYear();
        //月
        var mondayM =
          mondayData.getMonth() + 1 < 10
            ? "0" + (mondayData.getMonth() + 1)
            : mondayData.getMonth() + 1;
        //日
        var mondayD =
          mondayData.getDate() < 10
            ? "0" + mondayData.getDate()
            : mondayData.getDate();
        // 当前时间
        var currentData = new Date(timestamp);
        //年
        var currentY = currentData.getFullYear();
        //月
        var currentM =
          currentData.getMonth() + 1 < 10
            ? "0" + (currentData.getMonth() + 1)
            : currentData.getMonth() + 1;
        //日
        var currentD =
          currentData.getDate() < 10
            ? "0" + currentData.getDate()
            : currentData.getDate();
        //时
        var currenH =
          currentData.getHours() < 10
            ? "0" + currentData.getHours()
            : currentData.getHours();
        //分
        var currenM =
          currentData.getMinutes() < 10
            ? "0" + currentData.getMinutes()
            : currentData.getMinutes();
        //秒
        var currenS =
          currentData.getSeconds() < 10
            ? "0" + currentData.getSeconds()
            : currentData.getSeconds();
    if (this.form.jtype != 2) {
      this.toggleSelection(arr);
    }
  },
  methods: {
    getDate() {
      // 当前时间
      var timestamp = Date.parse(new Date());
      var serverDate = new Date(timestamp);

        return {
          day: {
            beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          week: {
            beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          month: {
            beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
            endTime:
              currentY +
              "-" +
              currentM +
              "-" +
              currentD +
              " " +
              currenH +
              ":" +
              currenM +
              ":00",
          },
          current:
      // 本周周一的时间
      var mondayTime =
        timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
      var mondayData = new Date(mondayTime);
      //年
      var mondayY = mondayData.getFullYear();
      //月
      var mondayM =
        mondayData.getMonth() + 1 < 10
          ? "0" + (mondayData.getMonth() + 1)
          : mondayData.getMonth() + 1;
      //日
      var mondayD =
        mondayData.getDate() < 10
          ? "0" + mondayData.getDate()
          : mondayData.getDate();
      // 当前时间
      var currentData = new Date(timestamp);
      //年
      var currentY = currentData.getFullYear();
      //月
      var currentM =
        currentData.getMonth() + 1 < 10
          ? "0" + (currentData.getMonth() + 1)
          : currentData.getMonth() + 1;
      //日
      var currentD =
        currentData.getDate() < 10
          ? "0" + currentData.getDate()
          : currentData.getDate();
      //时
      var currenH =
        currentData.getHours() < 10
          ? "0" + currentData.getHours()
          : currentData.getHours();
      //分
      var currenM =
        currentData.getMinutes() < 10
          ? "0" + currentData.getMinutes()
          : currentData.getMinutes();
      //秒
      var currenS =
        currentData.getSeconds() < 10
          ? "0" + currentData.getSeconds()
          : currentData.getSeconds();

      return {
        day: {
          beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
@@ -542,216 +505,250 @@
            currenH +
            ":" +
            currenM +
            ":00",
        },
        week: {
          beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
            "-" +
            currentD +
            " " +
            currenH +
            ":" +
            currenS,
        };
      },
      onSubmit() {
        var that = this;

        var userId = JSON.parse(
          window.localStorage.getItem("群防群控后台管理系统-userInfo")
        ).content.real_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'
          });
        }



      },

      getReceivingAlarm() {
        axios
          .get(`/api/operation/list?jid=${this.form.id}`)
          .then((res) => {
            this.receivingList = res.data.data.records;
          });
      },

      getList() {
        var that = this;
      },

      handleSelectionChange(val) {
        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 += "。";
          } else {
            this.ensureNames += item.name;
            this.ensureNames += "、";
          }
        });

        this.multipleSelection = val;
      },

      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
        });
      },
            currenM +
            ":00",
        },
        month: {
          beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
          endTime:
            currentY +
            "-" +
            currentM +
            "-" +
            currentD +
            " " +
            currenH +
            ":" +
            currenM +
            ":00",
        },
        current:
          currentY +
          "-" +
          currentM +
          "-" +
          currentD +
          " " +
          currenH +
          ":" +
          currenM +
          ":" +
          currenS,
      };
    },
  };
    onSubmit() {
      var that = this;

      var userId = JSON.parse(
        window.localStorage.getItem("群防群控后台管理系统-userInfo")
      ).content.real_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",
        });
      }
    },

    getReceivingAlarm() {
      axios.get(`/api/operation/list?jid=${this.form.id}`).then((res) => {
        this.receivingList = res.data.data.records;
      });
    },

    getList() {
      var that = this;
    },

    handleSelectionChange(val) {
      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 += "。";
        } else {
          this.ensureNames += item.name;
          this.ensureNames += "、";
        }
      });

      this.multipleSelection = val;
    },

    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">
  .el-col {
    height: calc(100% - 5px);
.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;
  }
}

  .trackClass {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
  }
.audios-box,
.scene-image-box {
  line-height: 32px !important;
  height: auto;
  max-height: 200px;
  overflow-y: auto;

  .receiving-alarm-box {
    line-height: 32px !important;
    height: 200px;
    overflow-y: auto;
  .el-card__body {
    display: flex;
    padding: 0 10px !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .el-card__body {
      padding: 0 10px !important;
    .x-audio-wrap.inline {
      margin: 10px;
    }

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

  .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;
  }
#old_video::-webkit-media-controls-timeline {
  display: block;
}
</style>