From c353554427f56eeda8a7cb75cc12bfa572dd1c85 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 26 六月 2025 09:22:27 +0800
Subject: [PATCH] U 大小写问题

---
 src/views/alarm/earlyWarningAnalysis.vue | 1605 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 1,358 insertions(+), 247 deletions(-)

diff --git a/src/views/alarm/earlyWarningAnalysis.vue b/src/views/alarm/earlyWarningAnalysis.vue
index 7618fd0..b1e2e6e 100644
--- a/src/views/alarm/earlyWarningAnalysis.vue
+++ b/src/views/alarm/earlyWarningAnalysis.vue
@@ -10,6 +10,9 @@
 import getQueryString from "@/utils/getQueryString";
 
 import alarmParams from '@/components/pwrAlarmParams.vue';
+import lineChart from '@/components/echarts/line-yj.vue';
+import treeTransfer from 'tree-transfer-vue3';
+
 
 import useStation from "@/hooks/useStationList.js";
 const { provice, city, country, stationName, stationId, powerId,
@@ -34,6 +37,9 @@
   getBattAlmAnalyse,
   getHisRealInAlm,
   getAlmSummaryParam,
+  getHisRealWithChage,
+  getAlarmAnalysisCycle,
+  updateAlarmAnalysisCycle,
 } from "@/api/alarm.js";
 
 import {
@@ -43,6 +49,7 @@
 
 const { $loading, $message, $confirm } = useElement();
 const flag = ref(Math.random());
+const chart0 = ref(null);
 
 
 const headers0 = [
@@ -73,12 +80,84 @@
   },
 ];
 
+const headers1 = [
+  {
+    prop: "fullName",
+    label: "鏈烘埧鍚嶇О",
+    width: "220",
+  },
+  {
+    prop: "devName",
+    label: "璁惧鍚嶇О",
+    width: "80",
+  },
+  {
+    prop: "almName",
+    label: "鍛婅鍚嶇О",
+    width: "160",
+  },
+  {
+    prop: "almLevelStr",
+    label: "鍛婅绛夌骇",
+    width: "120",
+  },
+  {
+    prop: "almStartTime",
+    label: "鍛婅寮�濮嬫椂闂�",
+    width: "120",
+  },
+];
+
+const headers2 = [
+  {
+    prop: "fullName",
+    label: "鏈烘埧鍚嶇О",
+    width: "220",
+  },
+  {
+    prop: "battgroupName",
+    label: "鐢垫睜缁勫悕绉�",
+    width: "80",
+  },
+  {
+    prop: "almName",
+    label: "鍛婅鍚嶇О",
+    width: "160",
+  },
+  {
+    prop: "almLevelStr",
+    label: "鍛婅绛夌骇",
+    width: "120",
+  },
+  {
+    prop: "almStartTime",
+    label: "鍛婅寮�濮嬫椂闂�",
+    width: "120",
+  },
+];
+
 const pageNum0 = ref(1);
 const pageSize0 = ref(10);
 const total0 = ref(0);
-const addEditVisible = ref(false);
+const timeVisible = ref(false);
 const dialogTitle = ref("");
 const datas0 = reactive({
+  tableData: [],
+  rowData: {},
+});
+
+const pageNum1 = ref(1);
+const pageSize1 = ref(10);
+const total1 = ref(0);
+const datas1 = reactive({
+  tableData: [],
+  rowData: {},
+});
+
+const pageNum2 = ref(1);
+const pageSize2 = ref(10);
+const total2 = ref(0);
+const datas2 = reactive({
   tableData: [],
   rowData: {},
 });
@@ -88,6 +167,8 @@
 const alarmTypeList = ref([]);
 
 const alarmId = ref('');
+
+
 
 // 鐢垫簮鍛婅鍒楄〃
 function getList0() {
@@ -107,23 +188,118 @@
   getPwrtAlmAnalyse(params).then((res) => {
     let { code, data, data2 } = res;
     let list = [];
-    // let _total0 = 0;
+    let _total0 = 0;
     loading.close();
     if (code && data) {
       // console.log(data);
       list = data2.list.map(v => ({
         ...v,
         almLevelStr: ['', '涓�绾у憡璀�', '浜岀骇鍛婅', '涓夌骇鍛婅', '鍥涚骇鍛婅'][v.almLevel],
-        
+
       }));
-      // _total0 = data2.total0;
+      _total0 = data2.total;
     }
     datas0.tableData = list;
-    // total0.value = _total0;
+    total0.value = _total0;
   })
     .catch((err) => {
       console.log(err);
     });
+}
+
+// 璁惧鍛婅鍒楄〃
+function getList1() {
+  let params = {
+    almIdList: alarmId.value ? [alarmId.value] : undefined,
+    provice: provice.value || undefined,
+    city: city.value || undefined,
+    country: country.value || undefined,
+    stationId: stationId.value || undefined,
+    powerId: powerId.value || undefined,
+    almLevel: alarmLevel.value,
+    pageNum: pageNum1.value,
+    pageSize: pageSize1.value,
+  };
+
+  let loading = $loading();
+  getDevAlmAnalyse(params).then((res) => {
+    let { code, data, data2 } = res;
+    let list = [];
+    let _total0 = 0;
+    loading.close();
+    if (code && data) {
+      // console.log(data);
+      list = data2.list.map(v => ({
+        ...v,
+        almLevelStr: ['', '涓�绾у憡璀�', '浜岀骇鍛婅', '涓夌骇鍛婅', '鍥涚骇鍛婅'][v.almLevel],
+
+      }));
+      _total0 = data2.total;
+    }
+    datas1.tableData = list;
+    console.log('list', list, '=============');
+    
+    total1.value = _total0;
+  })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+// 鐢垫睜鍛婅鍒楄〃
+function getList2() {
+  let params = {
+    almIdList: alarmId.value ? [alarmId.value] : undefined,
+    provice: provice.value || undefined,
+    city: city.value || undefined,
+    country: country.value || undefined,
+    stationId: stationId.value || undefined,
+    powerId: powerId.value || undefined,
+    almLevel: alarmLevel.value,
+    pageNum: pageNum2.value,
+    pageSize: pageSize2.value,
+  };
+
+  let loading = $loading();
+  getBattAlmAnalyse(params).then((res) => {
+    let { code, data, data2 } = res;
+    let list = [];
+    let _total0 = 0;
+    loading.close();
+    if (code && data) {
+      // console.log(data);
+      list = data2.list.map(v => ({
+        ...v,
+        almLevelStr: ['', '涓�绾у憡璀�', '浜岀骇鍛婅', '涓夌骇鍛婅', '鍥涚骇鍛婅'][v.almLevel],
+
+      }));
+      _total0 = data2.total;
+    }
+    datas2.tableData = list;
+    console.log('list', list, '=============');
+    
+    total2.value = _total0;
+  })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+
+async function acTabChange() {
+  await nextTick();
+
+  switch (acTab.value) {
+    case 'power':
+      getList0();
+      break;
+    case 'dev':
+      getList1();
+      break;
+    case 'batt':
+      getList2();
+      break;
+  }
 }
 
 const allProps = ref([]);
@@ -136,6 +312,7 @@
       list = data2;
     }
     allProps.value = list;
+    formatProp(list);
 }
 
 // 鏌ヨ鍛婅绫诲瀷
@@ -157,19 +334,155 @@
 }
 
 
+const chartRefs = ref({});
+
+function setComponentRef (prop, el) {
+  if (el) {
+    chartRefs.value[prop] = el;
+  } else {
+    // 缁勪欢鍗歌浇鏃剁Щ闄ゅ紩鐢�
+    delete chartRefs.value[prop];
+  }
+};
 
 const alarmType = ref(0);
 const acTab = ref('power');
 const alarmLevel = ref(1);
+const currAlm = ref({});
+// 褰撳墠鍛婅鐨勫憡璀﹀紑濮嬫椂闂�
+const startTime = ref('');
+const battList = ref([]);
+const battId = ref('');
 
 async function view(record) {
+  currAlm.value = record;
+  battList.value = record.binfList;
+  battId.value = acTab.value == 'batt' 
+      ? record.battgroupId 
+      : record.binfList.length 
+      ? record.binfList[0].battgroupId
+      : 0;
+
+  getRtData();
+}
+
+const propInfo = ref({});
+async function getRtData() {
   let params = {
-    powerId: record.powerId,
-    almId: record.almId,
-    startTime: record.almStartTime,
-    battgroupId: record.battgroupIdList.length ? record.battgroupIdList[0] : 0,
+    powerId: currAlm.value.powerId,
+    almId: currAlm.value.almId,
+    startTime: currAlm.value.almStartTime,
+    battgroupId: battId.value,
   }
   let res = await getHisRealInAlm(params);
+  let { code, data, data2, data3, data4 } = res;
+  let list = [];
+  let mainProps = '涓诲睘鎬ф洸绾�';
+  let subs = [];
+  if (code && data) {
+    let { batt, pwr } = data2;
+    // 鍙栧嚭涓诲睘鎬� 鍜� 鍓睘鎬�  鍙婂搴旂殑涓枃鍚嶇О
+    mainProps = data2[data3.main][0].dataName1;
+    if (data3.main == 'pwr') {
+      // batt 涓暟琛ㄧず鍏ㄩ儴鐨勫壇灞炴��
+      // pwr 瑕佸幓鎺夌涓�涓富灞炴�� 鍓╀笅鐨勪负鍓睘鎬�
+      for(let i = 0, len = data3.batt; i < len; i++) {
+        let idx = i + 1;
+        let prop = batt[0][`dataName${idx}`];
+        subs.push({prop, name: getPropName(prop), data: [], xLabels: [], valueProp: `dataValue${idx}`, from: 'batt'});
+      }
+      for (let j = 0, len = data3.pwr - 1; j < len; j++) {
+        let idx = j + 2;
+        let prop = pwr[0][`dataName${idx}`];
+        subs.push({prop, name: getPropName(prop), data: [], xLabels: [], valueProp: `dataValue${idx}`, from: 'pwr'});
+      }
+    } else {
+      for(let i = 0, len = data3.batt - 1; i < len; i++) {
+        let idx = i + 2;
+        let prop = batt[0][`dataName${idx}`];
+        subs.push({prop, name: getPropName(prop), data: [], xLabels: [], valueProp: `dataValue${idx}`, from: 'batt'});
+      }
+      for (let j = 0, len = data3.pwr; j < len; j++) {
+        let idx = j + 1;
+        let prop = pwr[0][`dataName${idx}`];
+        subs.push({prop, name: getPropName(prop), data: [], xLabels: [], valueProp: `dataValue${idx}`, from: 'pwr'});
+      }
+    }
+
+    // 鏍煎紡鍖栨暟鎹�
+    formatData(data2, data3, subs);
+    propInfo.value = data4;
+
+  }
+
+  subProp.value = subs;
+
+
+  startTime.value = currAlm.value.almStartTime;
+  name0.value = getPropName(mainProps);
+
+  nextTick(() => {
+    // 鏇存柊鍥捐〃
+    updateChart();
+  });
+
+}
+
+
+function findClosestTime(timeArray, targetTime, format = 'YYYY-MM-DD HH:mm:ss') {
+    if (!timeArray || timeArray.length === 0) return '';
+
+    // 灏嗙洰鏍囨椂闂磋浆鎹负Moment瀵硅薄
+    const targetMoment = moment(targetTime, format);
+
+
+    // 鎵惧嚭鎵�鏈夊ぇ浜庢垨绛変簬鐩爣鏃堕棿鐨勫厓绱�
+    const timesAfterTarget = timeArray.filter(time =>
+        moment(time, format).isSameOrAfter(targetMoment)
+    );
+
+    // 濡傛灉瀛樺湪杩欐牱鐨勫厓绱狅紝杩斿洖绗竴涓�
+    if (timesAfterTarget.length > 0) {
+        return timesAfterTarget[0];
+    }
+
+    // 鑻ユ病鏈夋壘鍒板ぇ浜庢垨绛変簬鐩爣鏃堕棿鐨勫厓绱狅紝鍒欒繑鍥炴暣涓暟缁勪腑鐨勬渶鍚庝竴涓厓绱狅紙鍗虫渶鎺ヨ繎浣嗗皬浜庣洰鏍囨椂闂寸殑鍏冪礌锛�
+    return timeArray[timeArray.length - 1];
+}
+
+const mainData = ref([]);
+// const xLabels0 = ref([]);
+// const xLabels1 = ref([]);
+
+function formatData(data2, data3, subs) {
+  let _mainData = [];
+  let recordTimes = [];
+  for (let i = 0, len = data2[data3.main].length; i < len; i++) {
+    let item = data2[data3.main][i];
+    let recordTime = item.recordTime;
+    _mainData.push(item.dataValue1);
+    recordTimes.push(recordTime);
+
+    for (let j = 0, len = subs.length; j < len; j++) {
+      let sub = subs[j];
+      // 鍙栧睘鎬у搴旂殑index
+      let { prop, from, valueProp } = sub;
+
+      sub.data.push(data2[from][i][valueProp]);
+      sub.xLabels.push(data2[from][i].recordTime);
+    }
+  }
+  mainData.value = {labels: recordTimes, data: _mainData};
+  // xlabels.value = recordTimes;
+}
+
+function updateChart() {
+  console.log('xlabels.value, mainData.value', mainData.value, '=============');
+
+  chart0.value.updateChart(mainData.value.labels, mainData.value.data, findClosestTime(mainData.value.labels, startTime.value));
+  subProp.value.forEach((v, i) => {
+    chartRefs.value[v.prop].updateChart(v.xLabels, v.data, findClosestTime(v.xLabels, startTime.value));
+  });
 }
 
 
@@ -197,6 +510,28 @@
 function handleCurrentChange0(val) {
   pageNum0.value = val;
   getList0();
+}
+
+// 灞曠ず鏁版嵁鏁伴噺
+function handleSizeChange1(val) {
+  pageSize1.value = val;
+  getList1();
+}
+// 缈婚〉
+function handleCurrentChange1(val) {
+  pageNum1.value = val;
+  getList1();
+}
+
+// 灞曠ず鏁版嵁鏁伴噺
+function handleSizeChange2(val) {
+  pageSize2.value = val;
+  getList2();
+}
+// 缈婚〉
+function handleCurrentChange2(val) {
+  pageNum2.value = val;
+  getList2();
 }
 
 async function exportExcelAll() {
@@ -231,26 +566,240 @@
   return name;
 }
 
+// 鑾峰彇绫诲瀷鍚嶇О
+function getTypeName(type) {
+  let name = '';
+  let obj = allTypes.value.filter(v => v.id == type);
+  if (obj.length) {
+    name = obj[0].label;
+  }
+  return name;
+}
+
 const name0 = ref('涓诲睘鎬ф洸绾�');
+
 const subProp = ref([]);
+const timeLong = ref(0);
+async function getTimeSettings() {
+  let res = await getAlarmAnalysisCycle();
+  let { code, data, data2 } = res;
+  let _time = 30;
+  if (code && data) {
+    _time = data2.paramValue;
+  }
+  timeLong.value = _time;
+}
 
-subProp.value = [1];
-// subProp.value = [1, 2];
-// subProp.value = [1, 2, 3];
-// subProp.value = [1, 2, 3, 4];
+const layout = {
+  gutter: 20,
+  span: 24,
+};
 
