城市体检-首页修改20250418-03

src/api/cstj/index-833951/index-833951.ts

@@ -22,3 +22,15 @@ export const indexRegulation = () => {
   });
 };
 
+
+// 获取督办事项
+export const getdbData = (type) => {
+  return request({
+    url: '/cstj/statistics/dbsx/list',
+    method: 'get',
+    params: {
+      type:type,
+      yearly:2025
+    }
+  });
+};

src/utils/echart/echartOption.ts

@@ -1622,6 +1622,182 @@ export function gqzbtbqkOption(ele) {
 }
 
 
+export function dbOption(ele,dataX, dataY1,dataY2) {
+
+  // let dataX = [
+  //   "黄浦区",
+  //   "静安区",
+  //   "青浦区",
+  //   "闵行区",
+  //   "长宁区",
+  //   "金山区",
+  //   "虹口区",
+  //   "松江区",
+  //   "徐汇区",
+  //   "崇明区",
+  //   "宝山区",
+  //   "奉贤区",
+  //   "嘉定区",
+  //   "浦东新区",
+  // ];
+  // let dataY1 = [4, 5.8,5,9,4, 5.8,5,9,5,9,4, 5.8,5,9]; //未填报
+  // let dataY2 = [4, 5.8,5,9,4, 5.8,5,9,5,9,4, 5.8,5,9]; //已填报
+  // 动态计算默认显示项数（示例默认显示前10项）
+  const defaultVisibleCount = 10;
+  const start = 0;
+  const end = Math.min(defaultVisibleCount - 1, dataX.length - 1);
+  let option = {
+    grid: {
+      top: "14%",
+      bottom: "20%",  // 底部留出滚动条空间
+      left: "4%",
+      right: "2%"
+    },
+    dataZoom: [{
+      type: 'slider',
+      xAxisIndex: 0,   // 控制x轴
+      filterMode: 'none', // 关键配置：不过滤数据
+      zoomLock: true,  // 锁定滑块尺寸（禁止调整大小）
+      startValue: start, // 初始起始位置
+      endValue: end,    // 初始结束位置
+      height: 12,      // 滚动条高度
+      bottom: '4%',     // 滚动条位置
+      handleSize: 0,    // 隐藏手柄（禁止调整）
+      fillerColor: "#97CDFC", // 填充色
+      borderColor: "#30538A", // 边框色
+      showDetail: false, // 隐藏数值提示
+      brushSelect: false, // 禁止刷选
+      show: dataX.length > defaultVisibleCount // 数据多时才显示滚动条
+    }],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        label: {
+          show: false, //X轴的
+        }
+      }
+    },
+    legend: {
+      data: ["未填报","已填报"],
+      top: "0%",
+      right:'2%',
+      textStyle: {
+        color: "#595959"
+      }
+    },
+    xAxis: {
+      data: dataX,
+      axisLine: {
+        show: true, //隐藏X轴轴线
+        lineStyle: {
+          color: '#30538A'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0, // 强制显示所有标签
+        formatter: function(value) { // 自动省略超长标签
+          return value.length > 6 ? value.substr(0,5)+'...' : value;
+        }
+      },
+
+    },
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#30538A'
+          }
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#666666"
+          }
+        },
+
+      }
+    ],
+    series: [
+      {
+        name: "未填报",
+        type: "bar",
+        // yAxisIndex: 1,
+        // barGap:'100%',
+        barWidth: 10,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+        smooth: true, //平滑曲线显示
+        showAllSymbol: true, //显示所有图形。
+        symbol: "circle", //标记的图形为实心圆
+        //  color: '#FF8247',
+
+
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: "#BFD8E2",
+            },
+              {
+                offset: 0.5,
+                color: "#495C8C"
+              },
+              {
+                offset: 1,
+                color: "#495C8C"
+              }
+            ]),
+          },
+        },
+        data: dataY1
+      },
+      {
+        name: "已填报",
+        type: "bar",
+        // yAxisIndex: 1,
+        // barGap:'100%',
+        barWidth: 10,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+        smooth: true, //平滑曲线显示
+        showAllSymbol: true, //显示所有图形。
+        symbol: "circle", //标记的图形为实心圆
+        //  color: '#FF8247',
+
+
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: "#97CDFC",
+            },
+              {
+                offset: 0.5,
+                color: "#3967A1"
+              },
+              {
+                offset: 1,
+                color: "#3967A1"
+              }
+            ]),
+          },
+        },
+        data: dataY2
+      }
+    ]
+  };
+  setEchartOption(ele, option)
+}
+
+
 export function pjjgOption(ele) {
   let option = {
     tooltip: {

src/views/index-833951.vue

@@ -53,27 +53,16 @@
         </div>
       </div>
       <div class="bottom box">
-        <z-b-t-j-common-title name="与我相关" />
-        <div class="bottom-content">
-          <ul class="ul-table">
-            <!-- 表头 -->
-            <li class="row header">
-              <div>序号</div>
-              <div>事项类型</div>
-              <div>事项</div>
-              <div>状态</div>
-              <div>发布时间</div>
-            </li>
-
-            <!-- 表格数据 -->
-            <li v-for="(row,index) in ywxgData" :key="row.id" class="row" :class="{ 'zebra': index % 2 !== 0 }">
-              <div>{{ row.id }}</div>
-              <div>{{ row.type }}</div>
-              <div>{{ row.item }}</div>
-              <div>{{ row.status }}</div>
-              <div>{{ row.time }}</div>
-            </li>
-          </ul>
+        <z-b-t-j-common-title name="督办事项" />
+        <div class="bottom-content"  v-loading="db_loading">
+          <div class="bottom-type">
+            <div v-for="(item,index) in dbType" :key="index" class="item" :class="{'item-active':item.chosen}" @click="handleTypeClick(item)">
+              {{item.name}}
+            </div>
+          </div>
+          <div ref="dbsxRef" class="echart">
+
+          </div>
         </div>
       </div>
     </div>
@@ -126,9 +115,10 @@ import usePermissionStore from '@/store/modules/permission';
 import {ref,nextTick} from "vue";
 import {getRouters} from "@/api/menu";
 import useUserStore from "@/store/modules/user";
-import {getNewsDynamics, indexRegulation} from "@/api/cstj/index-833951/index-833951";
+import {getdbData, getNewsDynamics, indexRegulation} from "@/api/cstj/index-833951/index-833951";
 import { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types';
 import {getNotice} from "@/api/system/notice";
+import {dbOption} from "@/utils/echart/echartOption";
 const userStore = useUserStore();
 const router = useRouter();
 const permissionStore = usePermissionStore();
@@ -136,6 +126,7 @@ const routes = computed<RouteRecordRaw[]>(() => permissionStore.getRoutes());
 const currentTime = ref(new Date().toLocaleString('chinese',{hour12:false}).split(' ')[0]);
 const dbsx_loading = ref(false);
 const zcxc_loading = ref(false);
+const db_loading = ref(false);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let timeSlot = ref('');
 let sjtjData = ref([
@@ -255,17 +246,23 @@ let firstRouteData = ref([
     path:'/cstj/jobScheduling/dataDownload/dataBasePlate'
   },
 ]);
-
-let ywxgData = ref([
-  { id: 1, type: "指标值填报", item: "市级二级医院覆盖率", status: "审核通过", time: "2023-03-10 13:00" },
-  { id: 2, type: "指标值填报", item: "市级二级医院覆盖率", status: "审核通过", time: "2023-03-10 13:00" },
-  { id: 3, type: "指标值填报", item: "市级二级医院覆盖率", status: "审核通过", time: "2023-03-10 13:00" },
-  { id: 4, type: "指标值填报", item: "市级二级医院覆盖率", status: "审核通过", time: "2023-03-10 13:00" },
-  { id: 5, type: "指标值填报", item: "市级二级医院覆盖率", status: "审核通过", time: "2023-03-10 13:00" }
+let dbType = ref([
+  {
+    id:2,
+    name:'空间数据',
+    chosen: false,
+  },
+  {
+    id:1,
+    name:'指标值',
+    chosen: true,
+  },
 ]);
+const dbsxRef = ref(null);
 
-let zcxcData = ref([
-]);
+let dbData = [];
+
+let zcxcData = ref([]);
 const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict('sys_notice_status', 'sys_notice_type'));
 const noticeFormRef = ref<ElFormInstance>();
 const dialog = reactive<DialogOption>({
@@ -369,6 +366,38 @@ function getZCXCData(){
   });
 }
 
+function handleTypeClick(item){
+  dbType.value.forEach((item2)=>{
+    if(item2.id == item.id){
+      item2.chosen = true;
+      getDBData(item.id);
+    }else{
+      item2.chosen = false;
+    }
+  })
+}
+
+function getDBData(type){
+  debugger
+  db_loading.value = true;
+  getdbData(type).then((res) => {
+    db_loading.value = false;
+    debugger
+    if (res.length > 0) {
+      dbData = res;
+      let dataX = [];
+      let dataY1 = [];
+      let dataY2 = [];
+      dbData.forEach((item)=>{
+        dataX.push(item.name);
+        dataY1.push(item.shouldValue);
+        dataY2.push(item.realityValue);
+      })
+      dbOption(dbsxRef.value, dataX,dataY1,dataY2);
+    }
+  });
+}
+
 
 onMounted(() => {
   nextTick(async () => {
@@ -397,6 +426,8 @@ onMounted(() => {
     getDBSXData();
     getZCXCData();
     timeSlot.value = getTimeGreeting();
+
+    getDBData(1);
   })
 })
 
@@ -591,48 +622,35 @@ onMounted(() => {
       align-items: center;
       .bottom-content{
         width: 100%;
-        padding: 10px 16px;
+        padding: 0px 10px 16px 10px;
         height: calc(100% - 70px);
-        .ul-table {
-          width: 100%;
-          height: 100%;
-          border-collapse: collapse;
+        .bottom-type{
           display: flex;
-          flex-direction: column;
-          list-style: none;
-          padding: 0;
-          margin: 0;
-        }
-
-        .row {
-          display: flex;
-          padding: 10px;
-          background: #F1F5FB;
-          border: 1px solid;
-          border-image: linear-gradient(0deg, #FFFFFF, #FFFFFF, #FFFFFF) 10 10;
-        }
-
-        .row.header {
-          font-family: Alimama ShuHeiTi;
-          font-weight: bold;
-          font-size: 18px;
-          color: #3B4962;
-          background: #D1DDF0;
-          border-image: linear-gradient(0deg, #FFFFFF, #FFFFFF, #FFFFFF) 10 10;
-        }
-
-        .row div {
-          flex: 1;
-          text-align: center;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          font-size: 16px;
-          color: #3B4962;
+          flex-direction: row-reverse;
+          .item{
+            cursor: pointer;
+            width: 100px;
+            height: 35px;
+            margin-right: 10px;
+            background: url("../assets/images/cstj/ypzl/item-unchosen.png") no-repeat;
+            background-size: cover;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: Alimama ShuHeiTi;
+            font-weight: bold;
+            font-size: 14px;
+            color: #333333;
+          }
+          .item-active{
+            background: url("../assets/images/cstj/ypzl/item-chosen.png") no-repeat;
+            background-size: cover;
+            color:#ffffff
+          }
         }
-        .zebra {
-          background: #E9EFF9;
-          border: 1px solid;
-          border-image: linear-gradient(0deg, #FFFFFF, #FFFFFF, #FFFFFF) 10 10;
+        .echart{
+          width: 100%;
+          height: 100%;
         }
       }
     }