feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/job/components/SearchBox.vue

@@ -1,429 +1,548 @@
<template>
   <div class="search-box-test" :class="{ 'is-expand': isExpand }">
      <el-form :model="searchForm" inline>
         <div class="search-first">
            <el-form-item>
               <el-input v-model="searchForm.key_word" placeholder="请输入任务编号/名称" clearable />
            </el-form-item>
            <el-form-item label="行政区划:">
               <el-tree-select
                  popper-class="custom-tree-select"
                  v-model="searchForm.area_code"
                  :data="deptTreeData"
                  :default-expanded-keys="[searchForm.area_code]"
                  check-strictly
                  node-key="id"
                  :props="treeProps"
                  @node-click="handleNodeClick"
               />
            </el-form-item>
            <el-form-item label="所属机巢:">
               <el-select
                  :teleported="false"
                  v-model="searchForm.device_sn"
                  placeholder="请选择"
                  clearable
               >
                  <el-option
                     v-for="item in machineData"
                     :key="item.device_sn"
                     :label="item.nickname"
                     :value="item.device_sn"
                  />
               </el-select>
            </el-form-item>
            <el-form-item>
               <el-date-picker
                  popper-class="custom-date-picker"
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :value-format="timeFormat"
                  @change="handleDateChange"
               />
            </el-form-item>
            <el-form-item>
               <div class="time-card">
                  <div
                     class="card-item"
                     :class="item === checked ? 'active' : ''"
                     v-for="(item, index) in timeList"
                     @click="timeClick(item, index)"
                  >
                     {{ timeListStr[index] }}
                  </div>
               </div>
            </el-form-item>
            <el-form-item label="任务算法:" v-if="isExpand" class="taskAlgorithm">
               <TaskAlgorithmBusiness :setWidth="186" :showAlgorithm="true" @algorithmChange="algorithmChange" />
            </el-form-item>
            <el-form-item label="所属部门:" v-if="isExpand">
               <el-select
                  :teleported="false"
                  v-model="searchForm.create_dept"
                  placeholder="请选择"
                  clearable
               >
                  <el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id" />
               </el-select>
            </el-form-item>
            <el-form-item label="任务状态:" v-if="isExpand">
               <el-select
                  :teleported="false"
                  v-model="searchForm.status"
                  placeholder="请选择"
                  clearable
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
               >
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
            </el-form-item>
            <el-form-item label="任务类型:" v-if="isExpand">
               <el-select
                  :teleported="false"
                  v-model="searchForm.is_circle_job"
                  placeholder="请选择"
                  clearable
               >
                  <el-option label="周期任务" :value="1" />
                  <el-option label="临时任务" :value="0" />
               </el-select>
            </el-form-item>
            <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
            <div class="more" v-else @click="toggleExpand">更多</div>
  <div class="search-box-test" :class="{ 'is-expand': isExpand }">
    <el-form :model="searchForm" inline>
      <div class="search-first">
        <el-form-item>
          <el-input v-model="searchForm.key_word" placeholder="请输入任务编号/名称" clearable />
        </el-form-item>
        <el-form-item label="行政区划:">
          <el-tree-select
            popper-class="custom-tree-select"
            v-model="searchForm.area_code"
            :data="deptTreeData"
            :default-expanded-keys="[searchForm.area_code]"
            check-strictly
            node-key="id"
            :props="treeProps"
            @node-click="handleNodeClick"
          />
        </el-form-item>
        <el-form-item label="所属机巢:">
          <el-select
            :teleported="false"
            v-model="searchForm.device_sn"
            placeholder="请选择"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in machineData"
              :key="item.device_sn"
              :label="item.nickname"
              :value="item.device_sn"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            popper-class="custom-date-picker"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="timeFormat"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <div class="time-card">
            <div
              class="card-item"
              :class="item === checked ? 'active' : ''"
              v-for="(item, index) in timeList"
              :key="index"
              @click="timeClick(item, index)"
            >
              {{ timeListStr[index] }}
            </div>
          </div>
        </el-form-item>
        <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
        <div class="more" v-else @click="toggleExpand">更多</div>
        <div class="search-btn" :style="{ bottom: isExpand ? '5px' : '-3px' }">
               <div class="btn search" @click="handleSearch"><img src="@/assets/images/task/search.png"/>搜索</div>
               <div class="btn clear" @click="handleReset"><img src="@/assets/images/task/clear.png"/>清空</div>
               <!-- <div class="btn add" @click="addTask"><img src="@/assets/images/task/add.png"/>新增</div> -->
            </div>
         </div>
      </el-form>
   </div>
          
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
        </div>
        <el-form-item label="任务算法:" v-if="isExpand" class="taskAlgorithm">
          <!-- <TaskAlgorithmBusiness
          ref="algorithmRef"
            :setWidth="160"
            :showAlgorithm="true"
            @algorithmChange="algorithmChange"
          /> -->
          <el-tree-select
          style="z-index: 1000"
            :teleported="false"
            class="custom-tree-select"
            :style="{ width: pxToRem(186) }"
            v-model="dictKey"
            :data="dataList"
            :default-expanded-keys="[dictKey]"
            :props="treePropsSF"
            :render-after-expand="false"
            :default-checked-keys="checkedKeys"
            node-key="id"
            multiple
            show-checkbox
            collapse-tags
            collapse-tags-tooltip
            clearable
            @node-click="handleNodeClick"
            @check="handleCheck"
            @clear="handleClear"
          />
        </el-form-item>
        <!-- <el-form-item label="所属部门:" v-if="isExpand">
          <el-select
            :teleported="false"
            v-model="searchForm.create_dept"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in deptData"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="任务状态:" v-if="isExpand">
          <el-select
          style="z-index: 1000"
            :teleported="false"
            v-model="searchForm.status"
            placeholder="请选择"
            clearable
            multiple
            collapse-tags
            collapse-tags-tooltip
              @change="handleSearch"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型:" v-if="isExpand">
          <el-select
            :teleported="false"
            v-model="searchForm.is_circle_job"
            placeholder="请选择"
            clearable
            @change="handleSearch"
          >
            <el-option label="周期任务" :value="1" />
            <el-option label="临时任务" :value="0" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script setup>