-let obj = [[1], [1, 2], [1, 2, 3], [1, 2, 3, 4]];
-let i = 0;
+const form1 = reactive({
+  time: 0,
+});
+
+const validatorTime = (rule, value, callback) => {
+    const reg = /^\d+$/;
+
+    if (reg.test(value)) {
+      if (value < 1 || value > 1440) {
+        callback(new Error('鑼冨洿1~1440'));
+      } else {
+        callback();
+      }
+    } else {
+      callback(new Error('璇疯緭鍏ユ暣鏁�'));
+    }
+  }
+
+const rules = reactive({
+  time: [{ required: true, message: "涓嶈兘涓虹┖", trigger: ["blur", "change"] },
+    { validator: validatorTime, trigger: ["blur", "change"] },
+  ],
+});
+
+
+function setTime() {
+  form1.time = timeLong.value;
+  dialogTitle.value = '璁剧疆鏃堕棿鍛ㄦ湡';
+  timeVisible.value = true;
+}
+
+
+const formRef = ref();
+async function timeSetOk() {
+  let valid = await formRef.value.validate(() => { });
+  // console.log('valid', valid, '=============');
+  if (!valid) {
+    $message.error("琛ㄥ崟楠岃瘉澶辫触");
+    return false;
+  }
+
+  let loading = $loading();
+  let res = await updateAlarmAnalysisCycle(form1.time);
+  let { code, data } = res;
+  loading.close();
+  if (code && data) {
+    $message.success("璁剧疆鎴愬姛");
+    timeLong.value = form1.time;
+    timeVisible.value = false;
+  } else {
+    $message.error("璁剧疆澶辫触");
+  }
+}
+
+const transferRef = ref();
+const fromData = ref([]);
+const propVisible = ref(false);
+const toData = ref([]);
+
+function setProp () {
+  dialogTitle.value = '璁剧疆鍏虫敞灞炴��';
+  propVisible.value = true;
+  nextTick(() => {
+    initSubProp(propInfo.value);
+  });
+}
+
+function initSubProp (data) {
+  let {
+    almId,
+    minorField1,
+    minorField1Type,
+    minorField2,
+    minorField2Type,
+    minorField3,
+    minorField3Type,
+    minorField4,
+    minorField4Type,
+  } = data;
+  let arr = [];
+  let obj = {};
+  [1, 2, 3, 4].forEach((v) => {
+    let prop = `minorField${v}`;
+    let type = `${prop}Type`;
+    if (data[prop]) {
+      obj[data[type]] = obj[data[type]] || [];
+      obj[data[type]].push({
+        pid: data[type] + '',
+        id: data[prop],
+        label: getPropName(data[prop]),
+        prop: data[prop],
+        type: data[type],
+      });
+      // arr.push({
+      //   pid: data[type] + '',
+      //   id: data[prop],
+      //   label: getPropName(data[prop]),
+      //   prop: data[prop],
+      //   type: data[type],
+      // });
+    }
+  });
+
+  Object.keys(obj).forEach((key) => {
+    arr.push({
+      pid: 0,
+      id: key,
+      label: getTypeName(key),
+      children: obj[key],
+    });
+  });
+
+  transferRef.value.removeToSource(false);
+  transferRef.value.addToAims(false);
+  toData.value = arr;
+}
+
+function propSetOk() {
+
+}
+
+async function add (_fromData,_toData,{ checkedKeys, checkedNodes, harfKeys, harfNodes }) {
+  console.log('fromData,toData,obj', _fromData,_toData, checkedKeys, checkedNodes, harfKeys, harfNodes , '=============');
+  let params = {
+    battgroupId: battId.value,
+    powerId: currAlm.value.powerId,
+    startTime: currAlm.value.almStartTime,
+  }
+  let arr = [];
+  _toData.forEach((v) => {
+    arr.push(...v.children);
+  });
+  let len = arr.length;
+
+  if (len > 4) {
+    $message.error('鏈�澶氳缃�4涓睘鎬�');
+    console.log('toData', _toData, toData, '=============');
+    toData.value = toData.value.map(v => ({
+      ...v,
+      children: v.children.filter(vv => !checkedKeys.includes(vv.id))
+    }));
+    return false;
+  }
+  let i = 0;
+  _toData.forEach((item) => {
+    item.children.forEach((v) => {
+      i++;
+      params[`dataName${i}`] = v.id;
+      params[`dataType${i}`] = v.pid;
+
+    });
+  });
+  console.log('params', params, '=============');
+
+  let res = await getHisRealWithChage(params);
+
+
+}
+
+function remove(fromData,toData,obj) {
+  console.log('fromData,toData,obj', fromData,toData,obj, '=============');
+
+}
+
+const allTypes = ref([]);
+
+function formatProp(data) {
+  let obj = {};
+  let res = [];
+  let types = [];
+  data.forEach((v) => {
+    obj[v.fieldType] = obj[v.fieldType] || [];
+    obj[v.fieldType].push(v);
+
+  });
+  Object.keys(obj).forEach((key) => {
+    types.push({
+      id: key,
+      label: obj[key][0].fieldTypeName
+    });
+    res.push({
+      id: key,
+      pid: 0,
+      label: obj[key][0].fieldTypeName,
+      children: obj[key].map(vv => {
+        return {
+          ...vv,
+          id: vv.fieldName,
+          label: vv.fieldNameZh,
+          pid: key,
+        }
+      })
+    })
+  });
+  fromData.value = res;
+  allTypes.value = types;
+  return res;
+}
+
 onMounted(async () => {
   await getAlarmType();
   getAllProps();
+  getTimeSettings();
   getList0();
 
-  setInterval(() => {
-    i++;
-    i%=4;
-    subProp.value.length = obj[i];
-  }, 5000);
 });
 
 // onActivated(async () => {
@@ -258,10 +807,10 @@
 //   // console.log('pageFlag', pageFlag, flag.value, '=============');
 //   await nextTick();
 //   await whenLoaded();
-  
+
 //   if (pageFlag && pageFlag != flag.value) {
 //     // let provice, city, country, stationName, battId;
-    
+
 //     if (getQueryString('stationId')) {
 //       let statId = getQueryString('stationId');
 //       let stat = stationList.value.find(v => v.stationId == statId);
@@ -286,267 +835,736 @@
     <!-- <div class="page-header">
       </div> -->
     <div class="page-content">
-      <el-tabs tab-position="left" v-model="acTab" type="card" class="main-tabs">
+      <el-tabs
+        tab-position="left"
+        v-model="acTab"
+        @tab-change="acTabChange"
+        type="card"
+        class="main-tabs"
+      >
         <el-tab-pane name="power" class="tab-pane" label="鐢垫簮鍛婅">
           <div class="page-content-wrapper">
-          <div class="page-content-tools page-filter">
-            <div class="grid-container" :style="{'--counter': 9}">
-              <div class="grid-item">
-                <div class="label">鐪�</div>
-                <div class="value">
-                  <el-select
-                    v-model="provice"
-                    size="small"
-                    clearable
-                    placeholder="璇烽�夋嫨鐪�"
-                  >
-                    <el-option
-                      v-for="item in proviceList"
-                      :key="'l0_' + item"
-                      :label="item"
-                      :value="item"
+            <div class="page-content-tools page-filter">
+              <div class="grid-container" :style="{'--counter': 9}">
+                <div class="grid-item">
+                  <div class="label">鐪�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="provice"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨鐪�"
                     >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <div class="label">甯�</div>
