This commit is contained in:
姚宇浩 2024-09-04 13:45:24 +08:00
parent 873dc72b79
commit 24e0d5921f
4 changed files with 138 additions and 116 deletions

BIN
dist.zip

Binary file not shown.

View File

@ -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 = {
legend: {
selectedMode: false,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
icon: "circle",
data: ["2.0收件数", "", "总收件数"],
bottom: "3%",
width: 380,
textStyle: {
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%",
const getOption = () => {
data.option = {
legend: {
selectedMode: false,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
icon: "circle",
data: ["2.0收件数", "", "总收件数"],
bottom: "3%",
width: 380,
textStyle: {
color: "#ffffff",
fontSize: 18,
color: "#ffffff", //
},
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: [
{
// name:'访',
type: "pie",
hoverAnimation: false,
radius: ["60%", "80%"],
center: ["53%", "54%"],
startAngle: 180,
label: {
normal: {
show: false,
position: "center",
title: [
{
text: `${data.percent}%`,
right: "18%",
bottom: "40%",
textStyle: {
color: "#ffffff",
fontSize: 18,
},
},
data: data,
},
{
type: "pie",
center: ["53%", "54%"],
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,
position: "center",
],
series: [
{
// name:'访',
type: "pie",
hoverAnimation: false,
radius: ["60%", "80%"],
center: ["53%", "54%"],
startAngle: 180,
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(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// 使
onBeforeMount(() => {
setTimeout(() => {
data.dataList[0].value=props.list.finish;
data.dataList[1].value=props.list.total;
data.percent=props.list.percent;
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

View File

@ -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() => {
http.get("/api/ggfwyth/getLytAppData").then((res) => {
const getfw = async () => {
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) => {
// if (res.code == 200) {
// }
// });
await http.get("/api/ggfwyth/getDataSharing").then((res) => {
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(() => {

View File

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