// import { pxToRem } from '@/utils/rem'
import { ElMessage } from 'element-plus'
import { deptsByAreaCode } from '@/api/job/task'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
import dayjs from 'dayjs'
import { useStore } from 'vuex'
import { getRegionTreeAll } from '@/api/job/task'
import { getDeviceRegion } from '@/api/job/task'

const store = useStore()
import { pxToRem } from '@/utils/rem';
import { ElMessage } from 'element-plus';
import { deptsByAreaCode, getSFDictionaryTree  } from '@/api/job/task';
// import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import { getRegionTreeAll } from '@/api/job/task';
import { getDeviceRegion } from '@/api/job/task';
const route = useRoute();
const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
const isExpand = ref(false)
const toggleExpand = () => {
   isExpand.value = !isExpand.value
}
const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);

const dateRange = ref([])
const algorithmRef = ref(null)
const isExpand = ref(false);
const toggleExpand = () => {
  isExpand.value = !isExpand.value;
};
const timeFormat = 'YYYY-MM-DD HH:mm:ss';

const dateRange = ref([]);

const treeProps = {
   label: 'name',
   value: 'id',
   children: 'childrens',
}
  label: 'name',
  value: 'id',
  children: 'childrens',
};
const searchForm = reactive({
   ai_types: [], // 算法类型
   area_code: userAreaCode.value, // 区域code
   create_dept: '', // 创建部门
   date_enum: 'TODAY', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
   device_sn: '', // 设备编号
   end_date: null, // 结束时间
   industry_type: '', // 行业key
   key_word: '', // 模糊搜索关键词（匹配名称/昵称/设备sn）
   start_date: null, // 开始时间
   status: [], // 作业状态
   is_circle_job: null, // 任务类型
})
  ai_types: [], // 算法类型
  area_code: userAreaCode.value, // 区域code
  create_dept: '', // 创建部门
  date_enum: 'CURRENT_MONTH', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
  device_sn: '', // 设备编号
  end_date: null, // 结束时间
  industry_type: '', // 行业key
  key_word: '', // 模糊搜索关键词（匹配名称/昵称/设备sn）
  start_date: null, // 开始时间
  status: [], // 作业状态
  is_circle_job: null, // 任务类型
});

// 从单机巢任务传参值
const signDevice_sn = ref('')
const signDevice_sn = ref('');

const statusOptions = [
   { label: '待执行', value: 1 },
   { label: '执行中', value: 2 },
   { label: '已执行', value: 3 },
   // { label: '已取消', value: 4 },
   { label: '执行失败', value: 5 },
   { label: '取消执行', value: 7 },
]
  { label: '待执行', value: 1 },
  { label: '执行中', value: 2 },
  { label: '已执行', value: 3 },
  // { label: '已取消', value: 4 },
  { label: '执行失败', value: 5 },
  { label: '取消执行', value: 7 },
];

const emit = defineEmits(['search', 'addTask'])
const emit = defineEmits(['search', 'addTask']);

const algorithmChange = val => {
   searchForm.ai_types = val
}
  searchForm.ai_types = val;
  handleSearch()
};

const businessChange = val => {
   searchForm.industry_type = val
}
  searchForm.industry_type = val;
};

let deptData = ref([])
let deptData = ref([]);
// 所属部门信息
const getDeptsByAreaCode = () => {
   deptsByAreaCode(searchForm.area_code).then(res => {
      if (res.code !== 0) {
         deptData.value = res.data.data
      }
   })
}
  deptsByAreaCode(searchForm.area_code).then(res => {
    if (res.code !== 0) {
      deptData.value = res.data.data;
    }
  });
};

// 部门
let deptTreeData = ref([])
let deptTreeData = ref([]);
// 机巢
let machineData = ref([])
let machineData = ref([]);

// 部门下得机巢
const requestDockInfo = () => {
   getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
      deptTreeData.value = res.data.data ? [res.data.data] : []
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
    deptTreeData.value = res.data.data ? [res.data.data] : [];

      handleNodeClick({ id: userAreaCode.value })
   })
    handleNodeClick({ id: userAreaCode.value });
  });
};

// 算法
const treePropsSF = {
    label: 'dictValue',
    value: 'id',
    children: 'children',
}
const dictKey = ref('')
const dataList = ref([])
function getAlgorithmList() {
  getSFDictionaryTree({code:'SF'}).then((res) => {
      if (res.data.code === 200) {
          const result = res.data.data[0].children
          // 过滤第一层数据
          const filteredData = result.map(item => {
              // 过滤第二层数据
              const children = item.children?.map(child => ({
                  ...child,
                  children: [] // 清空第三层数据
              }))
              return {
                  ...item,
                  children: children || []
              }
          })
          dataList.value = filteredData
      }
  })
}

function handleSFNodeClick(data) {
    if (data.children && data.children.length) {
        // 获取子节点dictKey
        const childDictKeys = data.children.map(child => child.dictKey)
        searchForm.ai_types = childDictKeys
    } else {
        searchForm.ai_types = [data.dictKey]
    }
    // 更新列表
    handleSearch()
}
function handleClear() {
    dictKey.value = ''
    searchForm.ai_types = []
    handleSearch()
}

const handleNodeClick = async data => {
   // 处理机巢数据
   searchForm.device_sn = ''
   machineData.value = ''
  // 处理机巢数据
  searchForm.device_sn = '';
  machineData.value = '';

   const droneList = await getDeviceRegion({ areaCode: data.id })
  const droneList = await getDeviceRegion({ areaCode: data.id });

   machineData.value = droneList?.data?.data
   // 默认选中值
   if (signDevice_sn.value) {
      searchForm.device_sn = signDevice_sn.value
   }
   // 所属部门重新请求值
   searchForm.create_dept = ''
   deptData.value = []
   getDeptsByAreaCode()
}
  machineData.value = droneList?.data?.data;
  // 默认选中值
  if (signDevice_sn.value) {
    searchForm.device_sn = signDevice_sn.value;
  }
  // 所属部门重新请求值
  searchForm.create_dept = '';
  deptData.value = [];
  getDeptsByAreaCode();
  handleSearch();
};

// 日期 和周期
let timeList = ['today', 'week', 'month', 'year']
let timeListStr = ['今日', '本周', '本月', '本年']
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR']
let checked = ref('today')
let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
let checked = ref('month');

let timeClick = (item, index) => {
   checked.value = item
   // dateRange.value = dateRanges[item];
   dateRange.value = []
   // emit('change', dateRanges[item],timeListEnum[index]);
   searchForm.date_enum = timeListEnum[index]
   handleSearch()
}
  if (checked.value === item){
    checked.value = null
    searchForm.date_enum = undefined
  }else{
    checked.value = item
    searchForm.date_enum = timeListEnum[index]
  }
  dateRange.value = []
  handleSearch()
};
// 搜索
const handleSearch = () => {
   if (!dateRange.value) {
      dateRange.value = []
   }
   if (dateRange.value && dateRange.value.length) {
      // 有值时 清除 日 本周 本月 本年状态
      checked.value = ''
      searchForm.date_enum = ''
   }
   // 提交至store
   let params = {
      ...searchForm,
      start_date: dateRange.value.length ? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat) : null,
      end_date: dateRange.value.length ? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat) : null,
   }
   store.commit('setTaskSearchParams', params)
   emit('search', params)
}
  if (!dateRange.value) {
    dateRange.value = [];
  }
  if (dateRange.value && dateRange.value.length) {
    // 有值时 清除 日 本周 本月 本年状态
    checked.value = '';
    searchForm.date_enum = '';
  }
  // 提交至store
  let params = {
    ...searchForm,
    start_date: dateRange.value.length
      ? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat)
      : null,
    end_date: dateRange.value.length
      ? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat)
      : null,
  };
  store.commit('setTaskSearchParams', params);
  emit('search', params);
};
const handleDateChange = val => {
   if (val && val.length === 2) {
      const start = dayjs(val[0])
      const end = dayjs(val[1])
      const diff = end.diff(start, 'day')
  checked.value = null
  searchForm.date_enum = undefined
  handleSearch()
};

      if (diff > 30) {
         ElMessage.warning('日期范围不能超过30天')
         dateRange.value = []
         return
      }
   }
   handleSearch()
}
// 重置
const handleReset = () => {
   dateRange.value = []
   Object.keys(searchForm).forEach(key => {
      searchForm[key] = ''
   })
   searchForm.ai_types = []
   searchForm.date_enum = 'TODAY'
   searchForm.area_code = userAreaCode.value
   checked.value = 'today'
   handleNodeClick({ id: userAreaCode.value })
   handleSearch()
}
  dateRange.value = [];
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  searchForm.ai_types = [];
  searchForm.date_enum = 'CURRENT_MONTH';
  searchForm.area_code = userAreaCode.value;
  checked.value = 'month';
  signDevice_sn.value = ''
  // 清除算法
  dictKey.value = '';
   // algorithmRef.value?.clear()
  handleNodeClick({ id: userAreaCode.value });
  handleSearch();
};

// 新增任务
const addTask = () => {
   emit('addTask')
}
  emit('addTask');
};

// 监听从巡检任务概况提交的数据
watch(
   () => store.state.task.jumpTask,
   newVal => {
      // console.log(newVal, 'newVal')
      if (newVal && Object.keys(newVal).length) {
         // 兼容当日任务 计划任务 历史任务传参
         if (newVal.clickValue) {
            checked.value = newVal.clickValue
            searchForm.date_enum = newVal.date_enum
         }
         if (newVal.date_value) {
            dateRange.value = newVal.date_value
         }
         if (newVal.status) {
            searchForm.status = newVal.status
         }
         if (newVal.device_sn) {
            searchForm.device_sn = newVal.device_sn
            // 不直接赋值的原因: 回选会被清空值
            signDevice_sn.value = newVal.device_sn
         }
      } else {
         checked.value = 'today'
         searchForm.date_enum = 'TODAY'
      }
      handleSearch()
   },
   { immediate: true, deep: true }
)
// watch(
//   () => store.state.task.jumpTask,
//   newVal => {

//     if (newVal && Object.keys(newVal).length) {
//       // 兼容当日任务 计划任务 历史任务传参
//       if (newVal.clickValue) {
//         checked.value = newVal.clickValue;
//         searchForm.date_enum = newVal.date_enum;
//       }
//       if (newVal.date_value) {
//         dateRange.value = newVal.date_value;
//       }
//       if (newVal.status) {
//         searchForm.status = newVal.status;
//       }
//       if (newVal.device_sn) {
//         searchForm.device_sn = newVal.device_sn;
//         // 不直接赋值的原因: 回选会被清空值
//         signDevice_sn.value = newVal.device_sn;
//       }
//     } else {
//       checked.value = 'today';
//       searchForm.date_enum = 'TODAY';
//     }
//     handleSearch();
//   },
//   { immediate: true, deep: true }
// );

const checkedKeys = ref([])

const handleCheck = (data, { checkedKeys, checkedNodes }) => {
   dictKey.value = checkedKeys
   // 获取所有选中节点的 dictKey
   const selectedDictKeys = checkedNodes.map(node => node.dictKey).filter(Boolean)
  searchForm.ai_types = selectedDictKeys
  handleSearch()
}

onBeforeUnmount(() => {
   checked.value = 'today'
   searchForm.date_enum = 'TODAY'
})
  checked.value = 'today';
  searchForm.date_enum = 'TODAY';
});

onMounted(() => {
   requestDockInfo()
   // 查询一次
   // handleSearch()
})
  requestDockInfo();
  getAlgorithmList();
  // 日历传值
  const calendarday = ref(route.query.day);

  if (calendarday.value) {
    const date = dayjs(calendarday.value).format(timeFormat);

    const dateArray = [date, date];

    dateRange.value = dateArray;
    const find = store.state.tags.bsTagList.find(i => i.path === '/job/jobstatistics')
          find && (find.query = {})
  }
      // 查询一次
    handleSearch()
});
</script>
<style lang="scss">
</style>
<style lang="scss"></style>
<style lang="scss" scoped>
.taskAlgorithm {
   :deep() {
      .task-algorithm > div {
         width: 233px !important;
      }
   }
}
// .taskAlgorithm {
//    :deep() {
//       .task-algorithm > div {
//          width: 233px !important;
//       }
//    }
// }
.search-box-test {
   transition: all 0.3s;
  transition: all 0.3s;

   .search-first {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px 12px; // 设置行间距和列间距
  .search-first {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 15px; // 设置行间距和列间距

      .more {
         cursor: pointer;
         width: 32px;
         height: 32px;
         color: #1C5CFF;
         line-height: 32px;
         font-size: 16px;
      }
    .more {
      cursor: pointer;
      width: 32px;
      height: 32px;
      color: #1c5cff;
      line-height: 32px;
      font-size: 16px;
      margin: 0 28px;
    }

      .search-btn {
         position: absolute;
         right: 0;
         display: flex;
         justify-content: space-between;
         cursor: pointer;
         font-size: 14px;
			
         .btn {
            width: 80px;
            height: 32px;
            border-radius: 4px 4px 4px 4px;
            line-height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
               width: 14px;
               height: 14px;
            }
         }
         .search {
            background: #409EFF;
            color: #fff;
            margin-right: 10px;
         }
         .clear {
            border: 1px solid #D2D1D1;
            color: #676767;
            margin-right: 10px;
         }
         .add {
            background: #FF9243;
            color: #fff;
         }
      }
    .search-btn {
      // position: absolute;
      // right: 0;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      font-size: 14px;

      .time-card {
         text-align: center;
         background: #FFFFFF;
         border-radius: 4px 0px 0px 4px;
         border: 1px solid #E5E5E5;
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #7C8091;
         display: flex;
         height: 32px;
      .btn {
        width: 80px;
        height: 32px;
        border-radius: 4px 4px 4px 4px;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        // margin-left: px;
        img {
          width: 14px;
          height: 14px;
        }
      }
      .search {
        background: #409eff;
        color: #fff;
        margin-right: 10px;
      }
      .clear {
        border: 1px solid #d2d1d1;
        color: #676767;
        margin-right: 10px;
      }
      .add {
        background: #ff9243;
        color: #fff;
      }
    }

         .card-item {
            width: 60px;
            height: 100%;
            line-height: 32px;
            cursor: pointer;
         }
    .time-card {
      text-align: center;
      background: #ffffff;
      border-radius: 4px 0px 0px 4px;
      border: 1px solid #e5e5e5;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #7c8091;
      display: flex;
      height: 32px;

         .active {
            background: #FFFFFF;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #1C5CFF;
            color: #1441FF;
         }
      }
   }
      .card-item {
        width: 60px;
        height: 100%;
        line-height: 32px;
        cursor: pointer;
      }

   :deep(.el-form) {
      :deep(.el-input__wrapper.is-disabled) {
         box-shadow: 0 0 0 1px #026ad6;
      }
      .active {
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #1c5cff;
        color: #1441ff;
      }
    }
  }

      .el-form-item {
         margin-bottom: 0;
         width: 233px;
  :deep(.el-form) {
    :deep(.el-input__wrapper.is-disabled) {
      box-shadow: 0 0 0 1px #026ad6;
    }

         .el-form-item__label {
            color: #363636;
            line-height: 32px;
         }
      }
   }
    .el-form-item {
      margin-bottom: 0;
      width: 233px;
         margin-right: 20px;

      .el-form-item__label {
        color: #363636;
        line-height: 32px;
      }
    }
  }
}
</style>