-                <div class="value">
-                  <el-select
-                    v-model="city"
-                    size="small"
-                    clearable
-                    placeholder="璇烽�夋嫨甯�"
-                  >
-                    <el-option
-                      v-for="item in cityList"
-                      :key="'l1_' + item"
-                      :label="item"
-                      :value="item"
-                    >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <div class="label">鍖哄幙</div>
-                <div class="value">
-                  <el-select
-                    v-model="country"
-                    clearable
-                    size="small"
-                    placeholder="璇烽�夋嫨鍖哄幙"
-                  >
-                    <el-option
-                      v-for="item in countryList"
-                      :key="'l2_' + item"
-                      :label="item"
-                      :value="item"
-                    >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <div class="label">绔欑偣</div>
-                <div class="value">
-                  <el-select
-                    v-model="stationName"
-                    clearable
-                    size="small"
-                    placeholder="璇烽�夋嫨绔欑偣"
-                  >
-                    <el-option
-                      v-for="item in stationList"
-                      :key="'l3_' + item.stationId"
-                      :label="item.stationName"
-                      :value="item.stationName"
-                    >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <div class="label">鐢垫簮鍚嶇О</div>
-                <div class="value">
-                  <el-select
-                    v-model="powerId"
-                    clearable
-                    size="small"
-                    placeholder="璇烽�夋嫨鐢垫簮"
-                  >
-                    <el-option
-                      v-for="item in powerList"
-                      :key="'l4_' + item.powerId"
-                      :label="`${item.stationName}-${item.powerName}`"
-                      :value="item.powerId"
-                    >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <div class="label">鍛婅鍚嶇О</div>
-                <div class="value">
-                  <el-select
-                    v-model="alarmId"
-                    size="small"
-                    clearable
-                    filterable
-                    placeholder="璇烽�夋嫨鍛婅鍚嶇О"
-                  >
-                    <el-option
-                      v-for="item in alarmTypeList"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    >
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
-              <div class="grid-item">
-                <!-- <div class="label">涓�绾у憡璀�</div>
-                <div class="label">浜岀骇鍛婅</div>
-                <div class="label">涓夌骇鍛婅</div>
-                <div class="label">鍥涚骇鍛婅</div> -->
-                <el-radio-group v-model="alarmLevel" size="small" style="grid-column: span 6;">
-                  <el-radio-button :label="1">涓�绾у憡璀�</el-radio-button>
-                  <el-radio-button :label="2">浜岀骇鍛婅</el-radio-button>
-                  <el-radio-button :label="3">涓夌骇鍛婅</el-radio-button>
-                  <el-radio-button :label="4">鍥涚骇鍛婅</el-radio-button>
-                </el-radio-group>
-              </div>
-            </div>
-          </div>
-          <div class="page-content-table">
-            <div class="pos-rel">
-              <div class="pos-abs">
-                <el-table
-                  class="yc-table"
-                  stripe
-                  height="100%"
-                  size="small"
-                  :data="datas0.tableData"
-                  style="width: 100%"
-                >
-                  <el-table-column
-                    type="index"
-                    fixed="left"
-                    label="搴忓彿"
-                    width="60"
-                  ></el-table-column>
-                  <el-table-column
-                    v-for="header in headers0"
-                    :key="header.prop"
-                    :prop="header.prop"
-                    :label="header.label"
-                    :min-width="header.width"
-                    align="center"
-                  >
-                    <template #default="scope">
-                      <template v-if="header.prop == 'almIsConfirmed'">
-                        <el-checkbox
-                          disabled
-                          :checked="scope.row[header.prop] == 1"
-                        ></el-checkbox>
-                      </template>
-                      <template v-else>
-                        {{ scope.row[header.prop] || '--' }}
-                      </template>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="鎿嶄綔"
-                    fixed="right"
-                    width="120"
-                    align="center"
-                  >
-                    <template #default="scope">
-                      <el-button
-                        type="warning"
-                        size="small"
-                        @click="view(scope.row)"
-                        >鏌ョ湅璇︽儏</el-button
+                      <el-option
+                        v-for="item in proviceList"
+                        :key="'l0_' + item"
+                        :label="item"
+                        :value="item"
                       >
-                    </template>
-                  </el-table-column>
-                </el-table>
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">甯�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="city"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨甯�"
+                    >
+                      <el-option
+                        v-for="item in cityList"
+                        :key="'l1_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍖哄幙</div>
+                  <div class="value">
+                    <el-select
+                      v-model="country"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鍖哄幙"
+                    >
+                      <el-option
+                        v-for="item in countryList"
+                        :key="'l2_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">绔欑偣</div>
+                  <div class="value">
+                    <el-select
+                      v-model="stationName"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨绔欑偣"
+                    >
+                      <el-option
+                        v-for="item in stationList"
+                        :key="'l3_' + item.stationId"
+                        :label="item.stationName"
+                        :value="item.stationName"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鐢垫簮鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="powerId"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鐢垫簮"
+                    >
+                      <el-option
+                        v-for="item in powerList"
+                        :key="'l4_' + item.powerId"
+                        :label="`${item.stationName}-${item.powerName}`"
+                        :value="item.powerId"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍛婅鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="alarmId"
+                      size="small"
+                      clearable
+                      filterable
+                      placeholder="璇烽�夋嫨鍛婅鍚嶇О"
+                    >
+                      <el-option
+                        v-for="item in alarmTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <el-radio-group
+                    v-model="alarmLevel"
+                    size="small"
+                    style="grid-column: span 6;"
+                  >
+                    <el-radio-button :value="1">涓�绾у憡璀�</el-radio-button>
+                    <el-radio-button :value="2">浜岀骇鍛婅</el-radio-button>
+                    <el-radio-button :value="3">涓夌骇鍛婅</el-radio-button>
+                    <el-radio-button :value="4">鍥涚骇鍛婅</el-radio-button>
+                  </el-radio-group>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="page-content-page">
-            <div class="page-tool">
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="getList0"
-                :icon="Search"
-                >鏌ヨ</el-button
-              >
+            <div class="page-content-table">
+              <div class="pos-rel">
+                <div class="pos-abs">
+                  <el-table
+                    class="yc-table"
+                    stripe
+                    height="100%"
+                    size="small"
+                    :data="datas0.tableData"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      type="index"
+                      fixed="left"
+                      label="搴忓彿"
+                      width="60"
+                    ></el-table-column>
+                    <el-table-column
+                      v-for="header in headers0"
+                      :key="header.prop"
+                      :prop="header.prop"
+                      :label="header.label"
+                      :min-width="header.width"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <template v-if="header.prop == 'almIsConfirmed'">
+                          <el-checkbox
+                            disabled
+                            :checked="scope.row[header.prop] == 1"
+                          ></el-checkbox>
+                        </template>
+                        <template v-else>
+                          {{ scope.row[header.prop] || '--' }}
+                        </template>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      label="鎿嶄綔"
+                      fixed="right"
+                      width="120"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <el-button
+                          type="warning"
+                          size="small"
+                          @click="view(scope.row)"
+                          >鏌ョ湅璇︽儏</el-button
+                        >
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
             </div>
