zhangzengfei
2022-08-06 e018e23189eb9520f6f28ae515b17333351267ff
src/views/report/components/FormArea.vue
@@ -1,15 +1,8 @@
<template>
  <div class="FormArea">
    <el-form
      :model="gb28181"
      :rules="rules"
      label-position="left"
      label-width="90px"
      class="alarmSetting"
      ref="gb28181"
    >
    <el-form :model="reportTask" label-position="left" label-width="90px" class="alarmSetting" ref="report-task">
      <el-form-item class="selectItem" label="事件名称">
        <el-select class="h32" v-model="locationCity.province" size="small" placeholder="请选择事件">
        <el-select class="h32" v-model="reportTask.taskName" size="small" placeholder="请选择事件" style="width: 400px">
          <el-option
            v-for="item in eventsOptions"
            :key="item.value"
@@ -20,13 +13,7 @@
        </el-select>
      </el-form-item>
      <el-form-item class="selectItem" label="事件等级">
        <el-select
          class="h32"
          v-model="locationCity.level"
          size="small"
          placeholder="请选择"
          :disabled="gb28181.idType === 0"
        >
        <el-select class="h32" v-model="reportTask.level" size="small" placeholder="请选择" style="width: 400px">
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
@@ -38,184 +25,178 @@
      </el-form-item>
      <el-form-item label="关联区域">
        <el-cascader
          size="mini"
          style="width:400px"
          v-model="tmpOrg"
          :options="menu"
          :props="{ value: 'id', label: 'name', checkStrictly: true }"
          collapse-tags
          clearable
          @change="handleTreeChange"
          ref="cascader"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="责任人" prop="person">
        <el-input
          class="h32"
          v-model="gb28181.PublicId"
          v-model="reportTask.person"
          placeholder="请输入"
          size="small"
          :disabled="gb28181.idType === 1"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input
          class="h32"
          v-model="reportTask.tel"
          placeholder="请输入"
          size="small"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="责任人" prop="GbServerPort">
        <el-input
          class="h32"
          v-model.number="gb28181.GbServerPort"
          placeholder="请输入"
          size="small"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="GbServerPort">
        <el-input
          class="h32"
          v-model.number="gb28181.GbServerPort"
          placeholder="请输入"
          size="small"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="推送方式">
        <el-input
          class="h32"
          v-model="gb28181.Password"
          placeholder="请输入"
          size="small"
          :disabled="!gb28181.IsAuth"
        ></el-input>
      <!-- <el-form-item label="推送方式">
        <el-select v-model="pushType" placeholder="请选择" style="width: 400px">
          <el-option label="短信" value="msg"> </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="开启任务">
        <el-switch v-model="reportTask.enable" active-color="#13ce66" inactive-color="#bbbbbb"> </el-switch>
      </el-form-item>
    </el-form>
    <div class="btnArea">
      <div class="button cancel" @click="$emit('close')">取消</div>
      <div class="button submit" @click="submitGB28281">保存</div>
      <div class="button submit" @click="submit">保存</div>
    </div>
  </div>
