Sfoglia il codice sorgente

光钎测温修改-提交

lxh 4 mesi fa
parent
commit
462bef9769

+ 0 - 50
src/views/vent/gas/gasInspectNonfc/components/inspectDel.vue

@@ -1,50 +0,0 @@
-<template>
-    <div class="inspectEdit">
-        <div class="card-area">
-
-            <a-popconfirm title="删除内容无法恢复,是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelCard"
-                @cancel="handleCancelDelCard">
-                <a-button type="primary" preIcon="ant-design:delete-outlined">删除巡检卡</a-button>
-            </a-popconfirm>
-            <a-popconfirm title="删除内容无法恢复,是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelCardInfo"
-                @cancel="handleCancelDelCard">
-                <a-button type="primary" preIcon="ant-design:delete-outlined">删除巡检信息</a-button>
-            </a-popconfirm>
-
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let $emit = defineEmits(['handleDelCard', 'handleDelCardInfo', 'handleCancelDelCard'])
-//删除巡检卡
-let handleDelCard = () => {
-    $emit('handleDelCard')
-}
-//删除巡检卡信息
-let handleDelCardInfo = () => {
-    $emit('handleDelCardInfo')
-}
-//取消删除巡检卡或者巡检信息
-let handleCancelDelCard = () => {
-    $emit('handleCancelDelCard')
-}
-
-</script>
-
-<style lang="less" scoped>
-.inspectEdit {
-    padding: 10px;
-    box-sizing: border-box;
-
-    .card-area {
-        width: 100%;
-        margin: 10px;
-        display: flex;
-        justify-content: space-around;
-    }
-}
-</style>

+ 4 - 10
src/views/vent/gas/gasInspectNonfc/components/inspectEdit.vue

@@ -6,10 +6,7 @@
                 <a-input v-model:value="formStateEdit.id" disabled />
             </a-form-item>
             <a-form-item label="瓦斯巡检地点:">
-                <a-select ref="select" v-model:value="formStateEdit.strInstallPos" placeholder="请选择...">
-                    <a-select-option v-for="(item, index) in addressList" :key="index">{{ item.label
-                        }}</a-select-option>
-                </a-select>
+                <a-input v-model:value="formStateEdit.strinstallpos" placeholder="请输入瓦斯巡检地点" clearable/>
             </a-form-item>
             <a-form-item label="所属区队:">
                 <a-select ref="select" v-model:value="formStateEdit.disTeamId" placeholder="请选择...">
@@ -44,14 +41,11 @@ let props = defineProps({
 
 let formStateEdit = reactive<any>({
     id: '',
-    strInstallPos: '',
+    strinstallpos: '',
     disTeamId: '',
     insType: '',
 })
-let addressList = ref<any[]>([//监测地点下拉选项列表
-    // { label: '地址1', value: '1' },
-    // { label: '地址2', value: '2' },
-])
+
 let qdList = ref<any[]>([])//区队下拉选项列表
 let $emit = defineEmits(['confirmEdit', 'cancelEdit'])
 
@@ -76,7 +70,7 @@ let confirmEdit = () => {
 let cancelEdit = () => {
     formStateEdit = {
         id: '',
-        strInstallPos: '',
+        strinstallpos: '',
         disTeamId: '',
         insType: '',
     }

+ 5 - 5
src/views/vent/gas/gasInspectNonfc/gasInspectNonfc.api.ts

@@ -2,15 +2,15 @@ import { defHttp } from '/@/utils/http/axios';
 
 
 enum Api {
-    list = '/safety/gasInsCard/list',//通过id(巡检卡id)查询
+    list = '/safety/gasIns/list',//通过id(巡检卡id)查询
     importByExcel='/safety/gasDayReport/importByExcel',//导入瓦斯巡检地址
     exportGasByExcel='/safety/gasDayReport/exportGasByExcel',//导出瓦斯巡检地址
     queryAllDisTeam='/safety/disTeamInfo/queryAllDisTeam',//查询所有区队
-    moveOrderNum='/safety/gasInsCard/moveOrderNum',//上下移接口
-    edit='/safety/gasInsCard/edit',//瓦斯巡检地点编辑
+    moveOrderNum='/safety/gasIns/moveOrderNum',//上下移接口
+    edit='/safety/gasIns/edit',//瓦斯巡检地点编辑
     deleteCard='/safety/gasInsCard/delete',//瓦斯巡检卡删除
     taskSubmit='/safety/disTeamInfo/edit',//任务管理下发
-    clearCardInfo='/safety/gasInsCard/clearCard',//瓦斯巡检卡信息删除
+    clearCardInfo='/safety/gasIns/delete',//瓦斯巡检卡信息删除
     getAllUserInfo='/safety/gasInsCard/getAllUserInfo'//获取早中晚班巡检员列表
 
 }
@@ -61,7 +61,7 @@ export const deleteCard = (params) => defHttp.delete({ url: Api.deleteCard, para
 /**
  * 瓦斯巡检卡信息-删除
  */
-export const clearCardInfo = (params) => defHttp.get({ url: Api.clearCardInfo, params }, { joinParamsToUrl: true });
+export const clearCardInfo = (params) => defHttp.delete({ url: Api.clearCardInfo, params }, { joinParamsToUrl: true });
 /**
  * 获取早中晚班巡检员列表
  */

+ 10 - 9
src/views/vent/gas/gasInspectNonfc/gasInspectNonfc.data.ts

@@ -14,14 +14,21 @@ export const columns: BasicColumn[] = [
     },
     {
         title: '地点',
-        dataIndex: 'strInstallPos',
-        key: 'strInstallPos',
+        dataIndex: 'strinstallpos',
+        key: 'strinstallpos',
         align: 'center',
     },
     {
         title: '巡检人',
         children: [
             {
+                title: '晚班',
+                dataIndex: 'nameNight',
+                key: 'nameNight',
+                align: 'center',
+
+            },
+            {
                 title: '早班',
                 dataIndex: 'nameEarly',
                 key: 'nameEarly',
@@ -36,13 +43,7 @@ export const columns: BasicColumn[] = [
                 align: 'center',
 
             },
-            {
-                title: '晚班',
-                dataIndex: 'nameNight',
-                key: 'nameNight',
-                align: 'center',
-
-            },
+          
         ],
     },
     {

+ 15 - 40
src/views/vent/gas/gasInspectNonfc/index.vue

@@ -46,7 +46,10 @@
                 :pagination="pagination">
                 <template #action="{ record }">
                     <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
-                    <a class="table-action-link" @click="handlerDel(record)">删除</a>
+                    <a-popconfirm title="删除内容无法恢复,是否删除" ok-text="确定" cancel-text="取消"
+                        @confirm="handleDelCardInfo(record)" >
+                        <a class="table-action-link">删除</a>
+                    </a-popconfirm>
                     <a class="table-action-link" @click="moveUp(record)">上移</a>
                     <a class="table-action-link" @click="moveDown(record)">下移</a>
                 </template>
@@ -83,12 +86,7 @@
                 <inspectEdit :inspectEditData="inspectEditData" @confirmEdit="confirmEdit" @cancelEdit="cancelEdit">
                 </inspectEdit>
             </a-modal>
-            <!-- 删除弹窗 -->
-            <a-modal v-model:visible="visibleDel" width="450px" :footer="null" :title="titleDel" centered
-                destroyOnClose>
-                <inspectDel @handleDelCard="handleDelCard" @handleDelCardInfo="handleDelCardInfo"
-                    @handleCancelDelCard="handleCancelDelCard"></inspectDel>
-            </a-modal>
+
             <!-- 导入弹窗 -->
             <a-modal v-model:visible="visibleUploadorDown" width="450px" :footer="null" :title="titleUploadorDown"
                 centered destroyOnClose>
@@ -104,11 +102,10 @@ import { ref, onMounted, computed, reactive } from 'vue';
 import customHeader from '/@/components/vent/customHeader.vue';
 import inspectTask from './components/inspectTask.vue'
 import inspectEdit from './components/inspectEdit.vue'
-import inspectDel from './components/inspectDel.vue'
 import uploadOrdown from './components/uploadOrdown.vue'
 import { message } from 'ant-design-vue';
 import { columns, pagination } from './gasInspectNonfc.data'
-import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, deleteCard, taskSubmit, clearCardInfo } from './gasInspectNonfc.api'
+import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, taskSubmit, clearCardInfo } from './gasInspectNonfc.api'
 
 
 let searchId = ref('')
@@ -118,9 +115,6 @@ let titleTask = ref('')
 let visibleEdit = ref(false)//控制编辑弹窗的显示与隐藏
 let titleEdit = ref('')//编辑弹窗标题
 let inspectEditData = reactive({})//编辑弹窗数据
-let visibleDel = ref(false)//控制删除弹窗的显示与隐藏
-let titleDel = ref('')//删除弹窗标题
-let inspectDelData = ref('')
 let visibleUploadorDown = ref(false)//控制导入/导出弹窗的显示与隐藏
 let titleUploadorDown = ref('')
 let modalType = ref('')//判断当前是导入/导出弹窗
@@ -155,42 +149,23 @@ async function confirmEdit(param) {
     let res = await edit({ ...param })
     if (res) {
         queryByIdList()
+        visibleEdit.value = false
     }
 }
 //编辑取消
 let cancelEdit = () => {
     visibleEdit.value = false
 }
-//代开删除弹窗
-let handlerDel = (record) => {
-    visibleDel.value = true
-    titleDel.value = '瓦斯巡检点删除'
-    inspectDelData.value = record.id
-}
-//删除巡检卡
-async function handleDelCard() {
-    let res = await deleteCard({ id: inspectDelData.value })
-    if (res) {
-        visibleDel.value = false
-        inspectDelData.value = ''
-        queryByIdList()
-    }
-}
+
 //删除巡检卡信息
-async function handleDelCardInfo() {
-    let res = await clearCardInfo({ id: inspectDelData.value })
+async function handleDelCardInfo(record) {
+    let res = await clearCardInfo({ id: record.id })
     console.log(res, '瓦斯巡检卡信息删除')
     if (res) {
-        visibleDel.value = false
-        inspectDelData.value = ''
         queryByIdList()
     }
 }
-//取消删除巡检卡或者巡检卡信息
-let handleCancelDelCard = () => {
-    inspectDelData.value = ''
-    visibleDel.value = false
-}
+
 
 //通过id(巡检卡id)查询
 async function queryByIdList() {
@@ -198,11 +173,11 @@ async function queryByIdList() {
     console.log(res, '列表查询---')
     pagination.current = 1
 
-    tableData.value = res.records.map((el:any)=>{
+    tableData.value = res.records.map((el: any) => {
         return {
-            morning:el.insType,
-            afterNoon:el.insType,
-            evening:el.insType,
+            morning: el.insType,
+            afterNoon: el.insType,
+            evening: el.insType,
             ...el
         }
     })

+ 30 - 1
src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -2,6 +2,7 @@ import { defineAsyncComponent } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import { useGlobSetting } from '/@/hooks/setting';
 
+
 export const locationList = [
   {
     title: '风门',
@@ -64,7 +65,8 @@ export function getMonitorComponent() {
       break;
     default:
       // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
-      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
+       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
+      // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
   }
   const BundleModal = defineAsyncComponent(() => import('./modal/bundle.modal.vue'));
   const FiremonModal = defineAsyncComponent(() => import('./modal/firemon.modal.vue'));
@@ -151,6 +153,33 @@ export const chartsColumnList = [
     dataIndex: 'o2val',
   },
 ];
+export const chartsColumnListGx = [
+  {
+    legend: '最高温度',
+    seriesName: '( °C)',
+    ymax: 100,
+    yname: ' °C',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FDB146',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'hightemperature',
+  },
+  {
+    legend: '平均温度',
+    seriesName: '( °C)',
+    ymax: 100,
+    yname: ' °C',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#00FFA8',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'avgtemperature',
+  },
+ 
+];
 export const chartsColumnListBall = [
   {
     legend: '一氧化碳',

+ 456 - 0
src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal-Gx.vue

@@ -0,0 +1,456 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
+    @cancel="handleCancel" wrapClassName="bundle-modal">
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div v-for="device in deviceList" class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
+        </div>
+      </div>
+      <div class="modal-right">
+        <span class="base-title">实时监测参数</span>
+        <div class="right-top">
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="aveg-temperature" style="width: 72px; height: 46px; " />
+            </div>
+            <div class="item-container">
+              <div class="title">平均温度</div>
+              <div class="value">{{ posMonitor.avgtemperature !== undefined && posMonitor.avgtemperature !== null ?
+                posMonitor.avgtemperature : '-' }} <span>°C</span> </div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="max-temperature" style="width: 72px; height: 46px" />
+            </div>
+            <div class="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ posMonitor.hightemperature !== undefined && posMonitor.hightemperature !== null ?
+                posMonitor.hightemperature : '-' }} <span>°C</span></div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="link" style="width: 72px; height: 46px" />
+            </div>
+            <div class="item-container">
+              <div class="title">最高温度位置</div>
+              <div class="value">{{ posMonitor.highposition !== undefined && posMonitor.highposition !== null ?
+                posMonitor.highposition : '-' }} </div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="risk-level" style="width: 76px; height: 42px" />
+            </div>
+            <div class="item-container">
+              <div class="title">报警阈值</div>
+              <div class="value">{{ posMonitor.warnthreshold !== undefined && posMonitor.warnthreshold !== null ?
+                posMonitor.warnthreshold : '-' }} <span>°C</span></div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
+            </div>
+            <div class="item-container">
+              <div class="title">报警状态</div>
+              <div :class="{
+                value1: posMonitor['warnstate'] == '0',
+                value2: posMonitor['warnstate'] == '1',
+                value5: posMonitor['warnstate'] == '2',
+                value3: posMonitor['warnstate'] == '3',
+              }">{{ posMonitor['warnstate']=='0' ? '无报警' :posMonitor['warnstate']=='1' ? '定温' : posMonitor['warnstate']=='2' ? '差温' : posMonitor['warnstate']=='3' ? '预报警' : '--' }}</div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="link" style="width: 76px; height: 50px" />
+            </div>
+            <div class="item-container">
+              <div class="title">报警位置</div>
+              <div class="value">{{ posMonitor.warnposition !== undefined && posMonitor.warnposition !== null ? posMonitor.warnposition : '-'
+                }} </div>
+            </div>
+          </div>
+
+        </div>
+        <div style="width: 100%; display: flex">
+          <div class="right-bottom">
+            <span class="base-title">历史数据监测</span>
+            <div class="echarts-box">
+              <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="historyList" height="100%"
+                width="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
+            </div>
+          </div>
+         
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { SvgIcon } from '/@/components/Icon';
+import dayjs from 'dayjs';
+import { chartsColumnListGx  } from '../device.data';
+
+
+export default defineComponent({
+  components: { BasicModal, BarAndLine, SvgIcon, },
+  props: {
+    dataSource: { type: Array },
+    activeID: { type: String },
+  },
+  setup(props) {
+    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+    const modelRef = ref({});
+    const loading = ref(true);
+    const activeDeviceID = ref('');
+    const deviceList = ref<any[]>([]);
+    const historyList = ref<any[]>([]);
+    const posMonitor = shallowRef<any>({});
+
+    const echatsOption = {
+      grid: {
+        top: '14%',
+        left: '3',
+        right: '20',
+        bottom: '3%',
+        containLabel: true,
+      },
+      toolbox: {
+        feature: null,
+      },
+    };
+
+    const chartsColumns = chartsColumnListGx;
+    const xAxisPropType = ref('highposition');
+    const [register, { setModalProps, closeModal }] = useModalInner();
+
+
+
+    // 选择监测
+    function selectDevice(id) {
+      loading.value = true;
+      setModalProps({ loading: true, confirmLoading: true });
+      setTimeout(() => {
+        loading.value = false;
+        activeDeviceID.value = id;
+        setModalProps({ loading: false, confirmLoading: false });
+      }, 300);
+
+    }
+
+    function handleOk(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+    function handleCancel(e) {
+      e.preventDefault();
+      closeModal();
+    }
+
+
+
+    watch(
+      [() => props.dataSource, () => props.activeID],
+      ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            // activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+            historyList.value=item.history || []
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+
+    });
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      historyList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      chartsColumns,
+      xAxisPropType,
+    };
+  },
+});
+</script>
+<style lang="less">
+.bundle-modal {
+  .zxm-modal {
+    top: 30px !important;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+.fiber-modal {
+  width: 100%;
+  height: 650px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .modal-left {
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    background: #ffffff11;
+    padding: 5px;
+    border-radius: 5px;
+
+    .active-device-title {
+      color: aqua;
+    }
+
+    .link-item {
+      position: relative;
+      cursor: pointer;
+      line-height: 30px;
+      padding-left: 30px;
+
+      span:hover {
+        color: #89ffff;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 8px;
+        height: 8px;
+        top: 12px;
+        left: 10px;
+        transform: rotateZ(45deg) skew(10deg, 10deg);
+        background: #45d3fd;
+      }
+    }
+  }
+
+  .modal-right {
+    width: calc(100% - 220px);
+    overflow-y: auto;
+
+    .base-title {
+      line-height: 32px;
+      position: relative;
+      padding-left: 20px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 4px;
+        height: 12px;
+        top: 4px;
+        left: 10px;
+        background: #45d3fd;
+        border-radius: 4px;
+      }
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+
+      .top-item {
+        width: 303px;
+        height: 100px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+        background: rgba(0, 0, 0, 0.06666666666666667);
+        padding-top: 20px;
+        margin: 10px 0;
+
+        .icon {
+          margin-right: 10px;
+          margin-top: 5px;
+          color: #fdb146;
+        }
+
+        .item-container {
+          width: 110px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          div {
+            text-align: center;
+          }
+
+          .title {
+            font-size: 18px;
+          }
+
+          .value {
+            text-shadow: 0 0 25px #00fbfe;
+            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+            font-style: normal;
+            background-size: cover;
+            font-family: electronicFont;
+            font-size: 30px;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            top: -8px;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
+              font-size: 18px;
+              color: aliceblue;
+            }
+          }
+        }
+      }
+
+      .warning-box {
+        padding-top: 0px;
+
+        .icon {
+          margin-top: 20px;
+
+          :deep(.icon-style) {
+            width: auto;
+            color: #fdb146;
+          }
+        }
+
+        .warning-value {
+          font-size: 18px;
+          color: #61ddb1;
+        }
+
+        .value1 {
+          font-size: 18px;
+          color: rgb(145, 230, 9) !important;
+        }
+
+        .value2 {
+          font-size: 18px;
+          // color: rgb(0, 242, 255) !important;
+          color: #ffff35 !important;
+        }
+
+        .value3 {
+          font-size: 18px;
+          // color: #ffff35 !important;
+          color: #ff0000 !important;
+        }
+
+        .value4 {
+          font-size: 18px;
+          color: #ffbe69 !important;
+        }
+
+        .value5 {
+          font-size: 18px;
+          color: #ff6f00 !important;
+        }
+
+        .value6 {
+          font-size: 18px;
+          color: #ff0000 !important;
+        }
+      }
+    }
+
+    .right-center {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .table-box {
+        position: relative;
+        width: 500px;
+        height: 250px;
+      }
+
+      .warning-box {
+        width: calc(100% - 520px);
+
+        .warning-container {
+          width: 100%;
+          height: convert;
+          background: #009acd00;
+
+          :deep(.dv-scroll-board) {
+            .row-item {
+              height: 40px !important;
+              line-height: 40px !important;
+            }
+
+            .header-item {
+              border-top: 1px solid #91e9fe !important;
+              border-bottom: 1px solid #91e9fe !important;
+            }
+          }
+        }
+      }
+    }
+
+    .right-bottom {
+      width: 100%;
+      margin-top: 10px;
+
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+        position: relative;
+        // display: flex;
+        // justify-content: space-between;
+
+        .echarts-line {
+          width: calc(100% + 80px);
+          position: absolute;
+        }
+      }
+    }
+
+
+  }
+}
+
+:deep(.zxm-table-body) {
+  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+  .zxm-table-tbody>tr>td {
+    border: none !important;
+  }
+}
+:deep(.zxm-table-wrapper){
+  padding-top: 20px;
+  box-sizing: border-box;
+}
+
+:deep(.zxm-table-cell) {
+  border-right: none !important;
+}
+</style>