| | |
| | | <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" |
| | |
| | | </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" |
| | |
| | | </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: {} |
| | | id: { |
| | | type: String, |
| | | default: "" |
| | | }, |
| | | created() { |
| | | this.initGB28181Conf() |
| | | 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) => { |
| | | 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) { |
| | | saveGB28181Config(this.gb28181).then((rsp) => { |
| | | 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) { |
| | | console.log("1212112") |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "GB28181设置保存成功" |
| | | 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 |
| | | } |
| | | }) |
| | | } |