-            <div class="el-page-container">
-              <el-pagination v-model:current-page="pageNum0" v-model:page-size="pageSize0"
-                :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" layout="total, sizes, prev, pager, next, jumper" :total="total0"
-                @size-change="handleSizeChange0" @current-change="handleCurrentChange0" />
-            </div>
-            <div class="page-tool">
-              <!-- <el-button type="primary" round size="small" @click="exportExcel"
+            <div class="page-content-page">
+              <div class="page-tool">
+                <el-button
+                  type="primary"
+                  round
+                  size="small"
+                  @click="getList0"
+                  :icon="Search"
+                  >鏌ヨ</el-button
+                >
+              </div>
+              <div class="el-page-container">
+                <el-pagination
+                  v-model:current-page="pageNum0"
+                  v-model:page-size="pageSize0"
+                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
+                  size="small"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total0"
+                  @size-change="handleSizeChange0"
+                  @current-change="handleCurrentChange0"
+                />
+              </div>
+              <div class="page-tool">
+                <!-- <el-button type="primary" round size="small" @click="exportExcel"
                 >瀵煎嚭</el-button
               >
               <el-button type="primary" round size="small" @click="exportExcelAll"
                 >瀵煎嚭鍏ㄩ儴</el-button
               > -->
+              </div>
             </div>
           </div>
-        </div>
         </el-tab-pane>
