Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
commit
91b2631696
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,230 @@
|
|||
<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: 20,
|
||||
icon: "circle",
|
||||
data: ["2.0收件数"],
|
||||
bottom: "20%",
|
||||
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;
|
||||
},
|
||||
},
|
||||
{
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 20,
|
||||
icon: "circle",
|
||||
data: ["总收件数"],
|
||||
bottom: "5%",
|
||||
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,223 @@
|
|||
<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: 20,
|
||||
icon: "circle",
|
||||
data: ["超期受理数"],
|
||||
bottom: "20%",
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
{
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 20,
|
||||
icon: "circle",
|
||||
data: ["应受理数"],
|
||||
bottom: "5%",
|
||||
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,224 @@
|
|||
<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: 20,
|
||||
icon: "circle",
|
||||
data: ["超期办理数"],
|
||||
bottom: "20%",
|
||||
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;
|
||||
},
|
||||
},
|
||||
{
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 20,
|
||||
icon: "circle",
|
||||
data: ["应办理数"],
|
||||
bottom: "5%",
|
||||
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>
|
||||
327
src/view/sy.vue
327
src/view/sy.vue
|
|
@ -247,28 +247,32 @@
|
|||
<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">
|
||||
<div class="left"></div>
|
||||
<img class="left" src="@/assets/images/sy/zwfw_sl.png" />
|
||||
<div class="right">
|
||||
<div class="name">平均受理时长</div>
|
||||
<img class="line" src="" />
|
||||
<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">
|
||||
<div class="left"></div>
|
||||
<img class="left" src="@/assets/images/sy/zwfw_bl.png" />
|
||||
<div class="right">
|
||||
<div class="name">平均办理时长</div>
|
||||
<img class="line" src="" />
|
||||
<img class="line" src="@/assets/images/sy/zwfw_line.png" />
|
||||
<div class="time"><span>0.54</span>小时</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -324,13 +328,9 @@
|
|||
</div>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div class="yd_title last_1"></div>
|
||||
<table class="table">
|
||||
<!-- <table class="table">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in jtsyList"
|
||||
:key="index"
|
||||
style="display: flex; box-sizing: border-box"
|
||||
>
|
||||
<tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>
|
||||
<div class="s1" style="font-size: 16px">{{ item.key1 }}</div>
|
||||
|
|
@ -339,14 +339,90 @@
|
|||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="s1" style="font-size: 16px">{{ item.key2 }}</span
|
||||
>:<span class="s2" style="font-size: 15px">{{
|
||||
item.key2_value
|
||||
}}</span>
|
||||
<span class="s1" style="font-size: 16px">{{ item.key2 }}</span>:<span class="s2"
|
||||
style="font-size: 15px">{{
|
||||
item.key2_value
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table> -->
|
||||
<div class="jtsyBox">
|
||||
<div class="jtsyBoxtop">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[0].img" alt="" />
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[0].name }}</div>
|
||||
<div class="jtsytext">
|
||||
{{ data.jtsyList[0].key1 }}：
|
||||
<span>{{ data.jtsyList[0].key1_value }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ data.jtsyList[0].key2 }}：
|
||||
<span>{{ data.jtsyList[0].key2_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[1].img" alt="" />
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[1].name }}</div>
|
||||
<div class="jtsytext">
|
||||
{{ data.jtsyList[1].key1 }}：
|
||||
<span>{{ data.jtsyList[1].key1_value }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ data.jtsyList[1].key2 }}：
|
||||
<span>{{ data.jtsyList[1].key2_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxbot">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[2].img" alt="" />
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[2].name }}</div>
|
||||
<div class="jtsytext">
|
||||
{{ data.jtsyList[2].key1 }}：
|
||||
<span>{{ data.jtsyList[2].key1_value }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ data.jtsyList[2].key2 }}：
|
||||
<span>{{ data.jtsyList[2].key2_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[3].img" alt="" />
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[3].name }}</div>
|
||||
<div class="jtsytext">
|
||||
{{ data.jtsyList[3].key1 }}：
|
||||
<span>{{ data.jtsyList[3].key1_value }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ data.jtsyList[3].key2 }}：
|
||||
<span>{{ data.jtsyList[3].key2_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[4].img" alt="" />
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[4].name }}</div>
|
||||
<div class="jtsytext">
|
||||
{{ data.jtsyList[4].key1 }}：
|
||||
<span>{{ data.jtsyList[4].key1_value }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ data.jtsyList[4].key2 }}：
|
||||
<span>{{ data.jtsyList[4].key2_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
|
|
@ -363,12 +439,22 @@
|
|||
<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";
|
||||
import running from "../assets/images/sy/running.png";
|
||||
import Dialog from "./dialog/dialog.vue";
|
||||
import tableTennis from "../assets/images/sy/tableTennis.png";
|
||||
|
||||
import ggjtimg from "../assets/images/sy/ggjt.png";
|
||||
import ggjtimg1 from "../assets/images/sy/ggjt1.png";
|
||||
import ggjtimg2 from "../assets/images/sy/ggjt2.png";
|
||||
import ggjtimg3 from "../assets/images/sy/ggjt3.png";
|
||||
import ggjtimg4 from "../assets/images/sy/ggjt4.png";
|
||||
|
||||
import Dialog from "./dialog/dialog.vue";
|
||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||
import http from "@/utils/request.js";
|
||||
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
||||
|
|
@ -634,6 +720,7 @@ const data = reactive({
|
|||
key1_value: "1172491",
|
||||
key2: "骑行时长",
|
||||
key2_value: "1283h",
|
||||
img: ggjtimg,
|
||||
},
|
||||
{
|
||||
name: "电动单车",
|
||||
|
|
@ -641,6 +728,7 @@ const data = reactive({
|
|||
key1_value: "1172491",
|
||||
key2: "骑行时长",
|
||||
key2_value: "1283h",
|
||||
img: ggjtimg1,
|
||||
},
|
||||
{
|
||||
name: "公共汽车",
|
||||
|
|
@ -648,6 +736,7 @@ const data = reactive({
|
|||
key1_value: "176",
|
||||
key2: "乘坐人次",
|
||||
key2_value: "239741",
|
||||
img: ggjtimg2,
|
||||
},
|
||||
{
|
||||
name: "长途汽车",
|
||||
|
|
@ -655,6 +744,7 @@ const data = reactive({
|
|||
key1_value: "133",
|
||||
key2: "客流量",
|
||||
key2_value: "192874",
|
||||
img: ggjtimg3,
|
||||
},
|
||||
{
|
||||
name: "高铁",
|
||||
|
|
@ -662,6 +752,7 @@ const data = reactive({
|
|||
key1_value: "23",
|
||||
key2: "客流量",
|
||||
key2_value: "113414",
|
||||
img: ggjtimg4,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -1156,19 +1247,19 @@ onBeforeMount(async () => {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
width: 96%;
|
||||
background-image: url(@/assets/images/hygiene/center_title_1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .center_1 {
|
||||
// width: 96%;
|
||||
// background-image: url(@/assets/images/hygiene/center_title_1.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.center_2 {
|
||||
width: 96%;
|
||||
background-image: url(@/assets/images/hygiene/new_center.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// .center_2 {
|
||||
// width: 96%;
|
||||
// background-image: url(@/assets/images/hygiene/new_center.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.center_top {
|
||||
width: 95%;
|
||||
|
|
@ -1695,6 +1786,111 @@ onBeforeMount(async () => {
|
|||
right: 50px;
|
||||
}
|
||||
}
|
||||
// 交通事业
|
||||
.jtsyBox {
|
||||
width: 97%;
|
||||
// background-color: skyblue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
|
||||
img {
|
||||
width: 68px;
|
||||
height: 96px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.jtsyBoxtop {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 20px;
|
||||
.jtsyBoxtop1 {
|
||||
display: flex;
|
||||
span {
|
||||
font-family: TCloudNumber, TCloudNumber;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
text-shadow: 0px 0px 4px #12fbff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.jtsyname {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
text-shadow: 0px 2px 4px #35e0f9;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
}
|
||||
.jtsyname::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 60px;
|
||||
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
}
|
||||
.jtsytext {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 2px;
|
||||
// width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jtsyBoxbot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.jtsyBoxtop1 {
|
||||
display: flex;
|
||||
span {
|
||||
font-family: TCloudNumber, TCloudNumber;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
text-shadow: 0px 0px 4px #12fbff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.jtsyname {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
text-shadow: 0px 2px 4px #35e0f9;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
}
|
||||
.jtsyname::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 60px;
|
||||
border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
}
|
||||
.jtsytext {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 94%;
|
||||
|
|
@ -1739,6 +1935,81 @@ onBeforeMount(async () => {
|
|||
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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue