zwfw
This commit is contained in:
parent
873dc72b79
commit
24e0d5921f
|
|
@ -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(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中： 需要引入
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
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>
|
||||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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 替换成空，这个
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue