Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
duanxiaohai 2024-05-24 15:32:13 +08:00
commit d46715d758
9 changed files with 743 additions and 5 deletions

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

View File

@ -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(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -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(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -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(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -224,6 +224,7 @@
class="table_border"
:row-style="rowState"
:header-cell-style="tableHeaderColor"
v-if="choose == '1'"
>
<el-table-column prop="company" label="企业名称" width="180" />
<el-table-column
@ -242,6 +243,41 @@
</template>
</el-table-column>
</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>
@ -403,6 +439,9 @@
<script setup>
import ePie from "./echarts_sy/pie.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 baskerball from "../assets/images/sy/baskerball.png";
import badminton from "../assets/images/sy/badminton.png";
@ -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) {
background: rgba(32, 64, 115, 1);