zwfw

src/view/echarts_sy/zwfw1.vue

@@ -3,12 +3,19 @@
 </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({
-const chart = ref(); // 创建DOM引用
+  list: {
-const dataList = [
+    type: Array,
+    default: () => {
+      return {};
+    },
+  },
+});
+const data = reactive({
+  dataList: [
     {
       name: "2.0收件数",
       value: 42277,
@@ -17,11 +24,16 @@ const dataList = [
       name: "总收件数",
       value: 42632,
     },
-];
+  ],
+  percent: 0,
+  option: {},
+});
+const chart = ref(); // 创建DOM引用
+
 //内圈数据
-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,7 +117,8 @@ const data1 = [
   },
 ];
 
-const option = {
+const getOption = () => {
+  data.option = {
     legend: {
       selectedMode: false,
       itemWidth: 10,
@@ -120,18 +133,23 @@ const option = {
       },
       formatter: function (params) {
         var num = "";
-      for (let i = 0; i < dataList.length; i++) {
+        for (let i = 0; i < data.dataList.length; i++) {
-        if (dataList[i].name == params) {
+          if (data.dataList[i].name == params) {
-          num = dataList[i].value;
+            num = data.dataList[i].value;
           }
         }
-      return params + "  " + num;
+        if(params == "总收件数"){
+          return params + "   " +num;
+        }else{
+          return params + "  " +num;
+        }
+        
       },
     },
 
     title: [
       {
-      text: `${((dataList[0].value / dataList[1].value)*100).toFixed(2)}%`,
+        text: `${data.percent}%`,
         right: "18%",
         bottom: "40%",
         textStyle: {
@@ -154,7 +172,7 @@ const option = {
             position: "center",
           },
         },
-      data: data,
+        data: data2,
       },
       {
         type: "pie",
@@ -162,22 +180,6 @@ const option = {
         radius: ["80%", "95%"],
         hoverAnimation: false,
         startAngle: 180,
-      //   itemStyle: {
-      //     normal: {
-      //       borderWidth: 1,
-      //       borderColor: "rgba(193, 229, 255, .1)",
-      //       color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
-      //         {
-      //           offset: 1,
-      //           color: "rgba(127, 242, 255, .2)",
-      //         },
-      //         {
-      //           offset: 0,
-      //           color: "rgba(109, 195, 255, 0)",
-      //         },
-      //       ]),
-      //     },
-      //   },
         label: {
           normal: {
             show: false,
@@ -187,23 +189,25 @@ const option = {
         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 替换成空，这个
       },