Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
duanxiaohai
commit
d46715d758
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,209 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
name: "2.0收件数",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "总收件数",
|
||||||
|
value: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//内圈数据
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
value: 90,
|
||||||
|
name: "2.0收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(0, 255, 250, 0.29)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(0, 255, 250, 0.8)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(0, 255, 250, 1)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: "rgba(1,1,1,0.5)",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 10,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "总收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//外圈数据
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
legend:
|
||||||
|
{
|
||||||
|
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: "90%",
|
||||||
|
right: "24%",
|
||||||
|
bottom: "40%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name:'访问来源',
|
||||||
|
type: "pie",
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ["60%", "80%"],
|
||||||
|
center: ["53%", "54%"],
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
// 使用生命钩子
|
||||||
|
onMounted(() => {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
// var myChart = echarts.init(document.getElementById('main'));
|
||||||
|
// Vue3中： 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
// init(); // vue3.2没有this
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 单图表响应式: 跟随浏览器大小改变
|
||||||
|
// window.addEventListener("resize", () => {
|
||||||
|
// myChart.resize();
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,204 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
name: "超期受理数",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "应受理数",
|
||||||
|
value: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
value: 90,
|
||||||
|
name: "超期受理数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(255, 224, 0, 0.29)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(255, 224, 0, 1)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: "rgba(1,1,1,0.5)",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: dataList[1].value - dataList[0].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "应受理数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
legend:
|
||||||
|
{
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 10,
|
||||||
|
icon: "circle",
|
||||||
|
data: ["超期受理数","",'应受理数'],
|
||||||
|
bottom: "3%",
|
||||||
|
|
||||||
|
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: "90%",
|
||||||
|
right: "24%",
|
||||||
|
bottom: "40%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name:'访问来源',
|
||||||
|
type: "pie",
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ["60%", "80%"],
|
||||||
|
center: ["53%", "54%"],
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
// 使用生命钩子
|
||||||
|
onMounted(() => {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
// var myChart = echarts.init(document.getElementById('main'));
|
||||||
|
// Vue3中： 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
// init(); // vue3.2没有this
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 单图表响应式: 跟随浏览器大小改变
|
||||||
|
// window.addEventListener("resize", () => {
|
||||||
|
// myChart.resize();
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,203 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
name: "超期办理数",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "应办理数",
|
||||||
|
value: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
value: 90,
|
||||||
|
name: "超期办理数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(0, 255, 134, 0.29)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(0, 255, 134, 1)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: "rgba(1,1,1,0.5)",
|
||||||
|
shadowBlur: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: dataList[1].value - dataList[0].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "应办理数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
legend:
|
||||||
|
{
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 10,
|
||||||
|
icon: "circle",
|
||||||
|
data: ["超期办理数","","应办理数"],
|
||||||
|
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: "90%",
|
||||||
|
right: "24%",
|
||||||
|
bottom: "40%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name:'访问来源',
|
||||||
|
type: "pie",
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ["60%", "80%"],
|
||||||
|
center: ["53%", "54%"],
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
// 使用生命钩子
|
||||||
|
onMounted(() => {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
// var myChart = echarts.init(document.getElementById('main'));
|
||||||
|
// Vue3中： 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
// init(); // vue3.2没有this
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 单图表响应式: 跟随浏览器大小改变
|
||||||
|
// window.addEventListener("resize", () => {
|
||||||
|
// myChart.resize();
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
132
src/view/sy.vue
132
src/view/sy.vue
|
|
@ -224,6 +224,7 @@
|
||||||
class="table_border"
|
class="table_border"
|
||||||
:row-style="rowState"
|
:row-style="rowState"
|
||||||
:header-cell-style="tableHeaderColor"
|
:header-cell-style="tableHeaderColor"
|
||||||
|
v-if="choose == '1'"
|
||||||
>
|
>
|
||||||
<el-table-column prop="company" label="企业名称" width="180" />
|
<el-table-column prop="company" label="企业名称" width="180" />
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|
@ -242,6 +243,41 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<div class="zwfw" v-if="choose == '3'">
|
||||||
|
<div class="shang">
|
||||||
|
<div class="shang_item">
|
||||||
|
<div class="title">一网通办事</div>
|
||||||
|
<div class="i"><zwfw1 /></div>
|
||||||
|
</div>
|
||||||
|
<div class="shang_item">
|
||||||
|
<div class="title">超期受理率</div>
|
||||||
|
<div class="i"><zwfw2 /></div>
|
||||||
|
</div>
|
||||||
|
<div class="shang_item">
|
||||||
|
<div class="title">超期办理率</div>
|
||||||
|
<div class="i"><zwfw3 /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="xia">
|
||||||
|
<div class="xia_item">
|
||||||
|
<img class="left" src="@/assets/images/sy/zwfw_sl.png" />
|
||||||
|
<div class="right">
|
||||||
|
<div class="name">平均受理时长</div>
|
||||||
|
<img class="line" src="@/assets/images/sy/zwfw_line.png" />
|
||||||
|
<div class="time"><span>0.22</span>小时</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fgx"></div>
|
||||||
|
<div class="xia_item">
|
||||||
|
<img class="left" src="@/assets/images/sy/zwfw_bl.png" />
|
||||||
|
<div class="right">
|
||||||
|
<div class="name">平均办理时长</div>
|
||||||
|
<img class="line" src="@/assets/images/sy/zwfw_line.png" />
|
||||||
|
<div class="time"><span>0.54</span>小时</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -403,6 +439,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import ePie from "./echarts_sy/pie.vue";
|
import ePie from "./echarts_sy/pie.vue";
|
||||||
import ePie2 from "./echarts_sy/pie2.vue";
|
import ePie2 from "./echarts_sy/pie2.vue";
|
||||||
|
import zwfw1 from "./echarts_sy/zwfw1.vue";
|
||||||
|
import zwfw2 from "./echarts_sy/zwfw2.vue";
|
||||||
|
import zwfw3 from "./echarts_sy/zwfw3.vue";
|
||||||
import footerball from "../assets/images/sy/footerball.png";
|
import footerball from "../assets/images/sy/footerball.png";
|
||||||
import baskerball from "../assets/images/sy/baskerball.png";
|
import baskerball from "../assets/images/sy/baskerball.png";
|
||||||
import badminton from "../assets/images/sy/badminton.png";
|
import badminton from "../assets/images/sy/badminton.png";
|
||||||
|
|
@ -1792,7 +1831,7 @@ onBeforeMount(async () => {
|
||||||
text-shadow: 0px 2px 4px #35e0f9;
|
text-shadow: 0px 2px 4px #35e0f9;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.jtsyname::after {
|
.jtsyname::after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -1800,8 +1839,8 @@ onBeforeMount(async () => {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
|
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.jtsytext {
|
.jtsytext {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
|
|
@ -1834,7 +1873,7 @@ onBeforeMount(async () => {
|
||||||
text-shadow: 0px 2px 4px #35e0f9;
|
text-shadow: 0px 2px 4px #35e0f9;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.jtsyname::after {
|
.jtsyname::after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -1888,7 +1927,90 @@ onBeforeMount(async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//政务服务
|
||||||
|
.zwfw {
|
||||||
|
height: 272px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 0px solid #7aceff;
|
||||||
|
padding: 16px 19px;
|
||||||
|
.shang {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
&_item {
|
||||||
|
width: 28%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.title {
|
||||||
|
background-image: url(@/assets/images/sy/zwfw_title.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.i {
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.xia {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 88px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-image: url(@/assets/images/sy/zwfw_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.fgx {
|
||||||
|
width: 3px;
|
||||||
|
height: 40px;
|
||||||
|
border-right: 2px dashed rgba(92, 118, 162, 0.8); /* 设置虚线 */
|
||||||
|
}
|
||||||
|
&_item {
|
||||||
|
width: 49%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.left {
|
||||||
|
width: 72px;
|
||||||
|
height: 68px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
margin-left: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.name {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
margin: 3px 0;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
span {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 3px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
:deep(.el-table) {
|
:deep(.el-table) {
|
||||||
background: rgba(32, 64, 115, 1);
|
background: rgba(32, 64, 115, 1);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue