优化2025-3-19

src/assets/styles/index.scss

@@ -51,18 +51,19 @@ html {
 .el-input__wrapper{
   background-color: #052d56 !important;
 }
+
 .el-date-editor{
   --el-input-text-color:#ffffff !important;
   --el-input-border-color:#1d85a9 !important;
+  width: 300px !important;
 
 }
 
-.el-input__inner{
-  // color: #ffffff !important;
-}
+
 
 .el-input__inner::placeholder {
   color: #ffffff !important;
+  font-size: 13px;
 }
 
 // .el-tooltip {

src/components/AreaLayerSwitch/index.vue

@@ -32,21 +32,21 @@ const emit = defineEmits(['btnClick'])
 const activeIndex = ref(0)
 
 const bottons = ref([
-  { id: 1, name: '浦东新区', active: true },
+  { id: 12, name: '黄浦区', active: false },
+  { id: 11, name: '徐汇区', active: false },
   { id: 2, name: '长宁区', active: false },
   { id: 3, name: '静安区', active: false },
   { id: 4, name: '普陀区', active: false },
-  { id: 5, name: '杨浦区', active: false },
   { id: 6, name: '虹口区', active: false },
-  { id: 7, name: '嘉定区', active: false },
-  { id: 8, name: '青浦区', active: false },
-  { id: 9, name: '宝山区', active: false },
+  { id: 5, name: '杨浦区', active: false },
   { id: 10, name: '闵行区', active: false },
-  { id: 11, name: '徐汇区', active: false },
-  { id: 12, name: '黄浦区', active: false },
-  { id: 13, name: '松江区', active: false },
-  { id: 14, name: '奉献区', active: false },
+  { id: 9, name: '宝山区', active: false },
+  { id: 7, name: '嘉定区', active: false },
+  { id: 1, name: '浦东新区', active: true },
   { id: 15, name: '金山区', active: false },
+  { id: 13, name: '松江区', active: false },
+  { id: 8, name: '青浦区', active: false },
+  { id: 14, name: '奉贤区', active: false },
   { id: 16, name: '崇明区', active: false }
 ])
 

src/views/left/comp/RingChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Highcharts from "highcharts";
+import Highcharts from 'highcharts'
 // import Highcharts from 'highcharts'
 import Highcharts3D from 'highcharts/highcharts-3d'
 import backgroundImg from '@/assets/img/底.png' // 修正图片路径
@@ -15,9 +15,9 @@ export default {
     return {
       id: 'echart-container',
       optionData: [
-        { name: '风险个案', y: 35, h: 12, color: '#27c3e8' },
-        { name: '风险事件', y: 30, h: 15, color: '#3b76f6' },
-        { name: '风险信息', y: 30, h: 15, color: '#26b99a' }
+        { name: '风险个案', y: 35, h: 35, color: '#27c3e8' },
+        { name: '风险事件', y: 30, h: 30, color: '#3b76f6' },
+        { name: '风险信息', y: 30, h: 30, color: '#26b99a' }
       ]
       // optionData: [
       //   { name: "个人网银", y: 520, h: 40 }, //模块名和所占比，也可以{name: '测试1',y: 12}
@@ -34,11 +34,24 @@ export default {
     }
   },
   mounted() {
+    let hArr = this.minMaxNormalization(this.optionData.map(item => item.y))
+    this.optionData.forEach((item, index) => {
+      item.h = hArr[index]
+    })
+
     this.$nextTick(() => {
       this.init()
     })
   },
   methods: {
+    minMaxNormalization(data, a = 10, b = 35) {
+      if (data.length === 0) return []
+      const min = Math.min(...data)
+      const max = Math.max(...data)
+      const range = max - min
+      if (range === 0) return data.map(() => a) // 所有值相同的情况
+      return data.map(x => ((x - min) / range) * (b - a) + a)
+    },
     init() {
       // 修改3d饼图绘制过程
       let each = Highcharts.each,
@@ -133,23 +146,23 @@ export default {
               const chart = this
               const options3d = chart.options.chart.options3d
               const alpha = options3d.alpha
-              const radius = 180 // 外半径 = size/2 = 180/2
+              const radius = 190 // 外半径 = size/2 = 180/2
 
               // 计算3D倾斜导致的垂直偏移量
-              const deltaY = radius * Math.sin(alpha * Math.PI / 180) * 0.5
+              const deltaY = radius * Math.sin((alpha * Math.PI) / 190) * 0.48
 
               // 获取图表中心坐标
-              const centerX = chart.plotLeft + chart.plotWidth / 2 -10
-              const centerY = chart.plotTop + chart.plotHeight  - deltaY - 20
+              const centerX = chart.plotLeft + chart.plotWidth / 2 - 10
+              const centerY = chart.plotTop + chart.plotHeight - deltaY - 20
 
               // 添加背景图（自动对齐）
               chart.renderer
                 .image(
                   backgroundImg,
-                  centerX - radius * 0.8,  // 宽度缩放80%
-                  centerY - radius * 0.6,  // 高度缩放60%
-                  radius * 1.6,            // 宽度
-                  radius * 1.2             // 高度
+                  centerX - radius * 0.8, // 宽度缩放80%
+                  centerY - radius * 0.4, // 高度缩放60%
+                  radius * 1.6, // 宽度
+                  radius * 1 // 高度
                 )
                 .attr({
                   // opacity: 0.8  // 添加透明度
@@ -196,7 +209,7 @@ export default {
             //   enabled: false,
             // },
             allowPointSelect: false,
-            center: ['50%', '50%'],
+            center: ['50%', '72%'],
             size: 180,
             innerSize: 120,
             colors: ['#21B1C4', '#7343D1', '#28A429', '#C6B031', '#9B2020', '#2862D7']
@@ -226,7 +239,7 @@ export default {
             data: this.optionData,
             showInLegend: true,
             dataLabels: {
-              padding: -10 ,
+              padding: -10,
               shadow: true,
               style: {
                 fontWeight: 'bold',
@@ -267,6 +280,7 @@ export default {
 .chart-container {
   margin: 0 auto;
   width: 444px;
-  height: 144px;
+  // height: 150px;
+  height: 100%;
 }
 </style>

src/views/left/dialog/PublicHealthRisksDialog.vue

@@ -9,7 +9,7 @@
         <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select> -->
 
-      <el-date-picker v-model="selectSearchObj.value1" type="date" placeholder="请选择日期" size="small" popper-class="date_picker_custom-class"></el-date-picker>
+      <el-date-picker v-model="selectSearchObj.value1" type="date" placeholder="请选择日期" size="small" popper-class="date_picker_custom-class" ></el-date-picker>
       <el-select v-model="selectSearchObj.value" placeholder="状态" popper-class="custom-select">
         <el-option v-for="item in riskStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
@@ -272,10 +272,15 @@ function handleRowClick() {}
 .date_picker_custom-class {
   // background-color: #2c2c2c !important;
   background-color: #214370 !important;
+  
   border: 1px solid #1d85a9 !important;
   color: #fff !important;
 }
 
+// .el-picker__popper.el-popper{
+//    background-color: rgba(0, 170, 255, 0.15) !important;
+// }
+
 /* ✅ 修改日期切换箭头颜色 */
 .date_picker_custom-class .el-picker-panel__icon-btn {
   color: #1d85a9 !important; /* 修改箭头颜色 */
@@ -318,4 +323,6 @@ function handleRowClick() {}
   background-color: #214370;
   color: #fff;
 }
+
+
 </style>

src/views/left/modules/BigRiskTable.vue

@@ -16,14 +16,14 @@
         </div>
 
         <div class="select_search">
-          <el-select v-model="selectSearchObj.value" placeholder="风险级别" popper-class="custom-select">
-            <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-select v-model="selectSearchObj.level" placeholder="风险级别" popper-class="custom-select">
+            <el-option v-for="item in riskLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
           <el-select v-model="selectSearchObj.type" placeholder="风险类型" popper-class="custom-select">
             <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-          <el-select v-model="selectSearchObj.value" placeholder="全部状态" popper-class="custom-select">
-            <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-select v-model="selectSearchObj.status" placeholder="全部状态" popper-class="custom-select">
+            <el-option v-for="item in riskStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </div>
       </div>
@@ -74,6 +74,7 @@ watch(
   }
 )
 
+
 let buttons = ref([
   { id: 0, title: '当日', active: true },
   { id: 1, title: '当月', active: false },
@@ -87,12 +88,26 @@ function setActive(index) {
 }
 
 let selectSearchObj = ref({})
+
+const riskLevelOptions = ref([
+  { value: 0, label: 'A级', active: true },
+  { value: 1, label: 'B级', active: false },
+  { value: 2, label: 'C级', active: false },
+  { value: 3, label: 'D级', active: false },
+])
+
 const riskTypeOptions = ref([
   { value: 1, label: '风险个案' },
   { value: 2, label: '风险事件' },
   { value: 3, label: '风险信息' }
 ])
 
+const riskStatusOptions = ref([
+  { value: 1, label: '已结案' },
+  { value: 2, label: '已核实' },
+  { value: 3, label: '处置中' }
+])
+
 const tableData = ref([
   {
     name: '长宁区发生不明原因肺炎',
@@ -170,7 +185,7 @@ const tableData = ref([
 
 function handleRowClick() {
   if (riskTableStore.getComeFrom() === '风险列表') {
-    // commonStore.setActiveIndex(1)
+    commonStore.setActiveIndex(1)
     riskTableStore.setInitShow(false)
     riskTableStore.setBigRiskTableShow(false)
     riskTableStore.setDisposalShow(true)
@@ -193,12 +208,12 @@ function handleRowClick() {
 
 function goBack() {
   if (riskTableStore.getComeFrom() === '风险列表') {
-    // commonStore.setActiveIndex(0)
+    commonStore.setActiveIndex(0)
     riskTableStore.setInitShow(true)
     riskTableStore.setBigRiskTableShow(false)
     riskTableStore.setDisposalShow(false)
   } else {
-    // commonStore.setActiveIndex(1)
+    commonStore.setActiveIndex(1)
     riskTableStore.setInitShow(false)
     riskTableStore.setBigRiskTableShow(false)
     riskTableStore.setDisposalShow(true)
@@ -393,11 +408,11 @@ function goBack() {
 }
 
 .status-已结案 {
-  background: linear-gradient(270deg, rgba(241, 74, 24, 0.1) 0%, rgba(241, 74, 24, 0.3) 51%, rgba(241, 74, 24, 0.1) 100%);
+  background: linear-gradient(270deg, rgba(62, 174, 255, 0.1) 0%, rgba(62, 174, 255, 0.3) 51%, rgba(62, 174, 255, 0.1) 100%);
   font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-weight: normal;
   font-size: 16px;
-  color: #ec4614;
+  color: #70eeff;
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   text-align: center;
   font-style: normal;

src/views/left/modules/ReportDisposal.vue

@@ -393,7 +393,9 @@ function openRiskBigTable() {
 .modules_bg2_body_bar {
   // flex: 1;
   width: 444px;
-  height: 144px;
+  // height: 144px;
+  // height: 150px;
+  height: 100%;
   color: azure;
   // background-color: pink;
   margin: 0 auto;

src/views/left/modules/common/RiskTableContent.vue

@@ -9,13 +9,15 @@
         <div class="open_icon" @click="openRiskBigTable"><img src="@/assets/img/展开箭头.png" alt="" /></div>
       </div>
     </div>
-    <dv-scroll-board :config="riskTableconfig" class="scroll_table" ref="scrollBoard" />
+    <dv-scroll-board :config="riskTableconfig" class="scroll_table" ref="scrollBoard" @click="handleRowClick" />
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted, toRaw } from 'vue'
 import { useRiskTableStore } from '@/store/riskTable.js'
 let riskTableStore = useRiskTableStore()
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
 
 const props = defineProps({})
 
@@ -34,22 +36,22 @@ const timeButtons = ref([
 const tableData = ref([
   {
     name: '长宁区发生不明原因肺炎',
-    riskLevel: 'A',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    riskLevel: 'A级',
+    reportUnit: '长宁区疾病预防控制中心',
+    reportTime: '2024-07-15 08:00',
+    address: 'xxxxxxxxxxxx',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
     keyGroups: 1,
-    newstatus: '已核实'
+    newstatus: '处置中'
   },
   {
-    name: '长宁区发生不明原因肺炎',
-    riskLevel: 'B',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    name: '长宁区发生猴痘事件',
+    riskLevel: 'A级',
+    reportUnit: '长宁区疾病预防控制中心',
+    reportTime: '2024-09-30 09:12',
+    address: 'xx街道xx号',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
@@ -57,47 +59,47 @@ const tableData = ref([
     newstatus: '处置中'
   },
   {
-    name: '长宁区发生不明原因肺炎',
-    riskLevel: 'C',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    name: '普陀区发生疟疾事件',
+    riskLevel: 'B级',
+    reportUnit: '普陀区疾病预防控制中心',
+    reportTime: '2024-09-30 10:23',
+    address: 'xx街道xx号',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
     keyGroups: 0,
-    newstatus: '已结案'
+    newstatus: '处置中'
   },
   {
-    name: '长宁区发生不明原因肺炎',
-    riskLevel: 'A',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    name: '黄浦区发生猩红热事件',
+    riskLevel: 'B级',
+    reportUnit: '黄浦区疾病预防控制中心',
+    reportTime: '2024-09-26 14:03',
+    address: 'xx街道xx号',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
     keyGroups: 0,
-    newstatus: '已核实'
+    newstatus: '处置中'
   },
   {
-    name: '长宁区发生不明原因肺炎',
-    riskLevel: 'A',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    name: '徐汇区发生聚集性呕吐腹泻事件',
+    riskLevel: 'D级',
+    reportUnit: '徐汇区疾病预防控制中心',
+    reportTime: '2024-09-26 16:33',
+    address: 'xx街道xx号',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
     keyGroups: 0,
-    newstatus: '已核实'
+    newstatus: '处置中'
   },
   {
-    name: '长宁区发生不明原因肺炎',
-    riskLevel: 'A',
-    reportUnit: '上海市疾控',
-    reportTime: '2024/11/20',
-    address: '长宁路小区',
+    name: '发热门诊就诊量',
+    riskLevel: 'C级',
+    reportUnit: '静安区疾病预防控制中心',
+    reportTime: '2024-09-25 16:40',
+    address: 'xx街道xx号',
     disposalUnit: '长宁区疾控',
     numberOfCases: '3例',
     keyLocations: 1,
@@ -156,6 +158,31 @@ function openRiskBigTable() {
   riskTableStore.setBigRiskTableShow(true)
   riskTableStore.setComeFrom('风险列表')
 }
+
+// 点击行事件，row 是当前行数据，index 是行号
+function handleRowClick(config) {
+  console.log('点击行数据:', config)
+  // 获取当前点击行的数据
+  const rowIndex = config.rowIndex
+  if (rowIndex) {
+    if (rowIndex >= 0 && rowIndex < tableData.value.length) {
+      const rowData = toRaw(tableData.value[config.rowIndex])
+      console.log('当前点击行的数据：', rowData)
+      handleRowAction(rowData) // 执行点击后的逻辑
+    }
+  }
+}
+
+// 处理点击后的逻辑
+function handleRowAction(row) {
+  console.log(row, 'row')
+  commonStore.setActiveIndex(1)
+  riskTableStore.setInitShow(false)
+  riskTableStore.setBigRiskTableShow(false)
+  riskTableStore.setDisposalShow(true)
+  riskTableStore.setCurrentBackground(1)
+}
+
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>
@@ -239,7 +266,7 @@ onMounted(() => {})
 /* 风险等级背景 */
 /* 深度作用到 dv-scroll-board 内部 */
 :deep(.risk-badge) {
- width: 80px;
+  width: 80px;
   height: 32px;
   display: flex;
   justify-content: center;
@@ -250,7 +277,7 @@ onMounted(() => {})
 :deep(.risk-badge::before) {
   content: '';
   position: absolute;
-  top:10px;
+  top: 10px;
   left: 10px;
   width: 100%;
   height: 100%;
@@ -259,19 +286,19 @@ onMounted(() => {})
   // background-position: center;
 }
 
-:deep(.risk-A::before) {
+:deep(.risk-A级::before) {
   background-image: url('@/assets/img/等级A.png');
 }
 
-:deep(.risk-B::before) {
+:deep(.risk-B级::before) {
   background-image: url('@/assets/img/等级B.png');
 }
 
-:deep(.risk-C::before) {
+:deep(.risk-C级::before) {
   background-image: url('@/assets/img/等级C.png');
 }
 
-:deep(.risk-D::before) {
+:deep(.risk-D级::before) {
   background-image: url('@/assets/img/等级D.png');
 }
 
@@ -314,12 +341,10 @@ onMounted(() => {})
   font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-weight: normal;
   font-size: 16px;
-  color: #70EEFF;
+  color: #70eeff;
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   text-align: center;
   font-style: normal;
   text-transform: none;
 }
-
-
 </style>

src/views/right/components/warningDialog.vue

@@ -17,7 +17,7 @@
     </div>
     <div class="button-box">
       <div class="button-item">
-        <div class="content" @click="handleClose">暂时忽略</div>
+        <div class="content" @click="handleClose">确认</div>
       </div>
       <div class="button-item" @click="handleView">
         <div class="content">立即查看</div>
@@ -76,6 +76,7 @@ const handleView = () => {
     animation: unset;
   }
   .warning-dialog {
+    position: relative;
     width: 787px;
     height: 84px;
     z-index: 9;
@@ -198,4 +199,6 @@ const handleView = () => {
     }
   }
 }
+
+
 </style>