公卫应急处置文字调整3

src/views/left/modules/PublicHealthEmergency copy.vue

@@ -0,0 +1,947 @@
+<template>
+  <div class="body_container">
+    <!-- 1.============= -->
+    <div class="content_one">
+      <!-- 事件报告 -->
+      <div class="modules_bg_color modules_bg" :class="{ modules_bg_color_active: commonStore.activeModule === '事件报告' }">
+        <TitleHeadermini :title="'事件报告'" @setActiveModule="setActiveModule"></TitleHeadermini>
+        <div>
+          <EventReport :levelObj="riskReportObj"></EventReport>
+        </div>
+      </div>
+
+      <!-- 事件总览 -->
+      <div class="modules_bg_color modules_bg2" :class="{ modules_bg_color_active: commonStore.activeModule === '事件总览' }">
+        <TitleHeader :title="'事件总览'" :buttons="riskOverViewButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeader>
+        <div class="modules_bg2_body">
+          <div>
+            <EventReport :levelObj="riskOverViewObj"></EventReport>
+          </div>
+          <div class="modules_bg2_body_right">
+            <div class="riskOver_header">
+              <TowLevelTitle :title="riskOverViewtTitle"></TowLevelTitle>
+              <div class="riskOver_header_tag">
+                <div></div>
+                <span>事件数</span>
+              </div>
+            </div>
+
+            <div class="modules_bg2_body_bar">
+              <BarChart></BarChart>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 2.=================== -->
+    <div class="content_two">
+      <!-- 事件处置 -->
+      <div class="modules_bg_color modules_bg_340" :class="{ modules_bg_color_active: commonStore.activeModule === '事件处置' }">
+        <TitleHeadersmall :title="'事件处置'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
+        <div class="two_level_body">
+          <EventTwoView :levelObj="riskTwoViewObj"></EventTwoView>
+        </div>
+      </div>
+
+      <!-- 重大活动保障 -->
+      <div class="modules_bg_color modules_bg_340" :class="{ modules_bg_color_active: commonStore.activeModule === '重大活动保障' }">
+        <TitleHeadersmall :title="'重大活动保障'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
+        <div class="two_level_body">
+          <EventTwoView :levelObj="majorEventGuaranteeObj"></EventTwoView>
+        </div>
+      </div>
+
+      <!-- 已结案事件 -->
+      <div class="modules_bg_color modules_bg_412" :class="{ modules_bg_color_active: commonStore.activeModule === '已结案事件' }">
+        <TitleHeadersmall :title="'已结案事件'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
+        <div class="two_level_body">
+          <!-- <RiskTwoView :levelObj="riskClosedCaseObj"></RiskTwoView> -->
+          <EventTwoView :levelObj="riskClosedCaseObj"></EventTwoView>
+        </div>
+      </div>
+    </div>
+
+    <!-- 3. 风险列表========================= -->
+    <PublicHealthEmergencyTable></PublicHealthEmergencyTable>
+
+    <!-- 4.===================== -->
+    <div class="content_four modules_bg_color" :class="{ modules_bg_color_active: commonStore.activeModule === '应急处置资源' }">
+      <TitleHeaderLong :title="'应急处置资源'" :buttons="[]" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeaderLong>
+      <div class="content_four_body">
+        <!-- 派单情况 -->
+        <div class="modules_bg_color2 modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
+          <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
+          <div class="modules_bg_pdqk_body">
+            <div class="modules_bg_pdqk_body_item">
+              <img src="../../../assets//img/发出指令.png" alt="" />
+              <div>发出指令</div>
+              <span>25</span>
+            </div>
+            <!-- <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img"> -->
+            <div class="modules_bg_pdqk_body_item">
+              <img src="../../../assets//img/签收指令.png" alt="" />
+              <div>签收指令</div>
+              <span>22</span>
+            </div>
+            <!-- <img src="../../../assets/img/连线方向箭头.png" alt=""  class="line_img"> -->
+            <div class="modules_bg_pdqk_body_item">
+              <img src="../../../assets//img/完成指令.png" alt="" />
+              <div>完成指令</div>
+              <span>17</span>
+            </div>
+
+            <!-- <div class="line">
+              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" />
+              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2" />
+            </div> -->
+
+            <div class="imgbox img-first"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+            <div class="imgbox img-second"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+          </div>
+        </div>
+
+        <!-- 检测设备 -->
+        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
+          <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
+          <div class="modules_bg_jcsb_body">
+            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+            <div class="modules_bg_jcsb_body_left">
+              <div class="modules_bg_jcsb_body_left_content">
+                <div>
+                  <img src="../../../assets//img/装备总数.png" alt="" />
+                  <div>装备总数</div>
+                  <span>205</span>
+                </div>
+                <img src="../../../assets/img/方向箭头.png" alt="" />
+                <div>
+                  <div>使用中</div>
+                  <span>108</span>
+                </div>
+              </div>
+            </div>
+            <div class="progress">
+              <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
+              <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->
+
+              <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+              <span class="text">使用率</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 应急人员 -->
+        <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
+          <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
+          <div class="modules_bg_yjry_body">
+            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+            <div class="modules_bg_yjry_body_zhz">
+              <img src="../../../assets//img/指挥长.png" alt="" />
+              <span>指挥长</span>
+              <div>
+                吴寰宇
+                <img src="../../../assets/img/视频电话.png" alt="" />
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="modules_bg_yjry_left_content">
+              <div class="modules_bg_yjry_left">
+                <div class="modules_bg_yjry_left_content">
+                  <div>
+                    <img src="../../../assets//img/备班人数.png" alt="" />
+                    <div>备班人数</div>
+                    <span>205</span>
+                  </div>
+                  <img src="../../../assets/img/方向箭头.png" alt="" />
+                  <div>
+                    <div>出动数</div>
+                    <span>108</span>
+                  </div>
+                </div>
+              </div>
+              <div class="progress">
+                <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
+                <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
+                <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                <span class="text">出动率</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 应急车辆 -->
+        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
+          <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
+          <div class="modules_bg_jcsb_body">
+            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+            <div class="modules_bg_jcsb_body_left">
+              <div class="modules_bg_jcsb_body_left_content">
+                <div>
+                  <img src="../../../assets//img/车辆.png" alt="" />
+                  <div>车辆</div>
+                  <span>115</span>
+                </div>
+                <img src="../../../assets/img/方向箭头.png" alt="" />
+                <div>
+                  <div>出动数</div>
+                  <span>90</span>
+                </div>
+              </div>
+            </div>
+            <div class="progress">
+              <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
+              <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
+              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+              <span class="text">出动率</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 地图工具 -->
+    <!-- <MapTools></MapTools> -->
+  </div>
+</template>
+<script setup>
+import MapTools from './components/dialog/MapTools.vue'
+import BarChart from '../comp/BarChart.vue'
+import TitleHeadermini from '../../../components/TitleHeadermini'
+import TitleHeadersmall from '../../../components/TitleHeadersmall'
+import TitleHeader from '../../../components/TitleHeader'
+import TitleHeaderLong from '../../../components/TitleHeaderLong'
+// import RiskTableHeader from '../../../components/TitleHeaderLong/RiskTableHeader'
+import PublicHealthEmergencyTable from './common/PublicHealthEmergencyTable.vue'
+import TowLevelTitle from '../../../components/TowLevelTitle'
+import RiskReport from '../comp/RiskReport.vue'
+import EventReport from '../comp/EventReport.vue'
+import RiskTwoView from '../comp/RiskTwoView.vue'
+import EventTwoView from '../comp/EventTwoView.vue'
+
+import MyProgress from './common/MyProgress'
+import { ref, nextTick, toRaw, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { handleRiskStatistic } from '@/utils/map/baseMethod.js'
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
+
+// let riskReportObj = ref([{ id: 1, level: 'A', count: 0 }, { id: 2, level: 'B', count: 0 }, { id: 3, level: 'C', count: 0 }, { id: 4, level: 'D', count: 0 },])
+const emit = defineEmits(['openRiskBigTable'])
+
+function setActiveModule(module, name) {
+  //关闭上一个模块的的功能
+  // if(commonStore.activeModule === "风险报告"){
+  //   handleRiskStatistic(false)
+  // }
+  // handleRiskStatistic(false)
+  console.log(module, 'module')
+  commonStore.activeModule = module
+
+  nextTick(() => {
+    //打开各模块功能
+    if (commonStore.activeModule === '事件报告') {
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], '日')
+    } else {
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], name)
+    }
+  })
+
+  if (commonStore.activeModule === '应急处置资源') {
+    commonStore.alertKey = Date.now()
+    commonStore.alertMessage = '敬请期待'
+    commonStore.showAlert = true
+  }
+
+  switch (module) {
+    case '检测设备':
+      commonStore.alertMessage = '暂未检测到设备信号'
+      break
+    case '派单情况':
+      commonStore.alertMessage = '暂未获取派单情况'
+      break
+    case '应急人员':
+      commonStore.alertMessage = '暂未检测到应急人员信号'
+      break
+    case '应急车辆':
+      commonStore.alertMessage = '暂未检测到应急车辆信号'
+      break
+
+    default:
+      break
+  }
+  if (['检测设备', '派单情况', '应急人员', '应急车辆'].includes(module)) {
+    commonStore.alertKey = Date.now()
+    commonStore.showAlert = true
+  }
+}
+
+// 模块 年 月 日
+function btnClick(item, module) {
+  console.log(item, 'item=btnClick')
+  switch (module) {
+    case '事件总览':
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], item.name)
+      if (item.name === '年') {
+        riskOverViewObj.value = {
+          name: '当年累计',
+          count: 147,
+          levelList: [
+            { id: 1, level: '特别重大', count: 12 },
+            { id: 2, level: '重大', count: 42 },
+            { id: 3, level: '较大', count: 26 },
+            { id: 4, level: '一般', count: 53 },
+            { id: 5, level: '未分级', count: 15 }
+          ]
+        }
+      } else if (item.name === '月') {
+        riskOverViewObj.value = {
+          name: '当月累计',
+          count: 27,
+          levelList: [
+            { id: 1, level: '特别重大', count: 1 },
+            { id: 2, level: '重大', count: 3 },
+            { id: 3, level: '较大', count: 12 },
+            { id: 4, level: '一般', count: 8 },
+            { id: 5, level: '未分级', count: 3 }
+          ]
+        }
+      }
+      break
+    case '事件处置':
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], item.name)
+      break
+    case '重大活动保障':
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], item.name)
+      break
+    case '已结案事件':
+      handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], item.name)
+      break
+
+    default:
+      break
+  }
+}
+
+// 1.=====================================
+let riskReportObj = ref({
+  name: '当日新增',
+  count: 5,
+  levelList: [
+    { id: 1, level: '特别重大', count: 1 },
+    { id: 2, level: '重大', count: 0 },
+    { id: 3, level: '较大', count: 2 },
+    { id: 4, level: '一般', count: 2 },
+    { id: 5, level: '未分级', count: 2 }
+  ]
+})
+
+let riskOverViewObj = ref({
+  name: '当年累计',
+  count: 147,
+  levelList: [
+    { id: 1, level: '特别重大', count: 12 },
+    { id: 2, level: '重大', count: 42 },
+    { id: 3, level: '较大', count: 26 },
+    { id: 4, level: '一般', count: 53 },
+    { id: 5, level: '未分级', count: 15 }
+  ]
+})
+const riskOverViewButtons = ref([
+  { id: 1, name: '月', active: false },
+  { id: 2, name: '年', active: true }
+])
+
+const riskOverViewTwoButtons = ref([
+  { id: 1, name: '按分类', active: false },
+  { id: 2, name: '按级别', active: true }
+])
+
+const riskOverViewtTitle = ref('公共卫生事件分布图')
+
+// 2.====================================================
+const timeButtons = ref([
+  // { id: 1, name: '日', active: false },
+  // { id: 2, name: '月', active: false },
+  // { id: 3, name: '年', active: true }
+])
+
+// 风险处置
+const riskTwoViewObj = ref({
+  name: '处置中',
+  count: 76,
+  levelList: [
+    { id: 1, level: '特别重大', count: 11 },
+    { id: 2, level: '重大', count: 8 },
+    { id: 3, level: '较大', count: 35 },
+    { id: 4, level: '一般', count: 22 },
+    { id: 5, level: '未分级', count: 0 }
+  ]
+})
+
+// 重大活动保障
+const majorEventGuaranteeObj = ref({
+  name: '处置中',
+  count: 58,
+  levelList: [
+    { id: 1, level: '特别重大', count: 13 },
+    { id: 2, level: '重大', count: 9 },
+    { id: 3, level: '较大', count: 26 },
+    { id: 4, level: '一般', count: 26 },
+    { id: 5, level: '未分级', count: 3 }
+  ]
+})
+
+// 已结案风险
+const riskClosedCaseObj = ref({
+  name: '已结案',
+  count: 5,
+  levelList: [
+    { id: 1, level: '特别重大', count: 1 },
+    { id: 2, level: '重大', count: 0 },
+    { id: 3, level: '较大', count: 1 },
+    { id: 4, level: '一般', count: 3 },
+    { id: 5, level: '未分级', count: 3 }
+  ]
+})
+
+// 3.风险列表=======================
+const riskTableButtons = ref([
+  { id: 1, name: '处置中', active: false },
+  { id: 2, name: '已结案', active: true },
+  { id: 3, name: '重大活动', active: true }
+])
+
+const riskTableconfig = ref({
+  indexHeader: '编号',
+  header: ['事件名称', '风险等级', '报告单位', '报告时间', '发生地点', '处置单位', '病例数', '重点场所', '重点人群', '最新状态'],
+  data: [
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实'],
+    ['行1列', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '2024-12-25', '已核实']
+  ],
+  rowNum: 3,
+  index: true,
+  columnWidth: [50],
+  align: ['center'],
+  headerBGC: 'rgba(34, 155, 188, 0.3)',
+  headerHeight: 38,
+  oddRowBGC: 'rgba(0, 170, 255, 0.15)',
+  evenRowBGC: 'rgba(10, 39, 50, 0.15)',
+  hoverPause: true,
+  rowClass: 'custom-row-style'
+  // itemStyle: {
+  //   height: '40px',
+  //   lineHeight: '40px',
+  //   marginBottom: '10px'
+  // }
+})
+
+function openRiskBigTable() {
+  // console.log('openRiskBigTable')
+  emit('openRiskBigTable')
+}
+
+onMounted(() => {
+  // commonStore.activeTools['风险列表'] = true
+  // commonStore.activeTools['图例'] = true
+  commonStore.activeTools = {
+    风险列表: true,
+    图例: true,
+    色阶图: true
+  }
+
+  handleRiskStatistic(true, ['A级', 'B级', 'C级', 'D级'], '年')
+})
+</script>
+<style lang="scss" scoped>
+.body_container {
+  width: 100%;
+  // height: 100%;
+  height: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.content_one {
+  display: flex;
+  gap: 16px;
+}
+
+.modules_bg_color {
+  position: relative;
+  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.2) 100%);
+  border-radius: 0px 0px 0px 0px;
+}
+
+.modules_bg_color2 {
+  position: relative;
+  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.2) 100%);
+  border-radius: 0px 0px 0px 0px;
+}
+
+.modules_bg_color::after {
+  position: absolute;
+  content: '';
+  left: 0%;
+  right: 0%;
+  bottom: 0;
+  height: 3px;
+  background-image: url('@/assets/img/image-bottom.png');
+  background-size: 100% 50%;
+}
+
+.modules_bg {
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+  width: 320px;
+  // height: 253px;
+  height: 244px;
+  // padding: 0 10px;
+  box-sizing: border-box;
+
+  // background: url('../../../assets/img/m_bg.png');
+}
+
+.modules_bg2 {
+  // width: 808px;
+  // width: 768px;
+  width: 788px;
+  // height: 253px;
+  height: 244px;
+  padding-left: 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+}
+
+.modules_bg2_body {
+  display: flex;
+  justify-content: space-between;
+}
+
+.modules_bg2_body_right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 494px;
+  margin-left: 10px;
+  .riskOver_header {
+    width: 100%;
+    position: relative;
+    .riskOver_header_tag {
+      position: absolute;
+      top: 0;
+      right: 0px;
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      > div {
+        width: 16px;
+        height: 16px;
+        background: #30c9c9;
+        margin-right: 10px;
+      }
+      > span {
+        color: #abb5c3;
+      }
+    }
+  }
+}
+
+.modules_bg2_body_bar {
+  // flex: 1;
+  width: 444px;
+  // height: 144px;
+  // height: 150px;
+  height: 100%;
+  color: azure;
+  // background-color: pink;
+  margin: 0 auto;
+}
+
+.content_two {
+  display: flex;
+  gap: 10px;
+}
+
+.modules_bg_340 {
+  // width: 340px;
+  width: 380px;
+  height: 187px;
+}
+
+.modules_bg_412 {
+  width: 380px;
+  height: 187px;
+  // padding: 0 10px;
+}
+
+.two_level_body {
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.content_four {
+  // flex: 1;
+  width: 100%;
+  height: 210px;
+
+  .content_four_body {
+    height: 152px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.6) 100%);
+    border-radius: 0px 0px 0px 0px;
+    // border: 1px solid;
+    // border-image: linear-gradient(180deg, rgba(7, 108, 208, 0), rgba(168, 212, 235, 1)) 1 1;
+  }
+
+  // 检测设备  应急车辆
+  .modules_bg_jcsb {
+    width: 223px;
+    height: 126px;
+    padding: 0px 5px 0px;
+    // padding-left: 5px;
+    box-sizing: border-box;
+
+    .modules_bg_jcsb_body {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .modules_bg_jcsb_body_left {
+        width: 140px;
+
+        .modules_bg_jcsb_body_left_content {
+          display: flex;
+          align-items: end;
+          justify-content: space-between;
+          width: 140;
+
+          > div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 14px;
+            // color: rgba(255, 255, 255, 0.9);
+            color: #e8ebf0;
+            font-style: normal;
+            text-transform: none;
+            > img {
+              width: 48px;
+              height: 48px;
+            }
+            > span {
+              font-family: Roboto, Roboto;
+              font-weight: bold;
+              font-size: 16px;
+              font-style: normal;
+              text-transform: none;
+              background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+
+          > img {
+            width: 22px;
+            height: 21px;
+            margin: 0px 5px 10px 5px;
+          }
+        }
+      }
+
+      .progress {
+        margin-top: 5px;
+        width: 54px;
+        height: 76px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // justify-content: center;
+
+        .text {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 14px;
+          // color: rgba(255, 255, 255, 0.9);
+          color: #e8ebf0;
+          font-style: normal;
+          text-transform: none;
+          margin-top: 6px;
+        }
+
+        .circle {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 12px;
+          width: 48px;
+          height: 48px;
+
+          :deep(.el-progress-circle) {
+            width: 48px !important;
+            height: 48px !important;
+          }
+        }
+      }
+    }
+  }
+
+  // 派单情况
+  .modules_bg_pdqk {
+    width: 300px;
+    height: 126px;
+    padding: 0px 20px 10px;
+    box-sizing: border-box;
+
+    .modules_bg_pdqk_body {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+
+      .modules_bg_pdqk_body_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 14px;
+        // color: rgba(255, 255, 255, 0.9);
+        color: #e8ebf0;
+        font-style: normal;
+        text-transform: none;
+
+        > span {
+          font-family: Roboto, Roboto;
+          font-weight: bold;
+          font-size: 16px;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        > img {
+          width: 48px;
+          height: 48px;
+        }
+
+        // .line_img {
+        //   width: 16px;
+        //   height: 16px;
+        // }
+      }
+
+      .imgbox {
+        position: absolute;
+        top: 10px;
+        width: 64px;
+        height: 16px;
+        border-bottom: 2px dashed #175a7e;
+      }
+      .img-first {
+        left: 48px;
+        .line_img1 {
+          position: absolute;
+          top: 4px;
+          left: 22px;
+          width: 26px;
+          height: 26px;
+        }
+      }
+      .img-second {
+        left: 148px;
+        .line_img1 {
+          position: absolute;
+          top: 4px;
+          left: 20px;
+          width: 26px;
+          height: 26px;
+        }
+      }
+    }
+  }
+
+  // 应急人员
+  .modules_bg_yjry {
+    width: 322px;
+    height: 126px;
+    padding: 0px 5px 5px;
+    // padding-left: 10px;
+    box-sizing: border-box;
+
+    .modules_bg_yjry_body {
+      display: flex;
+      align-items: center;
+      // justify-content: space-between;
+      height: 82px;
+      padding-left: 5px;
+      box-sizing: border-box;
+
+      .modules_bg_yjry_body_zhz {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 14px;
+        // color: rgba(255, 255, 255, 0.9);
+        color: #e8ebf0;
+        font-style: normal;
+        text-transform: none;
+        > img {
+          width: 48px;
+          height: 48px;
+        }
+
+        > div {
+          display: flex;
+          align-items: center;
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 14px;
+          color: #08ffe5;
+          font-style: normal;
+          text-transform: none;
+
+          > img {
+            width: 24px;
+            height: 24px;
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .modules_bg_yjry_left_content {
+        display: flex;
+        // align-items: center;
+        align-items: end;
+        width: 150px;
+
+        .modules_bg_yjry_left {
+          width: 150px;
+          margin-right: 15px;
+
+          .modules_bg_yjry_left_content {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            width: 150;
+
+            > div {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+              font-weight: normal;
+              font-size: 14px;
+              // color: rgba(255, 255, 255, 0.9);
+              color: #e8ebf0;
+              font-style: normal;
+              text-transform: none;
+
+              > span {
+                font-family: Roboto, Roboto;
+                font-weight: bold;
+                font-size: 16px;
+                font-style: normal;
+                text-transform: none;
+                background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+              > img {
+                width: 48px;
+                height: 48px;
+                // margin-top: 5px;
+              }
+            }
+
+            > img {
+              width: 22px;
+              height: 21px;
+              margin: 0px 5px 10px 5px;
+            }
+          }
+        }
+
+        .progress {
+          width: 54px;
+          height: 76px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          // justify-content: center;
+
+          .text {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 14px;
+            // color: rgba(255, 255, 255, 0.9);
+            color: #e8ebf0;
+            font-style: normal;
+            text-transform: none;
+            margin-top: 6px;
+          }
+
+          .circle {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 12px;
+            width: 48px;
+            height: 48px;
+
+            :deep(.el-progress-circle) {
+              width: 48px !important;
+              height: 48px !important;
+            }
+          }
+        }
+      }
+
+      .line {
+        height: 50px;
+        width: 2px;
+        background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
+        margin: 0 15px;
+      }
+    }
+  }
+
+  .modules_bg_yjcl {
+    width: 223px;
+    height: 126px;
+    padding: 5px 20px 10px;
+    box-sizing: border-box;
+  }
+}
+</style>
+<!-- <style lang="scss">
+.modules_bg_color_active {
+  // border: 2px solid #00ffff; /* 高亮边框颜色可自定义 */
+  // box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  box-sizing: border-box;
+  box-shadow: 0 0 20px 6px rgba(0, 255, 255, 0.5) !important;
+  /* 柔和背光效果 */
+  z-index: 1;
+  transition: box-shadow 0.3s ease;
+}
+</style> -->

src/views/left/modules/PublicHealthEmergency.vue

@@ -67,133 +67,137 @@
 
     <!-- 4.===================== -->
     <div class="content_four modules_bg_color" :class="{ modules_bg_color_active: commonStore.activeModule === '应急处置资源' }">
-      <TitleHeaderLong :title="'应急处置资源'" :buttons="[]" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeaderLong>
+      <div class="content_four_header">
+        <TitleHeaderLong :title="'应急处置资源'" :buttons="[]" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeaderLong>
+        <div class="open_icon" @click="openRiskBigTable"><img src="@/assets/img/展开箭头.png" alt="" /></div>
+      </div>
       <div class="content_four_body">
-        <!-- 派单情况 -->
-        <div class="modules_bg_color2 modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
-          <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_pdqk_body">
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/发出指令.png" alt="" />
-              <div>发出指令</div>
-              <span>25</span>
-            </div>
-            <!-- <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img"> -->
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/签收指令.png" alt="" />
-              <div>签收指令</div>
-              <span>22</span>
-            </div>
-            <!-- <img src="../../../assets/img/连线方向箭头.png" alt=""  class="line_img"> -->
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/完成指令.png" alt="" />
-              <div>完成指令</div>
-              <span>17</span>
-            </div>
+        <div class="content_four_content">
+          <!-- 派单情况 -->
+          <div class="modules_bg_pdqk_color modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
+            <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_pdqk_body">
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/发出指令.png" alt="" />
+                <div>发出指令</div>
+                <span>25</span>
+              </div>
+
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/签收指令.png" alt="" />
+                <div>签收指令</div>
+                <span>22</span>
+              </div>
 
-            <!-- <div class="line">
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/完成指令.png" alt="" />
+                <div>完成指令</div>
+                <span>17</span>
+              </div>
+
+              <!-- <div class="line">
               <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" />
               <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2" />
             </div> -->
-
-            <div class="imgbox img-first"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
-            <div class="imgbox img-second"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+              <div class="imgbox img-first"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+              <div class="imgbox img-second"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+            </div>
           </div>
-        </div>
 
-        <!-- 检测设备 -->
-        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
-          <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_jcsb_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_jcsb_body_left">
-              <div class="modules_bg_jcsb_body_left_content">
-                <div>
-                  <img src="../../../assets//img/装备总数.png" alt="" />
-                  <div>装备总数</div>
-                  <span>205</span>
+          <!-- 检测设备 -->
+          <div class="modules_bg__jcsb_color modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
+            <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_jcsb_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+              <div class="modules_bg_jcsb_content">
+                <div class="modules_bg_jcsb_body_left">
+                  <div class="modules_bg_jcsb_body_left_content">
+                    <div>
+                      <img src="../../../assets//img/装备总数.png" alt="" />
+                      <div>装备总数</div>
+                      <span>205</span>
+                    </div>
+                    <img src="../../../assets/img/方向箭头.png" alt="" />
+                    <div>
+                      <div>使用中</div>
+                      <span>108</span>
+                    </div>
+                  </div>
                 </div>
-                <img src="../../../assets/img/方向箭头.png" alt="" />
-                <div>
-                  <div>使用中</div>
-                  <span>108</span>
+                <div class="progress">
+                  <!-- <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress> -->
+                  <MyProgress :value="52" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                  <span class="text">使用率</span>
                 </div>
               </div>
             </div>
-            <div class="progress">
-              <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
-              <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->
-
-              <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
-              <span class="text">使用率</span>
-            </div>
           </div>
-        </div>
 
-        <!-- 应急人员 -->
-        <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
-          <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_yjry_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_yjry_body_zhz">
-              <img src="../../../assets//img/指挥长.png" alt="" />
-              <span>指挥长</span>
-              <div>
-                吴寰宇
-                <img src="../../../assets/img/视频电话.png" alt="" />
+          <!-- 应急人员 -->
+          <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
+            <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_yjry_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+              <div class="modules_bg_yjry_body_zhz">
+                <img src="../../../assets//img/指挥长.png" alt="" />
+                <span>指挥长</span>
+                <div>
+                  张三
+                  <img src="../../../assets/img/视频电话.png" alt="" />
+                </div>
               </div>
-            </div>
-            <div class="line"></div>
-            <div class="modules_bg_yjry_left_content">
-              <div class="modules_bg_yjry_left">
-                <div class="modules_bg_yjry_left_content">
-                  <div>
-                    <img src="../../../assets//img/备班人数.png" alt="" />
-                    <div>备班人数</div>
-                    <span>205</span>
-                  </div>
-                  <img src="../../../assets/img/方向箭头.png" alt="" />
-                  <div>
-                    <div>出动数</div>
-                    <span>108</span>
+              <div class="line"></div>
+              <div class="modules_bg_yjry_left_content">
+                <div class="modules_bg_yjry_left">
+                  <div class="modules_bg_yjry_left_content">
+                    <div>
+                      <img src="../../../assets//img/备班人数.png" alt="" />
+                      <div>备班人数</div>
+                      <span>205</span>
+                    </div>
+                    <img src="../../../assets/img/方向箭头.png" alt="" />
+                    <div>
+                      <div>出动数</div>
+                      <span>108</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="progress">
-                <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
-                <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
-                <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
-                <span class="text">出动率</span>
+                <div class="progress">
+                  <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                  <span class="text">出动率</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <!-- 应急车辆 -->
-        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
-          <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_jcsb_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_jcsb_body_left">
-              <div class="modules_bg_jcsb_body_left_content">
-                <div>
-                  <img src="../../../assets//img/车辆.png" alt="" />
-                  <div>车辆</div>
-                  <span>115</span>
+          <!-- 应急车辆 -->
+          <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
+            <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_jcsb_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+              <div class="modules_bg_jcsb_content">
+                <div class="modules_bg_jcsb_body_left">
+                  <div class="modules_bg_jcsb_body_left_content">
+                    <div>
+                      <img src="../../../assets//img/车辆.png" alt="" />
+                      <div>车辆</div>
+                      <span>115</span>
+                    </div>
+                    <img src="../../../assets/img/方向箭头.png" alt="" />
+                    <div>
+                      <div>出动数</div>
+                      <span>90</span>
+                    </div>
+                  </div>
                 </div>
-                <img src="../../../assets/img/方向箭头.png" alt="" />
-                <div>
-                  <div>出动数</div>
-                  <span>90</span>
+                <div class="progress">
+                  <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
+                  <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
+                  <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                  <span class="text">出动率</span>
                 </div>
               </div>
             </div>
-            <div class="progress">
-              <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
-              <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
-              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
-              <span class="text">出动率</span>
-            </div>
           </div>
         </div>
       </div>
@@ -475,13 +479,13 @@ onMounted(() => {
 
 .modules_bg_color {
   position: relative;
-  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.2) 100%);
+  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
   border-radius: 0px 0px 0px 0px;
 }
 
 .modules_bg_color2 {
   position: relative;
-  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.2) 100%);
+  background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
   border-radius: 0px 0px 0px 0px;
 }
 
@@ -593,11 +597,36 @@ onMounted(() => {
 
 .content_four {
   // flex: 1;
-  width: 100%;
-  height: 210px;
-
+  width: 1124;
+  height: 201px;
+  .content_four_header {
+    width: 1124px;
+    height: 54px;
+    position: relative;
+    .open_icon {
+      position: absolute;
+      // margin-left: 10px;
+      top: 3px;
+      left: 210px;
+      cursor: pointer;
+      > img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
   .content_four_body {
-    height: 152px;
+    height: 134px;
+    width: 1124;
+    display: flex;
+    align-items: center;
+  }
+  .content_four_content {
+    width: 1124px;
+    height: 125px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
@@ -609,59 +638,79 @@ onMounted(() => {
     // border-image: linear-gradient(180deg, rgba(7, 108, 208, 0), rgba(168, 212, 235, 1)) 1 1;
   }
 
+  .modules_bg_pdqk_color {
+    height: 78px;
+    width: 300px;
+    background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
+    border-radius: 0px 0px 0px 0px;
+  }
   // 检测设备  应急车辆
   .modules_bg_jcsb {
     width: 223px;
     height: 126px;
-    padding: 0px 5px 0px;
+    // padding: 0px 5px 0px;
     // padding-left: 5px;
     box-sizing: border-box;
 
     .modules_bg_jcsb_body {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .modules_bg_jcsb_body_left {
-        width: 140px;
-
-        .modules_bg_jcsb_body_left_content {
-          display: flex;
-          align-items: end;
-          justify-content: space-between;
-          width: 140;
+      width: 223px;
+      margin-top: 3px;
+      line-height: 1;
+      .modules_bg_jcsb_content {
+        width: 223px;
+        height: 80px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .modules_bg_jcsb_body_left {
+          width: 140px;
 
-          > div {
+          .modules_bg_jcsb_body_left_content {
             display: flex;
-            flex-direction: column;
-            align-items: center;
-            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
-            font-weight: normal;
-            font-size: 14px;
-            // color: rgba(255, 255, 255, 0.9);
-            color: #e8ebf0;
-            font-style: normal;
-            text-transform: none;
-            > img {
-              width: 48px;
-              height: 48px;
-            }
-            > span {
-              font-family: Roboto, Roboto;
-              font-weight: bold;
-              font-size: 16px;
+            align-items: end;
+            justify-content: space-between;
+            width: 140;
+
+            > div {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+              font-weight: 300;
+              font-size: 14px;
+              // color: rgba(255, 255, 255, 0.9);
+              color: #e8ebf0;
               font-style: normal;
               text-transform: none;
-              background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;
+              line-height: 1;
+              > div {
+                margin-bottom: 2px;
+              }
+              > span {
+                font-family: Roboto, Roboto;
+                font-size: 16px;
+                font-style: normal;
+                text-transform: none;
+                font-weight: 700;
+                background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+              > img {
+                width: 48px;
+                // height: 48px;
+                height: 52px;
+              }
             }
-          }
 
-          > img {
-            width: 22px;
-            height: 21px;
-            margin: 0px 5px 10px 5px;
+            > img {
+              width: 22px;
+              height: 21px;
+              margin: 0px 5px 10px 5px;
+            }
           }
         }
       }
@@ -703,11 +752,16 @@ onMounted(() => {
     }
   }
 
+  .modules_bg__jcsb_color {
+    background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
+    border-radius: 0px 0px 0px 0px;
+  }
+
   // 派单情况
   .modules_bg_pdqk {
     width: 300px;
-    height: 126px;
-    padding: 0px 20px 10px;
+    height: 125px;
+    padding: 0px 10px 10px;
     box-sizing: border-box;
 
     .modules_bg_pdqk_body {
@@ -715,32 +769,40 @@ onMounted(() => {
       align-items: center;
       justify-content: space-between;
       position: relative;
+      width: 280px;
+      height: 78px;
+      margin-top: 3px;
 
       .modules_bg_pdqk_body_item {
         display: flex;
         flex-direction: column;
         align-items: center;
-        font-family: Alibaba PuHuiTi 30;
+        font-family: Alibaba PuHuiTi 3;
         font-weight: normal;
         font-size: 14px;
         // color: rgba(255, 255, 255, 0.9);
         color: #e8ebf0;
         font-style: normal;
         text-transform: none;
-
+        > div {
+          color: #e8ebef;
+          line-height: 1;
+        }
         > span {
           font-family: Roboto, Roboto;
           font-weight: bold;
           font-size: 16px;
           font-style: normal;
           text-transform: none;
-          background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+          background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
+          line-height: 1;
         }
         > img {
           width: 48px;
-          height: 48px;
+          height: 52px;
+          // margin-top: 5px;
         }
 
         // .line_img {
@@ -750,28 +812,38 @@ onMounted(() => {
       }
 
       .imgbox {
+        // position: absolute;
+        // top: 10px;
+        // width: 64px;
+        // height: 16px;
+        // border-bottom: 4px dashed #175a7e;
         position: absolute;
-        top: 10px;
-        width: 64px;
+        top: 12px;
+        width: 78px;
         height: 16px;
-        border-bottom: 2px dashed #175a7e;
+        background-image: repeating-linear-gradient(to right, #175a7e 0 4px, transparent 4px 10px);
+        background-position: bottom;
+        background-repeat: no-repeat;
+        background-size: 100% 4px; // 虚线高度
       }
       .img-first {
         left: 48px;
+        width: 78px;
         .line_img1 {
           position: absolute;
-          top: 4px;
+          top: 0px;
           left: 22px;
           width: 26px;
           height: 26px;
         }
       }
       .img-second {
-        left: 148px;
+        left: 158px;
+        width: 80px;
         .line_img1 {
           position: absolute;
-          top: 4px;
-          left: 20px;
+          top: 0px;
+          left: 25px;
           width: 26px;
           height: 26px;
         }
@@ -792,6 +864,7 @@ onMounted(() => {
       align-items: center;
       // justify-content: space-between;
       height: 82px;
+      width: 301px;
       padding-left: 5px;
       box-sizing: border-box;
 
@@ -806,11 +879,16 @@ onMounted(() => {
         color: #e8ebf0;
         font-style: normal;
         text-transform: none;
+        line-height: 1;
+        margin-top: 6px;
         > img {
           width: 48px;
-          height: 48px;
+          height: 52px;
+        }
+        >span{
+          margin-bottom: 2px;
+          letter-spacing: 2px;
         }
-
         > div {
           display: flex;
           align-items: center;
@@ -834,6 +912,7 @@ onMounted(() => {
         // align-items: center;
         align-items: end;
         width: 150px;
+        line-height: 1;
 
         .modules_bg_yjry_left {
           width: 150px;
@@ -863,13 +942,13 @@ onMounted(() => {
                 font-size: 16px;
                 font-style: normal;
                 text-transform: none;
-                background: linear-gradient(to bottom, #ffffff 4%, #49ffff 100%);
+                background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
               }
               > img {
                 width: 48px;
-                height: 48px;
+                height: 52px;
                 // margin-top: 5px;
               }
             }
@@ -894,8 +973,7 @@ onMounted(() => {
             font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
             font-weight: normal;
             font-size: 14px;
-            // color: rgba(255, 255, 255, 0.9);
-            color: #e8ebf0;
+            color: rgba(255, 255, 255, 0.9);
             font-style: normal;
             text-transform: none;
             margin-top: 6px;
@@ -921,7 +999,7 @@ onMounted(() => {
         height: 50px;
         width: 2px;
         background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
-        margin: 0 15px;
+        margin: 0 13px;
       }
     }
   }