-        <el-tab-pane name="dev" label="璁惧鍛婅">璁惧鍛婅</el-tab-pane>
-        <el-tab-pane name="batt" label="鐢垫睜鍛婅">鐢垫睜鍛婅</el-tab-pane>
+        <el-tab-pane name="dev" class="tab-pane" label="璁惧鍛婅">
+          <div class="page-content-wrapper">
+            <div class="page-content-tools page-filter">
+              <div class="grid-container" :style="{'--counter': 9}">
+                <div class="grid-item">
+                  <div class="label">鐪�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="provice"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨鐪�"
+                    >
+                      <el-option
+                        v-for="item in proviceList"
+                        :key="'l0_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">甯�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="city"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨甯�"
+                    >
+                      <el-option
+                        v-for="item in cityList"
+                        :key="'l1_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍖哄幙</div>
+                  <div class="value">
+                    <el-select
+                      v-model="country"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鍖哄幙"
+                    >
+                      <el-option
+                        v-for="item in countryList"
+                        :key="'l2_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">绔欑偣</div>
+                  <div class="value">
+                    <el-select
+                      v-model="stationName"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨绔欑偣"
+                    >
+                      <el-option
+                        v-for="item in stationList"
+                        :key="'l3_' + item.stationId"
+                        :label="item.stationName"
+                        :value="item.stationName"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鐢垫簮鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="powerId"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鐢垫簮"
+                    >
+                      <el-option
+                        v-for="item in powerList"
+                        :key="'l4_' + item.powerId"
+                        :label="`${item.stationName}-${item.powerName}`"
+                        :value="item.powerId"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍛婅鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="alarmId"
+                      size="small"
+                      clearable
+                      filterable
+                      placeholder="璇烽�夋嫨鍛婅鍚嶇О"
+                    >
+                      <el-option
+                        v-for="item in alarmTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <el-radio-group
+                    v-model="alarmLevel"
+                    size="small"
+                    style="grid-column: span 6;"
+                  >
+                    <el-radio-button :value="1">涓�绾у憡璀�</el-radio-button>
+                    <el-radio-button :value="2">浜岀骇鍛婅</el-radio-button>
+                    <el-radio-button :value="3">涓夌骇鍛婅</el-radio-button>
+                    <el-radio-button :value="4">鍥涚骇鍛婅</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </div>
+            </div>
+            <div class="page-content-table">
+              <div class="pos-rel">
+                <div class="pos-abs">
+                  <el-table
+                    class="yc-table"
+                    stripe
+                    height="100%"
+                    size="small"
+                    :data="datas1.tableData"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      type="index"
+                      fixed="left"
+                      label="搴忓彿"
+                      width="60"
+                    ></el-table-column>
+                    <el-table-column
+                      v-for="header in headers1"
+                      :key="header.prop"
+                      :prop="header.prop"
+                      :label="header.label"
+                      :min-width="header.width"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <template v-if="header.prop == 'almIsConfirmed'">
+                          <el-checkbox
+                            disabled
+                            :checked="scope.row[header.prop] == 1"
+                          ></el-checkbox>
+                        </template>
+                        <template v-else>
+                          {{ scope.row[header.prop] || '--' }}
+                        </template>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      label="鎿嶄綔"
+                      fixed="right"
+                      width="120"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <el-button
+                          type="warning"
+                          size="small"
+                          @click="view(scope.row)"
+                          >鏌ョ湅璇︽儏</el-button
+                        >
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
+            </div>
+            <div class="page-content-page">
+              <div class="page-tool">
+                <el-button
+                  type="primary"
+                  round
+                  size="small"
+                  @click="getList1"
+                  :icon="Search"
+                  >鏌ヨ</el-button
+                >
+              </div>
+              <div class="el-page-container">
+                <el-pagination
+                  v-model:current-page="pageNum1"
+                  v-model:page-size="pageSize1"
+                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
+                  size="small"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total1"
+                  @size-change="handleSizeChange1"
+                  @current-change="handleCurrentChange1"
+                />
+              </div>
+              <div class="page-tool">
+                <!-- <el-button type="primary" round size="small" @click="exportExcel"
+                  >瀵煎嚭</el-button
+                >
+                <el-button type="primary" round size="small" @click="exportExcelAll"
+                  >瀵煎嚭鍏ㄩ儴</el-button
+                > -->
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="batt" class="tab-pane" label="鐢垫睜鍛婅">
+          <div class="page-content-wrapper">
+            <div class="page-content-tools page-filter">
+              <div class="grid-container" :style="{'--counter': 9}">
+                <div class="grid-item">
+                  <div class="label">鐪�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="provice"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨鐪�"
+                    >
+                      <el-option
+                        v-for="item in proviceList"
+                        :key="'l0_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">甯�</div>
+                  <div class="value">
+                    <el-select
+                      v-model="city"
+                      size="small"
+                      clearable
+                      placeholder="璇烽�夋嫨甯�"
+                    >
+                      <el-option
+                        v-for="item in cityList"
+                        :key="'l1_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍖哄幙</div>
+                  <div class="value">
+                    <el-select
+                      v-model="country"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鍖哄幙"
+                    >
+                      <el-option
+                        v-for="item in countryList"
+                        :key="'l2_' + item"
+                        :label="item"
+                        :value="item"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">绔欑偣</div>
+                  <div class="value">
+                    <el-select
+                      v-model="stationName"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨绔欑偣"
+                    >
+                      <el-option
+                        v-for="item in stationList"
+                        :key="'l3_' + item.stationId"
+                        :label="item.stationName"
+                        :value="item.stationName"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鐢垫簮鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="powerId"
+                      clearable
+                      size="small"
+                      placeholder="璇烽�夋嫨鐢垫簮"
+                    >
+                      <el-option
+                        v-for="item in powerList"
+                        :key="'l4_' + item.powerId"
+                        :label="`${item.stationName}-${item.powerName}`"
+                        :value="item.powerId"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <div class="label">鍛婅鍚嶇О</div>
+                  <div class="value">
+                    <el-select
+                      v-model="alarmId"
+                      size="small"
+                      clearable
+                      filterable
+                      placeholder="璇烽�夋嫨鍛婅鍚嶇О"
+                    >
+                      <el-option
+                        v-for="item in alarmTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="grid-item">
+                  <el-radio-group
+                    v-model="alarmLevel"
+                    size="small"
+                    style="grid-column: span 6;"
+                  >
+                    <el-radio-button :value="1">涓�绾у憡璀�</el-radio-button>
+                    <el-radio-button :value="2">浜岀骇鍛婅</el-radio-button>
+                    <el-radio-button :value="3">涓夌骇鍛婅</el-radio-button>
+                    <el-radio-button :value="4">鍥涚骇鍛婅</el-radio-button>
+                  </el-radio-group>
+                </div>
+              </div>
+            </div>
+            <div class="page-content-table">
+              <div class="pos-rel">
+                <div class="pos-abs">
+                  <el-table
+                    class="yc-table"
+                    stripe
+                    height="100%"
+                    size="small"
+                    :data="datas2.tableData"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      type="index"
+                      fixed="left"
+                      label="搴忓彿"
+                      width="60"
+                    ></el-table-column>
+                    <el-table-column
+                      v-for="header in headers2"
+                      :key="header.prop"
+                      :prop="header.prop"
+                      :label="header.label"
+                      :min-width="header.width"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <template v-if="header.prop == 'almIsConfirmed'">
+                          <el-checkbox
+                            disabled
+                            :checked="scope.row[header.prop] == 1"
+                          ></el-checkbox>
+                        </template>
+                        <template v-else>
+                          {{ scope.row[header.prop] || '--' }}
+                        </template>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      label="鎿嶄綔"
+                      fixed="right"
+                      width="120"
+                      align="center"
+                    >
+                      <template #default="scope">
+                        <el-button
+                          type="warning"
+                          size="small"
+                          @click="view(scope.row)"
+                          >鏌ョ湅璇︽儏</el-button
+                        >
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
+            </div>
+            <div class="page-content-page">
+              <div class="page-tool">
+                <el-button
+                  type="primary"
+                  round
+                  size="small"
+                  @click="getList2"
+                  :icon="Search"
+                  >鏌ヨ</el-button
+                >
+              </div>
+              <div class="el-page-container">
+                <el-pagination
+                  v-model:current-page="pageNum2"
+                  v-model:page-size="pageSize2"
+                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
+                  size="small"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total2"
+                  @size-change="handleSizeChange2"
+                  @current-change="handleCurrentChange2"
+                />
+              </div>
+              <div class="page-tool">
+                <!-- <el-button type="primary" round size="small" @click="exportExcel"
+                  >瀵煎嚭</el-button
+                >
+                <el-button type="primary" round size="small" @click="exportExcelAll"
+                  >瀵煎嚭鍏ㄩ儴</el-button
+                > -->
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
     <div class="page-footer">
       <div class="left">
