lcw

src/views/backOfficeSystem/IntelligentControl/ysMyControl/components/addBkdx.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">布控对象</span>
+      <div>
+        <el-button size="small" type="primary" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="flex">
+      <div :class="dataOrge.gzlid ? 'ww80' : 'ww100'">
+        <div class="form_cnt">
+          <el-form :model="listQuery" :rules="rules" :disabled="disabled" ref="elform" inline :label-width="100"
+            label-position="left">
+            <div style="display: flex; align-items: center;margin-bottom: 10px;">
+              <el-radio-group v-model="listQuery.bkDx" size="large" fill="#6cf" @change="shangeDx">
+                <el-radio-button :label="item.dm" v-for="(item, index) in props.dic.D_GS_BK_DX" :key="index">{{
+                  item.zdmc }}</el-radio-button>
+              </el-radio-group>
+              <el-button type="primary" @click="handleAddPeo" v-if="!disabled" style="margin-left: 10px;">
+                <el-icon style="vertical-align: middle">
+                  <CirclePlus />
+                </el-icon>
+                <span style="vertical-align: middle">新增</span>
+              </el-button>
+            </div>
+            <div class="relative ww100">
+              <MyTable :tableData="listQuery.bkdxList" :tableColumn="tableDate.tableColumn"
+                :tableHeight="tableDate.tableHeight" :key="tableDate.keyCount" :tableConfiger="tableDate.tableConfiger"
+                :controlsWidth="tableDate.controlsWidth">
+                <template #fjZp="{ row }">
+                  <el-image :src="setAddress(row.fjZp)"></el-image>
+                </template>
+                <template #yjdj="{ row }">
+                  <DictTag :tag="false" :value="row.yjdj" :options="props.dic.D_GS_ZDR_YJDJ" />
+                </template>
+                <template #yjbq="{ row }">
+                  <DictTag :tag="false" :value="row.yjbq" :options="props.dic.BD_BK_CLYJBQ" />
+                </template>
+                <template #ryXb="{ row }">
+                  <DictTag :tag="false" :value="row.ryXb" :options="props.dic.D_BZ_XB" />
+                </template>
+                <template #bqList="{ row }">
+                  <span v-if="row.bqList">
+                    <span v-for="(it, idx) in row.bqList" :key="idx"> {{ it.bqMc }}、</span>
+                  </span>
+                </template>
+                <!-- 操作 -->
+                <template #controls="{ row }">
+                  <el-link type="primary">查看档案</el-link>
+                  <el-link type="danger" @click="deleteRow(row)">删除</el-link>
+                </template>
+              </MyTable>
+            </div>
+            <div style="width: 100%;" class="mt25">
+              <el-form-item prop="bkSjKs" label="布控开始时间" label-width="120px">
+                <MOSTY.Date v-model="listQuery.bkSjKs" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="请选择布控开始时间" clearable />
+              </el-form-item>
+              <el-form-item prop="bkSjJs" label="布控结束时间" label-width="120px">
+                <MOSTY.Date v-model="listQuery.bkSjJs" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="请选择布控结束时间" clearable />
+              </el-form-item>
+              <el-form-item prop="czYq" label="处置要求" label-width="60px" style="width:18% ;">
+                <MOSTY.Select v-model="listQuery.czYq" :dictEnum="props.dic.D_GS_BK_CZYQ" placeholder="请选择处置要求"
+                  clearable />
+              </el-form-item>
+              <el-form-item prop="bkDj" label="布控等级" label-width="60px" style="width:18% ;">
+                <MOSTY.Select v-model="listQuery.bkDj" :dictEnum="props.dic.D_GS_SSYJ" placeholder="请选择布控级别"
+                  clearable />
+              </el-form-item>
+            </div>
+
+            <div style="width: 100%;" class="mt10">
+              <el-form-item prop="bkSy" label="布控事由" style="width: 100%;">
+                <MOSTY.Other v-model="listQuery.bkSy" placeholder="请输入布控事由" type="textarea" style="width: 100%;"
+                  clearable />
+              </el-form-item>
+            </div>
+            <div style="width: 100%;" class="mt10">
+              <el-form-item prop="bkfj" label="上传附件" style="width: 100%;">
+                <div>
+                  <MOSTY.Upload :showBtn="true" :limit="10" :isImg="false" :isAll="true" v-model="listQuery.bkfj" />
+                  <div>支持png、jpg、pdf文件上传</div>
+                </div>
+              </el-form-item>
+            </div>
+            <div class="smallTitle">布控范围</div>
+            <div class=" mapSearch flex">
+              <el-select v-model="hzfs" placeholder="请选择布控范围" clearable @change="qhhzfs">
+                <el-option label="区域选择" value="1"></el-option>
+                <el-option label="自定义范围" value="2"></el-option>
+              </el-select>
+              <el-select multiple style="margin-left: 10px;" v-model="bkqyList" placeholder="请选择布控范围" clearable
+                @change="hzfsChage" v-if="hzfs == '1'">
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in bkqyArr" :key="index">{{
+                  item.label
+                }}</el-option>
+              </el-select>
+
+              <el-button type="primary" @click="drawQy" style="margin-left: 10px;" v-else>
+                <el-icon style="vertical-align: middle">
+                  <CirclePlus />
+                </el-icon>
+                <span style="vertical-align: middle">自定义区域</span>
+              </el-button>
+            </div>
+            <div class="ww100 relative mb10"
+              style="height: 60vh;border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden;">
+              <GdMap></GdMap>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <div class="ww20" v-if="dataOrge.gzlid">
+        <ApprovalEcho ref="approvalEcho" />
+      </div>
+    </div>
+
+  </div>
+  <!-- 选择布控人员 -->
+  <BkryDialod :modelValue="chooseVisible_RY" @update:modelValue="chooseVisible_RY = $event" @choosed="choosed"
+    @choosedAdd="choosedAdd" :roleIds="roleIds" />
+  <!-- 选择车辆布控 -->
+  <BkclDialod :modelValue="chooseVisible_CL" @update:modelValue="chooseVisible_CL = $event" @choosed="choosed"
+    @choosedAdd="choosedAdd" :roleIds="roleIds" />
+  <!-- 选择布控群体 -->
+  <BkqtDialod :modelValue="chooseVisible_QT" @update:modelValue="chooseVisible_QT = $event" @choosed="choosed"
+    :roleIds="roleIds" />
+  <BksfzDialod :modelValue="chooseVisible_SFZ" @update:modelValue="chooseVisible_SFZ = $event" @choosed="choosed"
+    :roleIds="roleIds" :bkDx="listQuery.bkDx" @choosedAdd="choosedAdd" />
+</template>
+
+<script setup>
+import { getItem } from "@/utils/storage";
+import BkryDialod from '@/components/ChooseList/ChooseZdr/index.vue';
+import BkqtDialod from '@/components/ChooseList/ChooseQt/index.vue';
+import BkclDialod from '@/components/ChooseList/ChooseCl/index.vue';
+import BksfzDialod from './dolog/sfzLog.vue';
+import GdMap from "@/components/GdMap/index.vue";
+import * as MOSTY from "@/components/MyComponents/index";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { tableColumnList, Zd } from '@/views/backOfficeSystem/ApprovalInformation/tableRow.js'
+import emitter from "@/utils/eventBus.js";
+import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, nextTick, watch, onMounted } from "vue";
+import { queryProcessNode, queryProcessNodeLog, queryProcess } from '@/api/spl'
+import ApprovalEcho from "@/components/flowPath/ApprovalEcho.vue";
+import { useRouter, useRoute } from 'vue-router'
+import { setAddress } from '@/utils/tools.js'
+import { tbGsxtBkId } from "@/api/commit.js";
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  dic: Object
+});
+const route = useRoute()
+const elform = ref()
+const roleIds = ref([]); //角色ID
+const chooseVisible_RY = ref(false); //选择布控人员弹窗
+const chooseVisible_QT = ref(false); //选择布控群体弹窗
+const chooseVisible_CL = ref(false)
+const bkqyArr = ref([]); //布控区域
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const loading = ref(false)
+const addPerson = ref([]) //单独新增的数据
+const listQuery = ref({
+  bkYz: '01',
+  bkdxList: [],
+}); //表单数据
+const rules = reactive({
+  bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
+  bkDx: [{ required: true, message: "请选择布控对象", trigger: "change" }],
+  bkSjKs: [{ required: true, message: "请选择布控开始时间", trigger: "change" }],
+  bkSjJs: [{ required: true, message: "请选择布控结束时间", trigger: "change" }],
+  czJsdwdm: [{ required: true, message: "请选择处置接收单位", trigger: "change" }],
+  bkshrSsbmdm: [{ required: true, message: "请选择审核部门", trigger: "change" }],
+  bksprSsbmdm: [{ required: true, message: "请选择审批部门", trigger: "change" }],
+})
+let tableDate = reactive({
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 200, //操作栏宽度
+  tableColumn: [
+    { label: "照片", prop: "fjZp", showSolt: true },
+    { label: "姓名", prop: "ryXm" },
+    { label: "性别", prop: "ryXb", showSolt: true },
+    { label: "身份证号", prop: "rySfzh" },
+    { label: "户籍地", prop: "ryHjd" },
+    { label: "现居住地址", prop: "ryXjd" },
+    { label: "手机号", prop: "rySjhm" },
+    { label: "虚拟身份", prop: "qtXnsf" },
+    { label: "车牌号", prop: "clCph" },
+    { label: "车辆识别代码", prop: "clCjh" },
+    { label: "特征描述", prop: "qtTzms" },
+    { label: "标签", prop: "bqList", showSolt: true, showOverflowTooltip: true }
+  ]
+});
+
+const title = ref('')
+const disabled = ref(false)
+// 初始化数据
+const init = (type, row) => {
+  listQuery.value.bkfj = [];
+  if (type == 'add') {
+    tableDate.tableConfiger.haveControls = true;
+    disabled.value = false;
+    listQuery.value.bkfqrXm = getItem("USERNAME");
+    listQuery.value.bkfqrSfzh = getItem("idEntityCard");
+    listQuery.value.bkfqrSsbmmc = getItem("deptId")[0].deptName;;
+    listQuery.value.bkfqrSsbmdm = getItem("deptId")[0].deptCode;;
+  }
+  title.value = type == 'add' ? '新增' : type == 'detail' ? '详情' : '编辑';
+  disabled.value = type == 'detail' ? true : false;
+  dialogForm.value = true;
+  if (row) tableDate.tableConfiger.haveControls = false;
+  Zd({ D_GS_SSYJ: props.dic.D_GS_SSYJ, BD_BK_CLYJBQ: props.dic.BD_BK_CLYJBQ })
+
+  get_bkqy_list(row)
+};
+
+// 获取布控区域
+const get_bkqy_list = (row) => {
+  qcckGet({}, '/mosty-gsxt/tbGsxtBkQy/selectList').then(res => {
+    let arr = res || [];
+    bkqyArr.value = arr.map(item => {
+      return { ...item, label: item.qymc, value: item.id }
+    })
+    if (row) getDataById(row.id);
+  })
+}
+const dataOrge = ref({})
+const approvalEcho = ref()
+watch(() => approvalEcho.value, (val) => {
+  if (val) {
+    approvalEcho.value.getWorkflow(dataOrge.value.gzlid)
+  }
+
+}, { deep: true })
+
+
+watch(() => approvalEcho.value, (val) => {
+  if (val) {
+    console.log(approvalEcho.value);
+    approvalEcho.value.getWorkflow(dataOrge.value.gzlid)
+  }
+
+}, { deep: true })
+
+
+const shangeDx = () => {
+  tableDate.tableColumn = tableColumnList[listQuery.value.bkDx]
+  listQuery.value.bkDxxx = '';
+  listQuery.value.bkdxList = [];
+  roleIds.value = [];
+  addPerson.value = []
+}
+// 删除数据
+const deleteRow = (row) => {
+  roleIds.value = roleIds.value.filter(id => id != row.id);
+  addPerson.value = addPerson.value.filter(it => it.id != row.id);
+  listQuery.value.bkdxList = listQuery.value.bkdxList.filter(it => it.id != row.id);
+}
+// 单独新增的数据
+const choosedAdd = (item) => {
+  let obj = {}
+  if (listQuery.value.bkDx !== '02') {
+    obj = { id: item.id, fjZp: item.fjZp, ryXm: item.ryXm, ryXb: item.ryXb, rySfzh: item.rySfzh, ryHjd: item.hjdXz, ryXjd: item.xzdXz, rySjhm: item.ryLxdh, qtXnsf: item.qtXnsf, clCjh: item.clCjh, clCph: item.clCph, qtTzms: item.qtTzms, bqList: item.bqList }
+  } else {
+    obj = {
+      clCph: item.hphm, clCjh: item.clCjh, clSyr: item.clSyr, clSyrsfzh: item.clSyrsfzh,
+      clYs: item.clYs, gxSsbmmc: item.gxSsbmmc, bqList: item.bqList
+    }
+  }
+  switch (listQuery.value.bkDx) {
+    default:
+      obj = { ...item }
+      break;
+  }
+  addPerson.value.push(obj);//缓存的数据
+  if (!listQuery.value.bkdxList) listQuery.value.bkdxList = [];
+  listQuery.value.bkdxList.unshift(obj);
+  console.log(listQuery.value.bkdxList);
+
+}
+
+// 选择重点人
+const choosed = (val) => {
+  tableDate.tableColumn = tableColumnList[listQuery.value.bkDx]
+  if (listQuery.value.bkDx == '01') {// 人员
+    roleIds.value = val.map(it => it.id);
+    let arr = val.map(item => {
+      let bqArr = item.bqList || [];
+      let bqs = bqArr.map(v => {
+        return { bqZl: v.bqZl, bqId: v.bqId, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm }
+      })
+      return {
+        id: item.id, fjZp: item.fjZp, ryXm: item.ryXm, ryXb: item.ryXb,
+        rySfzh: item.rySfzh, ryHjd: item.hjdXz, ryXjd: item.xzdXz,
+        rySjhm: item.ryLxdh, qtXnsf: item.qtXnsf, clCjh: item.clCjh,
+        clCph: item.clCph, qtTzms: item.qtTzms, bqList: bqs, yjdj: item.zdrYjdj, ssbmdm: item.zrSsbmdm
+      }
+    })
+    listQuery.value.bkdxList = [...addPerson.value, ...arr];
+  } else if (listQuery.value.bkDx == '03') {
+    roleIds.value = val.map(it => it.id);
+    let arr = val.map(item => {
+
+      return {
+        clCph: item.hphm, clCjh: item.clCjh, clSyr: item.clSyr, clSyrsfzh: item.clSyrsfzh,
+        clYs: item.clYs, gxSsbmmc: item.gxSsbmmc, yjbq: item.yjbq, yjdj: item.yjdj, ssbmdm: item.zrSsbmdm
+      }
+    })
+    listQuery.value.bkdxList = [...addPerson.value, ...arr];
+
+  }
+  else {// 群体
+    listQuery.value.bkDxxx = (val.map(it => it.id)).join(',');
+    let peolist = []
+    val.forEach(item => {
+      if (item.zdryList) peolist = peolist.concat(item.zdryList)
+    })
+    let brrPeo = peolist.map(item => {
+      let bqArr = item.bqList || [];
+      let bqs = bqArr.map(v => {
+        return { bqZl: v.bqZl, bqId: v.bqId, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm }
+      })
+      return {
+        id: item.id, fjZp: item.fjZp, ryXm: item.ryXm, ryXb: item.ryXb,
+        rySfzh: item.rySfzh, ryHjd: item.hjdXz, ryXjd: item.xzdXz,
+        rySjhm: item.ryLxdh, qtXnsf: item.qtXnsf, clCjh: item.clCjh,
+        clCph: item.clCph, qtTzms: item.qtTzms, bqList: bqs,
+        yjdj: item.zdrYjdj, ssbmdm: item.zrSsbmdm
+      }
+    })
+    listQuery.value.bkdxList = brrPeo;
+  }
+};
+
+// 选择人员
+const handleAddPeo = () => {
+
+  if (!listQuery.value.bkDx) return proxy.$message({ type: "warning", message: '请选择布控对象' });
+  switch (listQuery.value.bkDx) {
+    case '01':
+      chooseVisible_RY.value = true
+      break;
+    case '04':
+    case '05':
+    case '06':
+    case '07':
+    case '08':
+    case '09':
+    case '10':
+      chooseVisible_SFZ.value = true
+      break;
+    case '03':
+      chooseVisible_CL.value = true
+      break;
+    case '02':
+      chooseVisible_QT.value = true
+      break;
+  }
+}
+
+
+// 提交
+const submit = () => {
+  elform.value.validate((validate) => {
+    if (!validate) return;
+    let bklx = ''
+    if (route.name == 'myControl') {
+      bklx = '01'
+    } else {
+      bklx = '02'
+    }
+    let params = { ...listQuery.value, bklx: bklx };
+    params.bkfj = params.bkfj ? params.bkfj.join(',') : '';
+    params.bkdxList = params.bkdxList ? params.bkdxList : [];
+    params.bkdxList.forEach(item => {
+      if (Array.isArray(item.fjZp)) {
+        item.fjZp = item.fjZp ? item.fjZp.join(',') : ''
+      } else {
+        item.fjZp = item.fjZp
+      }
+
+    })
+
+
+    loading.value = true;
+    let url = title.value == '新增' ? "/mosty-gsxt/tbGsxtBk/save" : "/mosty-gsxt/tbGsxtBk/update";
+    qcckPost(params, url).then((res) => {
+      proxy.$message({ type: "success", message: "布控成功" });
+      emit("change");
+      loading.value = false;
+      close();
+    }).catch(() => {
+      loading.value = false;
+    });
+  });
+};
+onMounted(() => {
+  emitter.on("coordString", (res) => {
+    listQuery.value.bkqyList = [{
+      pgis: res.coord[0],
+    }]
+  });
+});
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
+  addPerson.value = [];
+  roleIds.value = []
+  dataOrge.value = {}
+};
+// 选择身份证
+const chooseVisible_SFZ = ref(false)
+// 获取布控信息的工作流
+const workflow = ref()
+const getWorkflow = async (id) => {
+  const promes = {
+    processId: id
+  }
+  const proNode = await queryProcessNode(promes)
+  const proNodeLog = await queryProcessNodeLog(promes)
+  const process = await queryProcess(promes)
+  workflow.value = proNode.rows.map(item => {
+    const log = proNodeLog.rows.filter(items => item.nodeId == items.nodeId)
+
+    if (item.eventType == '0') {
+      return {
+        ...item,
+        log: {
+          userData: item.userData ? JSON.parse(item.userData) : JSON.parse(process.rows[0].processData).orgNameData,
+          userName: process.rows[0].userName,
+          xtLrsj: process.rows[0].xtLrsj,
+          processStatus: process.rows[0].processStatus,
+        }
+      }
+    } else {
+      return {
+        ...item,
+        orgNameData: JSON.parse(log[0].userData),
+        log: log
+      }
+    }
+  })
+
+};
+const drawQy = () => {
+  emitter.emit("drawShape", {
+    flag: "select_point",
+    type: "polygon",
+    isclear: true
+  });
+}
+const hzfs = ref('1')
+const bkqyList = ref()
+const qhhzfs = () => {
+  listQuery.value.bkqyList = []
+  bkqyList.value = []
+  emitter.emit('removeBj')
+  emitter.emit('removeEara', "select_point")
+}
+
+const hzfsChage = (val) => {
+  const qyList = []
+  console.log(val);
+
+  listQuery.value.bkqyList = val.map((item, index) => {
+    const data = bkqyArr.value.filter(items => items.id == item)[0]
+    console.log(data);
+
+    if (data) {
+      qyList.push(data.pgis)
+    }
+    console.log(item);
+    return {
+      bkQyid: data.id,
+      pgis: data.pgis
+    }
+  })
+  setTimeout(() => {
+    changeXzqh(qyList)
+  }, 2000)
+}
+const changeXzqh = (val) => {
+  // 先移除已有的边界
+  emitter.emit('removeBj')
+  // 如果传入的是多个区域数据（二维数组）
+  const features = val.map((area, index) => ({
+    geometry: {
+      type: "Polygon",
+      coordinates: [area] // 确保格式正确
+    },
+    properties: {
+    },
+    type: "Feature"
+  }))
+  // 循环为每个区域创建单独的多边形，这样可以设置不同的样式
+  features.forEach((feature, index) => {
+    emitter.emit('setBoundarys', {
+      data: {
+        type: "FeatureCollection",
+        features: [feature]
+      },
+      color: '#cf1010',
+      fillColor: 'rgba(255, 255, 255,0)',
+    })
+  })
+}
+// 根据id获取详情
+const getDataById = (id) => {
+  qcckGet({}, '/mosty-gsxt/tbGsxtBk/selectVoById/' + id).then(res => {
+    res.bkfj = res.ossList || [];
+    listQuery.value = res || {}
+    dataOrge.value = res
+    if (res.bkqyList) {
+      bkqyList.value = res.bkqyList ? res.bkqyList.map(v => {
+        {
+          if (v.bkQyid) {
+            hzfs.value = '1'
+          } else {
+            hzfs.value = '2'
+          }
+          return v.bkQyid
+        }
+
+      }) : [];
+      const data = res.bkqyList.map(item => {
+        return item.pgis
+      })
+      setTimeout(() => {
+        console.log(data);
+        changeXzqh(data)
+        // listQuery.value.bkDxxx = data.join(',')
+      }, 2000);
+    }
+
+
+    tableDate.tableColumn = tableColumnList[res.bkDx ? res.bkDx : '01']
+  })
+}
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.smallTitle {
+  width: 100%;
+  font-size: 15px;
+  line-height: 50px;
+  font-weight: 550;
+  color: #606266;
+}
+
+.mapSearch {
+
+  margin-bottom: 10px;
+}
+
+.dialog {
+  ::v-deep .el-form-item--default {
+    margin: 0 1% 0 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
+::v-deep .avatar-uploader {
+  display: flex;
+}
+
+::v-deep .el-upload--picture-card i {
+  width: 156px;
+}
+
+.depBox {
+  border: 1px solid #e9e9e9;
+  width: 305px;
+  padding: 0 0 0 4px;
+  border-radius: 4px;
+
+  ::v-deep .el-input__inner {
+    border: none;
+  }
+
+  ::v-deep .el-cascader .el-input.is-focus .el-input__inner {
+    border-color: transparent !important;
+  }
+
+  ::v-deep .el-input__inner:focus {
+    box-shadow: none;
+  }
+
+  ::v-deep .el-input.is-disabled .el-input__inner {
+    border-color: transparent !important;
+  }
+
+}
+
+/* 使用深度选择器覆盖子组件样式 */
+::v-deep .el-step.is-vertical .el-step__title {
+  color: #000000 !important;
+  border-color: #000000 !important;
+}
+
+::v-deep .el-step__description {
+  padding: 0 !important;
+}
+
+::v-deep .el-step__description.is-wait {
+
+  color: #000000 !important;
+  border-color: #000000 !important;
+}
+
+.el-step__title.is-wait {
+  color: #000000 !important;
+  border-color: #000000 !important;
+}
+
+::v-deep .el-step__head.is-wait {
+  color: #000000 !important;
+  border-color: #000000 !important;
+}
+
+::v-deep .el-step__line {
+  background-color: #000000 !important;
+}
+
+.nodeBox {
+  width: 80%;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: aliceblue;
+
+  .nodeorgNameTg {
+    background-color: #1abe20;
+  }
+
+  .nameTag {
+    line-height: 30px;
+    padding: 0 10px;
+  }
+
+  .nodeorgNameDd {
+    background-color: #18a2dd;
+  }
+
+  .fontColor {
+    color: #1abe20;
+  }
+
+  .fontColorDd {
+    color: #18a2dd;
+  }
+}
+
+::v-deep .el-form-item__label {
+  padding: 0;
+
+}
+
+::v-deep .el-radio-button__inner {
+  color: #000 !important;
+}
+</style>