gx

src/view/analyze.vue

@@ -106,7 +106,7 @@
             v-for="option in data.options"
             :key="option.value"
             :class="jz === option.value ? 'choose_1' : 'choose_2'"
-            @click="jzChange(option.value,option.label)"
+            @click="jzChange(option.value, option.label)"
             class="choose_0"
           >
             {{ option.label }}
@@ -144,6 +144,7 @@
         <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
         <right2
           :list="data.analysis.push"
+          @shuju="chooseXX"
           v-if="showEchart && tab_choose[0].choose == '信息推送'"
         ></right2>
         <ylXZZC
@@ -173,6 +174,12 @@
       @close="close"
     >
     </DialogEnrol>
+    <DialogMap
+      :dialogShowMap="dialogShowMap"
+      :title="mapTitle"
+      @close="close"
+    >
+    </DialogMap>
   </div>
 </template>
 
@@ -186,6 +193,7 @@ import {
   computed,
 } from "vue";
 import DialogEnrol from "./dialog/dialogEnrol.vue";
+import DialogMap from "./dialog/dialogMap.vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import jypx from "./echart_analyze/jypx.vue";
@@ -206,10 +214,12 @@ import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
 import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
 import jypx1 from "@/assets/images/sjfx/pxrc.png";
 import jypx2 from "@/assets/images/sjfx/gygws.png";
-import Map from "./echart_analyze/map.vue";
+
 const showR = ref(false); //loading
 // 入学分析数据
 const dialogShowEnrol = ref(false);
+const dialogShowMap = ref(false);
+const mapTitle = ref("");
 const dataTab = reactive({
   url: "",
   title: "",
@@ -313,6 +323,7 @@ const showEnrol = () => {
 };
 const close = () => {
   dialogShowEnrol.value = false;
+  dialogShowMap.value = false;
 };
 
 //数据切换
@@ -330,6 +341,17 @@ const tab_change = (index, name) => {
     }
   }
 };
+const chooseXX = (name) => {
+  console.log(name);
+  if (name == "交通") {
+    mapTitle.value='交通';
+    dialogShowMap.value = true;
+  }
+  // tableType.title = village;
+  // tableType.columns = xz_column.value;
+  // tableType.url = "/api/ggfwyth/zcxxList";
+  // getTownDetail();
+};
 //就业培训
 const jypxList = reactive([
   {
@@ -345,9 +367,9 @@ const jypxList = reactive([
 ]);
 // 救助分析tap切换
 const jz = ref("1");
-const jzChange = (value,label) => {
+const jzChange = (value, label) => {
   jz.value = value;
-  data.jzfxName=label;
+  data.jzfxName = label;
   data.list = data.dataAnalysis[value - 1];
 };
 const showEchart = ref(false);
@@ -358,7 +380,7 @@ const data = reactive({
   },
   list1: {},
   list2: {},
-  jzfxName:'特困',
+  jzfxName: "特困",
   options: [
     { value: "1", label: "特困" },
     { value: "2", label: "低保" },

src/view/dialog/dialogMap.vue

@@ -0,0 +1,258 @@
+
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowMap"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: 600px">
+         <Map style="width:100%;height:100%;"></Map>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import Map from "../echart_analyze/map.vue";
+
+const props = defineProps({
+  dialogShowMap: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShowMap = ref();
+const data = reactive({
+  title: "",
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+// 监听
+watch(
+  () => props.dialogShowMap,
+  (newVal, oldVal) => {
+    dialogShowMap.value = newVal;
+  }
+);
+watch(
+  () => props.list1,
+  (newVal, oldVal) => {
+    data.list1 = newVal;
+  }
+);
+watch(
+  () => props.list2,
+  (newVal, oldVal) => {
+    data.list2 = newVal;
+  }
+);
+watch(
+  () => props.year,
+  (newVal, oldVal) => {
+    data.year = newVal;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  data.title = props.title;
+  data.list1 = props.list1;
+  data.list2 = props.list2;
+  data.year = props.year;
+});
+
+const closeDialog = () => {
+  dialogShowMap.value = false;
+  emit("close");
+};
+
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/echart_analyze/map.vue

@@ -19,7 +19,12 @@ const init = () => {
     // 主题色
     mapStyle: "amap://styles/blue",
     // 地图层级
-    zoom: 12,
+    zoom: 12.5,
+    labelDefault:{
+      textStyle:{
+        color:'#fffff',
+      }
+    }
   });
   // 实时路况图层
   var trafficLayer = new AMap.TileLayer.Traffic({
@@ -41,5 +46,8 @@ onMounted(() => {
           bottom:-100px;
            display: none!important;;
     }  
-
+::v-deep .amap-container {
+  /* 调整区域的字体颜色 */
+  color: #ff0000; /* 红色 */
+}
 </style>

src/view/echart_analyze/right2.vue

@@ -6,7 +6,7 @@
 import { onMounted, onBeforeMount, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
-
+const emit = defineEmits(["shuju"]);
 const props = defineProps({
   list: {
     type: Array,
@@ -430,6 +430,9 @@ const getOption = () => {
 const setChart = () => {
   var myChart = echarts.init(chart.value);
   myChart.setOption(data.option);
+    myChart.on("click", function (params) {
+    emit('shuju',params.name);
+  });
 };
 const getMaxCeilingValue = (arr) => {
   let max = Math.max(...arr);// 找到数组中的最大值

src/view/education.vue

@@ -226,7 +226,7 @@
             <img src="@/assets/eduImg/jyImg10.png" alt="" />
             <img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg1">
-              <span style="fontSize:18px;">绿色预警</span>
+              <span style="fontSize:20px;">绿色预警</span>
             </div>
           </div>
           <div class="earlyWarning1">
@@ -236,7 +236,7 @@
             <img src="@/assets/eduImg/jyImg9.png" alt="" />
             <img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg2">
-              <span style="fontSize:18px;">黄色预警</span>
+              <span style="fontSize:20px;">黄色预警</span>
             </div>
           </div>
           <div class="earlyWarning1">
@@ -246,7 +246,7 @@
             <img src="@/assets/eduImg/jyImg8.png" alt="" />
             <img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
             <div class="historyimg historyimg3">
-              <span style="fontSize:18px;">红色预警</span>
+              <span style="fontSize:20px;">红色预警</span>
             </div>
           </div>
         </div>
@@ -1262,7 +1262,7 @@ onMounted(() => {
     }
 
     .historyimg {
-      width: 133px;
+      width: 140px;
       height: 19px;
       background-repeat: no-repeat;
       background-size: 100% 100%;

src/view/hygiene.vue

@@ -122,7 +122,7 @@
           <div class="item">
             <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
             <div class="right">
-              <div class="right_top">门急诊人次</div>
+              <div class="right_top font">门急诊人次</div>
               <img src="@/assets/images/hygiene/jt.png" class="right_center" />
               <div class="right_bottom">{{ data.mz.mjzrc }}</div>
             </div>
@@ -130,7 +130,7 @@
           <div class="item">
             <img src="@/assets/images/hygiene/zyrs.png" class="left" />
             <div class="right">
-              <div class="right_top">住院人数</div>
+              <div class="right_top font">住院人数</div>
               <img src="@/assets/images/hygiene/jt.png" class="right_center" />
               <div class="right_bottom">{{ data.mz.zyrs }}</div>
             </div>
@@ -159,7 +159,7 @@
                 src="@/assets/images/hygiene/jd.gif"
                 alt=""
               />
-              <div class="historyimg">建档份数</div>
+              <div class="historyimg font">建档份数</div>
             </div>
           </div>
           <div class="minTopPart2">
@@ -210,14 +210,14 @@
             <img src="@/assets/images/hygiene/fy.png" alt="" />
             <img src="@/assets/images/hygiene/fy1.png" alt="" class="fyMove" />
             <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
-            <div class="historyimg">孕产妇系统管理人数</div>
+            <div class="historyimg font" >孕产妇系统管理人数</div>
           </div>
           <div class="history1">
             <div class="va">{{ data.fyglrs.etrs }}</div>
             <img src="@/assets/images/hygiene/fy.png" alt="" />
             <img src="@/assets/images/hygiene/fy2.png" alt="" class="fyMove" />
             <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
-            <div class="historyimg">0-6岁儿童系统管理人数</div>
+            <div class="historyimg font" >0-6岁儿童系统管理人数</div>
           </div>
         </div>
       </div>
@@ -1304,4 +1304,7 @@ const getData = async () => {
   margin-top: 15px;
   margin-bottom: 10px;
 }
+.font{
+  font-size: 18px !important;
+}
 </style>

src/view/sy.vue

@@ -565,9 +565,9 @@
       @close="close"
       @handle="handlePagination"
     >
-      <template #pxkssj="{ currentCol, currentData }">
+      <!-- <template #pxkssj="{ currentCol, currentData }">
         <div>{{ currentData.pxkssj }}/{{ currentData.pxjssj }}</div>
-      </template>
+      </template> -->
       <!-- <template #pxjssj="{ currentCol, currentData }">
         <div>
           {{ currentData.pxjssj.slice(0, 4) }}-{{
@@ -667,7 +667,7 @@ const columnss = reactive({
     {
       label: "培训时间",
       property: "pxkssj",
-      type: "slot",
+      // type: "slot",
     },
     // {
     //   label: "培训开始时间",