|  | @@ -0,0 +1,141 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="rule-type">
 | 
	
		
			
				|  |  | +    <DialogCom
 | 
	
		
			
				|  |  | +      title="设置任务关联摄像机"
 | 
	
		
			
				|  |  | +      :visible.sync="isShow"
 | 
	
		
			
				|  |  | +      @close="onHide"
 | 
	
		
			
				|  |  | +      width="800px"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <div class="page-body">
 | 
	
		
			
				|  |  | +        <el-form
 | 
	
		
			
				|  |  | +          :model="formData"
 | 
	
		
			
				|  |  | +          :rules="formDataRules"
 | 
	
		
			
				|  |  | +          size="small"
 | 
	
		
			
				|  |  | +          ref="form"
 | 
	
		
			
				|  |  | +          label-position="right"
 | 
	
		
			
				|  |  | +          label-width="150px"
 | 
	
		
			
				|  |  | +          label-prefix=":"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <el-form-item label="任务名称" prop="bindMissionId">
 | 
	
		
			
				|  |  | +            <el-select
 | 
	
		
			
				|  |  | +              label="任务名称"
 | 
	
		
			
				|  |  | +              v-model="formData.bindMissionId"
 | 
	
		
			
				|  |  | +              placeholder="请选择任务名称"
 | 
	
		
			
				|  |  | +              clearable
 | 
	
		
			
				|  |  | +              style="width: 80%;"
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +            <el-option
 | 
	
		
			
				|  |  | +                    v-for="dict in deviceTypes"
 | 
	
		
			
				|  |  | +                    :key="dict.value"
 | 
	
		
			
				|  |  | +                    :label="dict.label"
 | 
	
		
			
				|  |  | +                    :value="dict.value"
 | 
	
		
			
				|  |  | +                  ></el-option>
 | 
	
		
			
				|  |  | +            </el-select>
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +        </el-form>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <div slot="footer" class="dialog-footer">
 | 
	
		
			
				|  |  | +        <el-button type="primary" @click="onSubmit">确定</el-button>
 | 
	
		
			
				|  |  | +        <el-button @click="isShow = false">取消</el-button>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </DialogCom>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { mapState, mapMutations, mapGetters } from "vuex";
 | 
	
		
			
				|  |  | +import {missionTypeList,bindMission} from "@/api/iot/diagnoseMission";
 | 
	
		
			
				|  |  | +import { listIdName } from "@/api/system/device";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  dicts: ["alarm_deal_type"],
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      id: null,
 | 
	
		
			
				|  |  | +      isShow: false,
 | 
	
		
			
				|  |  | +      formData: this.reset(),
 | 
	
		
			
				|  |  | +      formDataRules: {
 | 
	
		
			
				|  |  | +        bindMissionId: [{ required: true, message: "请选择任务名称" }]
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      // 查询参数
 | 
	
		
			
				|  |  | +      queryParams: {
 | 
	
		
			
				|  |  | +        checkSub: true,
 | 
	
		
			
				|  |  | +        missionCode: null,
 | 
	
		
			
				|  |  | +        state: null,
 | 
	
		
			
				|  |  | +        bindMissionId: null,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      deviceTypes: [],
 | 
	
		
			
				|  |  | +      labelStyle: {
 | 
	
		
			
				|  |  | +        color: "#000",
 | 
	
		
			
				|  |  | +        "text-align": "center",
 | 
	
		
			
				|  |  | +        height: "40px",
 | 
	
		
			
				|  |  | +        "min-width": "150px",
 | 
	
		
			
				|  |  | +        "word-break": "keep-all",
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  props: {},
 | 
	
		
			
				|  |  | +  computed: {
 | 
	
		
			
				|  |  | +    ...mapGetters(["orgId"]),
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    ...mapMutations([]),
 | 
	
		
			
				|  |  | +    initDeviceTypeList(){
 | 
	
		
			
				|  |  | +          missionTypeList()
 | 
	
		
			
				|  |  | +            .then((r) => {
 | 
	
		
			
				|  |  | +              // 使用 map 而不是 filter 进行数据转换
 | 
	
		
			
				|  |  | +              const transformedList = r.map((item) => ({
 | 
	
		
			
				|  |  | +                value: item.value,
 | 
	
		
			
				|  |  | +                label: item.label,
 | 
	
		
			
				|  |  | +                type: item.type,
 | 
	
		
			
				|  |  | +              }));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +              // 将转换后的数据推送到 this.deviceTypeList
 | 
	
		
			
				|  |  | +              this.deviceTypes.push(...transformedList);
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            .catch((error) => {
 | 
	
		
			
				|  |  | +              // 处理错误
 | 
	
		
			
				|  |  | +              console.error('Error fetching device type list:', error);
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    reset() {
 | 
	
		
			
				|  |  | +      return {
 | 
	
		
			
				|  |  | +        bindMissionId:null,
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async show(queryParams, deviceTypes) {
 | 
	
		
			
				|  |  | +      this.queryParams = queryParams;
 | 
	
		
			
				|  |  | +      this.deviceTypes.push(deviceTypes);
 | 
	
		
			
				|  |  | +      this.isShow = true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 事件
 | 
	
		
			
				|  |  | +    onHide() {
 | 
	
		
			
				|  |  | +      this.$refs.form.resetFields();
 | 
	
		
			
				|  |  | +      this.formData = this.reset();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onSubmit() {
 | 
	
		
			
				|  |  | +      this.$refs.form.validate(async (isValidate) => {
 | 
	
		
			
				|  |  | +        if (!isValidate) return;
 | 
	
		
			
				|  |  | +        this.queryParams.bindMissionId = this.formData.bindMissionId;
 | 
	
		
			
				|  |  | +        await bindMission(this.queryParams);
 | 
	
		
			
				|  |  | +        this.$emit("success");
 | 
	
		
			
				|  |  | +        this.isShow = false;
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +      this.initDeviceTypeList();
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted() {},
 | 
	
		
			
				|  |  | +  components: { },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.brand_info {
 | 
	
		
			
				|  |  | +  .el-form {
 | 
	
		
			
				|  |  | +    width: 600px;
 | 
	
		
			
				|  |  | +    padding-top: 40px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |