zwfw

src/view/echarts_sy/zwfw1.vue

@@ -3,25 +3,37 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref ,onBeforeMount } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
-
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return {};
+    },
+  },
+});
+const data = reactive({
+  dataList: [
+    {
+      name: "2.0收件数",
+      value: 42277,
+    },
+    {
+      name: "总收件数",
+      value: 42632,
+    },
+  ],
+  percent: 0,
+  option: {},
+});
 const chart = ref(); // 创建DOM引用
-const dataList = [
+
-  {
-    name: "2.0收件数",
-    value: 42277,
-  },
-  {
-    name: "总收件数",
-    value: 42632,
-  },
-];
 //内圈数据
-var data = [
+var data2 = [
   {
-    value: dataList[0].value,
+    value: data.dataList[0].value,
     name: "2.0收件数",
     itemStyle: {
       normal: {
@@ -45,7 +57,7 @@ var data = [
     },
   },
   {
-    value: dataList[1].value - dataList[0].value,
+    value: data.dataList[1].value - data.dataList[0].value,
     name: "",
     itemStyle: {
       normal: {
@@ -63,7 +75,7 @@ var data = [
     },
   },
   {
-    value: dataList[1].value,
+    value: data.dataList[1].value,
     name: "总收件数",
     itemStyle: {
       normal: {
@@ -75,7 +87,7 @@ var data = [
 //外圈数据
 const data1 = [
   {
-    value: dataList[1].value,
+    value: data.dataList[1].value,
     name: "",
     itemStyle: {
       normal: {
@@ -95,7 +107,7 @@ const data1 = [
     },
   },
   {
-    value: dataList[1].value,
+    value: data.dataList[1].value,
     name: "",
     itemStyle: {
       normal: {
@@ -105,105 +117,97 @@ const data1 = [
   },
 ];
 
-const option = {
+const getOption = () => {
-  legend: {
+  data.option = {
-    selectedMode: false,
+    legend: {
-    itemWidth: 10,
+      selectedMode: false,
-    itemHeight: 10,
+      itemWidth: 10,
-    itemGap: 10,
+      itemHeight: 10,
-    icon: "circle",
+      itemGap: 10,
-    data: ["2.0收件数", "", "总收件数"],
+      icon: "circle",
-    bottom: "3%",
+      data: ["2.0收件数", "", "总收件数"],
-    width: 380,
+      bottom: "3%",
-    textStyle: {
+      width: 380,
-      color: "#ffffff", // 修改图例颜色为红色
-    },
-    formatter: function (params) {
-      var num = "";
-      for (let i = 0; i < dataList.length; i++) {
-        if (dataList[i].name == params) {
-          num = dataList[i].value;
-        }
-      }
-      return params + "  " + num;
-    },
-  },
-
-  title: [
-    {
-      text: `${((dataList[0].value / dataList[1].value)*100).toFixed(2)}%`,
-      right: "18%",
-      bottom: "40%",
       textStyle: {
-        color: "#ffffff",
+        color: "#ffffff", // 修改图例颜色为红色
-        fontSize: 18,
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < data.dataList.length; i++) {
+          if (data.dataList[i].name == params) {
+            num = data.dataList[i].value;
+          }
+        }
+        if(params == "总收件数"){
+          return params + "   " +num;
+        }else{
+          return params + "  " +num;
+        }
+        
       },
     },
-  ],
+
-  series: [
+    title: [
-    {
+      {
-      // name:'访问来源',
+        text: `${data.percent}%`,
-      type: "pie",
+        right: "18%",
-      hoverAnimation: false,
+        bottom: "40%",
-      radius: ["60%", "80%"],
+        textStyle: {
-      center: ["53%", "54%"],
+          color: "#ffffff",
-      startAngle: 180,
+          fontSize: 18,
-      label: {
-        normal: {
-          show: false,
-          position: "center",
         },
       },
-      data: data,
+    ],
-    },
+    series: [
-    {
+      {
-      type: "pie",
+        // name:'访问来源',
-      center: ["53%", "54%"],
+        type: "pie",
-      radius: ["80%", "95%"],
+        hoverAnimation: false,
-      hoverAnimation: false,
+        radius: ["60%", "80%"],
-      startAngle: 180,
+        center: ["53%", "54%"],
-      //   itemStyle: {
+        startAngle: 180,
-      //     normal: {
+        label: {
-      //       borderWidth: 1,
+          normal: {
-      //       borderColor: "rgba(193, 229, 255, .1)",
+            show: false,
-      //       color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+            position: "center",
-      //         {
+          },
-      //           offset: 1,
-      //           color: "rgba(127, 242, 255, .2)",
-      //         },
-      //         {
-      //           offset: 0,
-      //           color: "rgba(109, 195, 255, 0)",
-      //         },
-      //       ]),
-      //     },
-      //   },
-      label: {
-        normal: {
-          show: false,
-          position: "center",
         },
+        data: data2,
       },
-      data: data1,
+      {
-    },
+        type: "pie",
-  ],
+        center: ["53%", "54%"],
+        radius: ["80%", "95%"],
+        hoverAnimation: false,
+        startAngle: 180,
+        label: {
+          normal: {
+            show: false,
+            position: "center",
+          },
+        },
+        data: data1,
+      },
+    ],
+  };
 };
-// 使用生命钩子
+
-onMounted(() => {
+const setChart = () => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
 
-  // init(); // vue3.2没有this
+// 使用生命钩子
-  // 使用刚指定的配置项和数据显示图表。
+onBeforeMount(() => {
-  myChart.setOption(option);
+  setTimeout(() => {
-
+    data.dataList[0].value=props.list.finish;
-  // 单图表响应式: 跟随浏览器大小改变
+    data.dataList[1].value=props.list.total;
-  //   window.addEventListener("resize", () => {
+    data.percent=props.list.percent;
-  //     myChart.resize();
+    getOption();
-  //   });
+    setChart();
+  }, 600);
 });
+
 </script>
 
 <style scoped></style>

src/view/sy.vue

@@ -372,7 +372,7 @@
                 <div class="shang_item">
                   <div class="title">一网通办事</div>
                   <div class="i">
-                    <zwfw1 />
+                    <zwfw1 :list="data.zwfw.list1" />
                   </div>
                 </div>
                 <div class="shang_item">
@@ -658,6 +658,7 @@ import qyfw2 from "../assets/images/sy/rzbms.png";
 import qyfw3 from "../assets/images/sy/shqys.png";
 import qyfw4 from "../assets/images/sy/dxje.png";
 import { useRouter, useRoute } from "vue-router";
+import tools from "@/utils/tools";
 const router = useRouter();
 const routers = useRoute();
 // 路由跳转
@@ -851,6 +852,7 @@ const close = () => {
   pagination.currentPage = 1;
   pagination.total = 100;
 };
+
 //医疗卫生
 const showDialog2 = (title, url) => {
   if (title == "医院卫生院") {
@@ -980,6 +982,16 @@ const data = reactive({
     //   monthlyVisits1: "3565",
     // },
   ],
+  //政务服务
+  zwfw: {
+    list1: {
+      finish: "",
+      total: "",
+      percent: "",
+    },
+    list2: {},
+    list3: {},
+  },
   jysyList: [
     {
       title: "县镇",
@@ -1341,8 +1353,8 @@ const getData = async () => {
   });
 };
 // 公共服务&企业服务&政府服务
-const getfw = async() => {
+const getfw = async () => {
-  http.get("/api/ggfwyth/getLytAppData").then((res) => {
+  await http.get("/api/ggfwyth/getLytAppData").then((res) => {
     if (res.code == 200) {
       data.lytAppDayActive = res.data.lytAppDayActive;
       data.tableData = res.data.lytApp.reduce((acc, _, i, arr) => {
@@ -1356,13 +1368,18 @@ const getfw = async() => {
         }
         return acc;
       }, []);
+      console.log(data.tableData);
+      
     }
   });
-  //   http.get("/api/ggfwyth/getDataSharing").then((res) => {
+  await http.get("/api/ggfwyth/getDataSharing").then((res) => {
-  //   if (res.code == 200) {
+    if (res.code == 200) {
-      
+      data.zwfw.list1.finish = Number(res.data.apply);
-  //   }
+      data.zwfw.list1.total = Number(res.data.applyNum);
-  // });
+      data.zwfw.list1.percent = (Number(res.data.netRate) * 100).toFixed(2);
+    }
+  });
+  console.log(data.zwfw.list1);
 };
 //获取表格数据
 const getTable = (url, currentPage) => {
@@ -1814,6 +1831,7 @@ const autoScroll = () => {
   }
 };
 onBeforeMount(async () => {
+  // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
   getData();
   getfw();
   setTimeout(() => {

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        target: "http://10.0.0.65:8095/", //刘进
+        // target: "http://10.0.0.65:8095/", //刘进
-        // target: "http://220.191.238.50:996/", //线上
+        target: "http://220.191.238.50:996/", //线上
         changeOrigin: true, //是否支持跨域
         //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
       },