-        <card :title="name0"></card>
+        <card :title="name0">
+          <line-chart ref="chart0"></line-chart>
+        </card>
       </div>
       <div class="right">
         <div class="btn-grp">
-          <!-- <div class="item">
+          <div class="item">
             <div class="label">閫夋嫨鐢垫睜缁�</div>
             <div class="value">
               <el-select
                 v-model="battId"
                 size="small"
                 clearable
+                @change="getRtData"
                 placeholder="璇烽�夋嫨鐢垫睜缁�"
               >
                 <el-option
                   v-for="item in battList"
-                  :key="'l5_' + item.powerId"
-                  :label="`${item.stationName}-${item.powerName}`"
-                  :value="item.powerId"
+                  :key="'l5_' + item.battgroupId"
+                  :label="`${item.devName}-${item.battgroupName}`"
+                  :value="item.battgroupId"
                 >
                 </el-option>
               </el-select>
             </div>
           </div>
           <div class="item">
-            <div class="label">璁剧疆鏃堕棿鍛ㄦ湡</div>
+            <div class="label">璁剧疆鏃堕棿鍛ㄦ湡(鍒嗛挓)</div>
             <div class="value">
-              {{ 132 }}
+              <div class="input">{{ timeLong }}</div>
             </div>
+            <el-button type="primary" size="small" @click="setTime"
+              >璁剧疆</el-button
+            >
           </div>
           <div class="item">
-            <div class="label">鍏虫敞灞炴��</div>
-          </div> -->
+            <el-button type="primary" size="small" @click="setProp"
+              >鍏虫敞灞炴��</el-button
+            >
+          </div>
         </div>
         <!-- 涓�涓氨鍒嗕竴鍧� 涓や釜灏卞垎涓ゅ垪涓�琛� 涓や釜浠ヤ笂灏变袱鍒椾袱琛� -->
-        <div :class="['contain', { 'grid1': subProp.length == 1, 'grid2': subProp.length == 2, 'grid3': subProp.length > 2}]">
+        <div
+          :class="['contain', { 'grid1': subProp.length == 1, 'grid2': subProp.length == 2, 'grid3': subProp.length > 2}]"
+        >
           <template v-for="(sub, idx) in subProp" :key="'sub_' + idx">
-            <card :title="'娆″睘鎬�' + (idx + 1)">
-              <line-chart :ref="() => chartRefs[idx]"></line-chart>
+            <card :title="sub.name">
+              <line-chart
+                :ref="(el) => setComponentRef(sub.prop, el)"
+              ></line-chart>
             </card>
           </template>
         </div>
@@ -555,21 +1573,60 @@
     <!-- 寮圭獥 -->
     <el-dialog
       :title="dialogTitle"
-      v-model="addEditVisible"
+      v-model="timeVisible"
       top="0"
       draggable
       :close-on-click-modal="false"
       class="dialog-center"
-      width="860px"
+      width="460px"
       center
     >
-      <alarm-params
-        v-if="addEditVisible"
-        :type="alarmType"
-        :info="currentRow"
-        @change="getList"
-        v-model:visible="addEditVisible"
-      ></alarm-params>
+      <el-form ref="formRef" :model="form1" :rules="rules" label-width="10em">
+        <el-row :gutter="layout.gutter">
+          <el-col :span="layout.span">
+            <el-form-item label="鏃堕棿鍛ㄦ湡(鍒嗛挓)" prop="time">
+              <el-input v-model="form1.time"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="timeVisible = false">鍙� 娑�</el-button>
+          <el-button type="primary" @click="timeSetOk">纭� 瀹�</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 寮圭獥 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-model="propVisible"
+      top="0"
+      draggable
+      :close-on-click-modal="false"
+      class="dialog-center transfer-dialog"
+      width="940px"
+      center
+    >
+      <tree-transfer
+        v-model:fromData="fromData"
+        :titleList="['鏈叧娉ㄥ睘鎬�', '宸插叧娉ㄥ睘鎬�']"
+        ref="transferRef"
+        :showBtnTxt="true"
+        :btnTitleList="['娣诲姞', '绉婚櫎']"
+        rootPid="0"
+        v-model:toData="toData"
+        :defaultProps="{label:'label', id: 'id', parentId: 'pid', children: 'children'}"
+        @add="add"
+        @remove="remove"
+      >
+      </tree-transfer>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="propVisible = false">鍙� 娑�</el-button>
+          <el-button type="primary" @click="propSetOk">纭� 瀹�</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -710,6 +1767,54 @@
     height: 100%;
   }
 }
+.btn-grp {
+  .item {
+    font-size: 14px;
+    color: #439bc4;
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+    .label {
+      &::after {
+        content: ':';
+      }
+    }
+    .value {
+      margin-left: 8px;
+      margin-right: 8px;
+      :deep(.el-select) {
+        width: 120px;
+      }
+    }
+    .input {
+      display: flex;
+      align-items: center;
+      padding-left: 6px;
+      color: #fff;
+      background: #439bc4;
+      border-radius: 4px;
+      min-width: 86px;
+      height: 28px;
+    }
+  }
+}
+
+.item-setting {
+  display: flex;
+  align-items: center;
+  .label {
+    &::after {
+      content: ':';
+    }
+  }
+  .value {
+    margin-left: 8px;
+  }
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
 
 .tools-filter {
   display: inline-block;
@@ -728,4 +1833,10 @@
     }
   }
 }
+:deep(.transfer-dialog) {
+  .el-tree {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+}
 </style>

--
Gitblit v1.9.1