</template>
<script>
import { getGB28181Config, saveGB28181Config, getGb28181AreaList, newGb28181ID } from "@/api/Gb28181"
import { isPort, isIPv4 } from "@/scripts/validate"
import { createTask, updateTask } from "@/api/report"
export default {
  props: {
    id: {}
  },
  created() {
    this.initGB28181Conf()
    id: {
      type: String,
      default: ""
    },
    node: {},
    camera: {},
    menu: {}
  },
  data() {
    return {
      gb28181: {},
      rules: {
        ip: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
          },
          { validator: isIPv4, trigger: "change" }
        ],
        ServerIp: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
          },
          { validator: isIPv4, trigger: "change" }
        ],
        ServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
          },
          { validator: isPort, trigger: "change" }
        ],
        GbServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
          },
          { validator: isPort, trigger: "change" }
        ]
      },
      locationCity: {
        province: "",
        city: "",
        county: "",
        provinceOptions: [],
        cityOptions: [],
        countyOptions: []
      },
      reportTask: {},
      eventsOptions: [
        { value: "fire", label: "明 火" },
        { value: "smoke", label: "烟 雾" },
        { value: "work", label: "未穿工服" },
        { value: "head", label: "未戴安全帽" },
        { value: "dowork", label: "离岗" },
        { value: "juji", label: "人员聚集" }
        { value: "明火", label: "明火" },
        { value: "烟雾", label: "烟雾" },
        { value: "离岗", label: "离岗" },
        { value: "人员聚集", label: "人员聚集" },
        { value: "未穿工装", label: "未穿工装" },
        { value: "未戴安全帽", label: "未戴安全帽" }
      ],
      levelOptions: [
        { value: "1", label: "一级" },
        { value: "2", label: "二级" },
        { value: "3", label: "三级" },
        { value: "4", label: "四级" },
        { value: "5", label: "五级" }
      ]
        { value: "一级", label: "一级" },
        { value: "二级", label: "二级" },
        { value: "三级", label: "三级" },
        { value: "四级", label: "四级" },
        { value: "五级", label: "五级" }
      ],
      pushType: "msg",
      selectedOrg: {},
      tmpOrg: []
    }
  },
  mounted() {
    this.reportTask = this.node
  },
  methods: {
    initGB28181Conf() {
      getGB28181Config(this.id).then((rsp) => {
        if (rsp && rsp.success) {
          this.gb28181 = rsp.data
          //this.gb28181.idType = 0;
          this.$set(this.gb28181, "idType", 0)
          this.$refs["gb28181"].resetFields()
        }
      })
      getGb28181AreaList().then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.provinceOptions = rsp.data.list
        }
      })
    handleTreeChange(value) {
      this.selectedOrg = value[value.length - 1]
    },
    submitGB28281() {
      this.$refs["gb28181"].validate((valid) => {
        if (valid) {
          saveGB28181Config(this.gb28181).then((rsp) => {
            if (rsp && rsp.success) {
              console.log("1212112")
              this.$notify({
                type: "success",
                message: "GB28181设置保存成功"
              })
            }
    collSelectedNodes() {
      let selectedNodeId = this.selectedOrg
      let selectedNode = {}
      let orgNodeIds = []
      if (this.selectedOrg == "") {
        return orgNodeIds
      }
      function findNode(node) {
        if (node.id == selectedNodeId) {
          selectedNode = node
          return
        }
        if (node.children) {
          node.children.forEach((n) => {
            findNode(n)
          })
        }
      }
      function collNode(node) {
        if (node.type != "MENU") {
          orgNodeIds.push(node.id)
          return
        }
        if (node.children) {
          node.children.forEach((n) => {
            collNode(n)
          })
        }
      }
      this.camera.forEach((n) => {
        findNode(n)
      })
      collNode(selectedNode)
      return orgNodeIds
    },
    submit() {
      if (this.reportTask.tel.length != 11) {
        this.$message.error("手机号码不正确")
        return
      }
      this.$refs["report-task"].validate((valid) => {
        if (valid) {
          if (this.tmpOrg.length > 0) {
            this.reportTask["cameraIds"] = this.collSelectedNodes().join(",")
            this.reportTask.org = this.$refs["cascader"].getCheckedNodes()[0].pathLabels.join("/")
          }
          if (this.id == "") {
            createTask(this.reportTask).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "保存成功"
                })
                this.$emit("close")
              }
            })
          } else {
            updateTask(this.reportTask).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "保存成功"
                })
                this.$emit("close")
              }
            })
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    changeProvince() {
      let pid = this.locationCity.province
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.cityOptions = rsp.data.list
          this.locationCity.city = this.locationCity.cityOptions[0].id
          this.changeCity()
        }
      })
    },
    changeCity() {
      let pid = this.locationCity.city
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.countyOptions = rsp.data.list
          this.locationCity.county = this.locationCity.countyOptions[0].id
        }
      })
    },
    newGBID() {
      let cCode = this.locationCity.county + ""
      newGb28181ID({ code: cCode }).then((rsp) => {
        if (rsp && rsp.success) {
          this.gb28181.PublicId = rsp.data.code
        }
      })
    }