This commit is contained in:
duanxiaohai
commit
518d105d90
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -3,7 +3,7 @@ import { ElMessage } from "element-plus";
|
||||||
import tools from "@/utils/tools";
|
import tools from "@/utils/tools";
|
||||||
import router from "../router";
|
import router from "../router";
|
||||||
|
|
||||||
axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
||||||
axios.defaults.timeout = 120000;
|
axios.defaults.timeout = 120000;
|
||||||
|
|
||||||
// HTTP request 拦截器
|
// HTTP request 拦截器
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
>
|
>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="item_title">概况模型</div>
|
<div class="item_title">概况模型</div>
|
||||||
<div class="item_content">{{ data.content.gkmx }}</div>
|
<div class="item_content">{{ data.content.bz }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" style="margin-top: 20px">
|
<div class="item" style="margin-top: 20px">
|
||||||
<div class="item_title">详情描述</div>
|
<div class="item_title">详情描述</div>
|
||||||
|
|
@ -58,19 +58,19 @@
|
||||||
<div class="item_content_item">
|
<div class="item_content_item">
|
||||||
<div class="item_content_item_title">输入：</div>
|
<div class="item_content_item_title">输入：</div>
|
||||||
<div class="item_content_item_content">
|
<div class="item_content_item_content">
|
||||||
{{ data.content.sr }}
|
{{ data.content.srsj }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_item">
|
<div class="item_content_item">
|
||||||
<div class="item_content_item_title">对比逻辑：</div>
|
<div class="item_content_item_title">对比逻辑：</div>
|
||||||
<div class="item_content_item_content">
|
<div class="item_content_item_content">
|
||||||
{{ data.content.dblj }}
|
{{ data.content.bdlj }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_item">
|
<div class="item_content_item">
|
||||||
<div class="item_content_item_title">输出：</div>
|
<div class="item_content_item_title">输出：</div>
|
||||||
<div class="item_content_item_content">
|
<div class="item_content_item_content">
|
||||||
{{ data.content.sc }}
|
{{ data.content.scjg }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -161,7 +161,7 @@ const handle = (current) => {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
--el-dialog-bg-color: none;
|
--el-dialog-bg-color: none;
|
||||||
--el-dialog-width: 40% !important;
|
--el-dialog-width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-header {
|
.my-header {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 330px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
year: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const data = reactive({
|
||||||
|
list: [],
|
||||||
|
year: [],
|
||||||
|
option: {},
|
||||||
|
bg: [],
|
||||||
|
});
|
||||||
|
//职称结构取数
|
||||||
|
|
||||||
|
var rich = {
|
||||||
|
name: {
|
||||||
|
color: "#666666",
|
||||||
|
fontSize: 14,
|
||||||
|
padding: [8, 30, 0, 30],
|
||||||
|
fontWeight: "400",
|
||||||
|
align: "left",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
color: "#333",
|
||||||
|
fontSize: 15,
|
||||||
|
padding: [0, 30, 8, 30],
|
||||||
|
fontWeight: "500",
|
||||||
|
align: "left",
|
||||||
|
},
|
||||||
|
percent: {
|
||||||
|
color: "#FFF",
|
||||||
|
align: "right",
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: "500",
|
||||||
|
//padding: [0, 5]
|
||||||
|
},
|
||||||
|
hr: {
|
||||||
|
borderColor: "#DFDFDF",
|
||||||
|
width: "100%",
|
||||||
|
borderWidth: 1,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
cir: {
|
||||||
|
fontSize: 26,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
width: "80%",
|
||||||
|
top: "5%",
|
||||||
|
textStyle: {
|
||||||
|
inside: true,
|
||||||
|
color: "#9FC3E7",
|
||||||
|
padding: [14, 0, 10, 0],
|
||||||
|
align: "left",
|
||||||
|
verticalAlign: "center",
|
||||||
|
fontSize: 14,
|
||||||
|
rich: {},
|
||||||
|
},
|
||||||
|
// icon: "rect",
|
||||||
|
itemGap: 10,
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
// bottom: '15%'
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
return colorList[params.dataIndex];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: "pie",
|
||||||
|
radius: ["20%", "50%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
|
||||||
|
label: {
|
||||||
|
// 显示标签
|
||||||
|
show: true,
|
||||||
|
// 标签位置
|
||||||
|
position: "outside",
|
||||||
|
// 标签对齐方式
|
||||||
|
// alignTo: "labelLine",
|
||||||
|
// 背景颜色
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
// 高度
|
||||||
|
height: 0,
|
||||||
|
// 宽度
|
||||||
|
width: 0,
|
||||||
|
// 行高
|
||||||
|
lineHeight: 0,
|
||||||
|
// 标签距离标签线的距离
|
||||||
|
distanceToLabelLine: 0,
|
||||||
|
// 边框圆角
|
||||||
|
borderRadius: 3,
|
||||||
|
// 边框宽度
|
||||||
|
borderWidth: 1,
|
||||||
|
// 边框颜色
|
||||||
|
borderColor: "auto",
|
||||||
|
// 内边距
|
||||||
|
padding: [3, -3, 3, -3],
|
||||||
|
// 标签格式化
|
||||||
|
formatter: function (params) {
|
||||||
|
return `{b|${params.value}%}{a|${params.name}}`;
|
||||||
|
},
|
||||||
|
// 富文本样式
|
||||||
|
rich: {
|
||||||
|
// a样式
|
||||||
|
a: {
|
||||||
|
// 内边距
|
||||||
|
padding: [-14, 10, 40, -70],
|
||||||
|
// 字体大小
|
||||||
|
fontSize: "12px",
|
||||||
|
// 字体
|
||||||
|
fontFamily: "MicrosoftYaHei",
|
||||||
|
// 字体颜色
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
// b样式
|
||||||
|
b: {
|
||||||
|
// 内边距
|
||||||
|
padding: [0, 10, 55, -70],
|
||||||
|
// 字体大小
|
||||||
|
fontSize: "15px",
|
||||||
|
// 字体
|
||||||
|
fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
|
||||||
|
// 字体粗细
|
||||||
|
fontWeight: "bold",
|
||||||
|
// 字体颜色
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
// textStyle: {
|
||||||
|
// color: "white", // 改变标示文字的颜色
|
||||||
|
// fontSize: 18, //文字大小
|
||||||
|
// },
|
||||||
|
// formatter: "{b}:{c}" + "个\n\n",
|
||||||
|
// borderWidth: 20,
|
||||||
|
// borderRadius: 4,
|
||||||
|
// padding: [0, -80],
|
||||||
|
// },
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
length: 40, // 改变标示线的长度
|
||||||
|
length2: 40,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: "white", // 改变标示线的颜色
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: "男", value: 300 },
|
||||||
|
{ name: "女", value: 200 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "外边框",
|
||||||
|
type: "pie",
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
clockWise: false, //顺时加载
|
||||||
|
hoverAnimation: false, //鼠标移入变大
|
||||||
|
center: ["50%", "50%"], //这里跟上面那组一样即可
|
||||||
|
radius: ["52%", "52%"], //这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false, //重点：此处主要是为了不展示data中的value和name
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1, //此处的值无所谓是多少
|
||||||
|
name: "", //因为不展示label，可不填
|
||||||
|
itemStyle: {
|
||||||
|
//边框样式，此处我们设置的浅蓝色，颜色可自行修改
|
||||||
|
normal: {
|
||||||
|
borderWidth: 20, //边框宽度
|
||||||
|
// borderColor: colorList, //边框颜色
|
||||||
|
borderColor: "rgba(94, 183, 249, 0.13)", //边框颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const setChart = () => {
|
||||||
|
// Vue3中： 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
data.list = props.list;
|
||||||
|
data.year = props.year;
|
||||||
|
data.year.forEach(() => {
|
||||||
|
data.bg.push(0);
|
||||||
|
});
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,620 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 400px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
const emit = defineEmits(["shuju"]);
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
|
const colors = [
|
||||||
|
{
|
||||||
|
left: "rgba(234, 162, 57, .16)",
|
||||||
|
right: "rgba(234, 162, 57, .6)",
|
||||||
|
top: "rgba(234, 162, 57, 1)",
|
||||||
|
bottom: "rgba(234, 162, 57, .46)",
|
||||||
|
front: "rgba(234, 162, 57, .66)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(14, 252, 255, .16)",
|
||||||
|
right: "rgba(14, 252, 255, .6)",
|
||||||
|
top: "rgba(14, 252, 255, 1)",
|
||||||
|
bottom: "rgba(14, 252, 255, .46)",
|
||||||
|
front: "rgba(14, 252, 255, .66)",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||||
|
const data = reactive({
|
||||||
|
list: [],
|
||||||
|
option: {},
|
||||||
|
Max: 20000,
|
||||||
|
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
||||||
|
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||||
|
xxname: ["2020", "2021", "2022", "2023"],
|
||||||
|
});
|
||||||
|
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||||
|
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||||
|
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
||||||
|
const CubeLeft_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 40, shape.y];
|
||||||
|
const c1 = [shape.x - 27, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeFront_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 40, shape.y];
|
||||||
|
const c1 = [shape.x - 18, shape.y];
|
||||||
|
const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||||
|
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeRight_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 18, shape.y];
|
||||||
|
const c1 = [shape.x - 5, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeTop_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const c0 = [shape.x - 40, shape.y];
|
||||||
|
const c1 = [shape.x - 18, shape.y];
|
||||||
|
const c2 = [shape.x - 5, shape.y - 14];
|
||||||
|
const c3 = [shape.x - 27, shape.y - 14];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeBottom_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
|
const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
|
||||||
|
const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||||
|
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
|
||||||
|
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
|
||||||
|
echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
|
||||||
|
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
|
||||||
|
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
||||||
|
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
|
||||||
|
// -------------------------
|
||||||
|
const CubeLeft_2 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 0, shape.y];
|
||||||
|
const c1 = [shape.x + 13, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeFront_2 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 0, shape.y];
|
||||||
|
const c1 = [shape.x + 22, shape.y];
|
||||||
|
const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||||
|
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeRight_2 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x + 22, shape.y];
|
||||||
|
const c1 = [shape.x + 35, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeTop_2 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const c0 = [shape.x - 0, shape.y];
|
||||||
|
const c1 = [shape.x + 22, shape.y];
|
||||||
|
const c2 = [shape.x + 35, shape.y - 14];
|
||||||
|
const c3 = [shape.x + 13, shape.y - 14];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeBottom_2 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
|
const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||||
|
const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
|
||||||
|
const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||||
|
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
echarts.graphic.registerShape("CubeLeft_2", CubeLeft_2);
|
||||||
|
echarts.graphic.registerShape("CubeFront_2", CubeFront_2);
|
||||||
|
echarts.graphic.registerShape("CubeRight_2", CubeRight_2);
|
||||||
|
echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
|
||||||
|
echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
|
||||||
|
|
||||||
|
// ------------------------------
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
legend: {
|
||||||
|
data: [
|
||||||
|
"适龄生育妇女",
|
||||||
|
"育龄妇女",
|
||||||
|
],
|
||||||
|
top: "0%",
|
||||||
|
right: "30%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 10,
|
||||||
|
top: 40,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: data.xxname,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
offset: 10,
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: function (value) {
|
||||||
|
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: data.xxname,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
offset: 10,
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: data.Max,
|
||||||
|
// interval: 100,
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255, 255, 255, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "rgba(255, 255, 255, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
xAxisIndex: 0,
|
||||||
|
name: "适龄生育妇女",
|
||||||
|
type: "custom",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeBottom_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["bottom"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeLeft_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["left"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeFront_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["front"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["right"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//设置图例颜色
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data.valueList,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxisIndex: 0,
|
||||||
|
name: "育龄妇女",
|
||||||
|
type: "custom",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeBottom_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["bottom"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeLeft_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["left"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeFront_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["front"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["right"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//设置图例颜色
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [{ offset: 1, color: "rgba(14, 252, 255, 1)" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data.valueList2,
|
||||||
|
},
|
||||||
|
//顶部字体
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
xAxisIndex: 1,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 18,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value - 5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(221, 242, 255, 0)",
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data.valueList.map((item) => parseInt(item) + 5),
|
||||||
|
barWidth: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
xAxisIndex: 1,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 18,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value - 5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(221, 242, 255, 0)",
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data.valueList2.map((item) => parseInt(item) + 5),
|
||||||
|
barWidth: 20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
myChart.on("click", function (params) {
|
||||||
|
emit("shuju", params.name, params.seriesIndex);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const getMaxCeilingValue = (arr) => {
|
||||||
|
let max = Math.max(...arr); // 找到数组中的最大值
|
||||||
|
return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
|
||||||
|
};
|
||||||
|
const setChart1 = () => {
|
||||||
|
data.valueList = [];
|
||||||
|
data.xxname = [];
|
||||||
|
if (data.list.length !== 0) {
|
||||||
|
data.list.forEach((item) => {
|
||||||
|
data.xxname.push(item.name); //信息名
|
||||||
|
data.valueList.push(item.num); //信息数
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
data.xxname.forEach((item, index) => {
|
||||||
|
props.list.forEach((itemm, indexx) => {
|
||||||
|
if (item == itemm.xzjd) {
|
||||||
|
data.valueList[index] = itemm.qrrs;
|
||||||
|
data.valueList2[index] = itemm.qcrs;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 800);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
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引用
|
||||||
|
|
||||||
|
//内圈数据
|
||||||
|
var data2 = [
|
||||||
|
{
|
||||||
|
value: data.dataList[0].value,
|
||||||
|
name: "2.0收件数",
|
||||||
|
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: data.dataList[1].value - data.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: data.dataList[1].value,
|
||||||
|
name: "总收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//外圈数据
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
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: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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", // 修改图例颜色为红色
|
||||||
|
// },
|
||||||
|
// 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;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: `${data.percent}%`,
|
||||||
|
right: "18%",
|
||||||
|
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: data2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
center: ["53%", "54%"],
|
||||||
|
radius: ["80%", "95%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
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引用
|
||||||
|
|
||||||
|
//内圈数据
|
||||||
|
var data2 = [
|
||||||
|
{
|
||||||
|
value: data.dataList[0].value,
|
||||||
|
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: data.dataList[1].value - data.dataList[0].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: "#095b9b", // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
name: "总收件数",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//外圈数据
|
||||||
|
const data1 = [
|
||||||
|
{
|
||||||
|
value: data.dataList[1].value,
|
||||||
|
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: data.dataList[1].value,
|
||||||
|
name: "",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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", // 修改图例颜色为红色
|
||||||
|
// },
|
||||||
|
// 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;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: `${data.percent}%`,
|
||||||
|
right: "18%",
|
||||||
|
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: data2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
center: ["53%", "54%"],
|
||||||
|
radius: ["80%", "95%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
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>
|
||||||
|
|
@ -70,12 +70,12 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="lampState">
|
<div class="lampState">
|
||||||
<div @click="openSf()">
|
<div >
|
||||||
<!-- <img
|
<img
|
||||||
:src="selectedLamp == 0 ? lampImages[1] : lampImages[4]"
|
src="@/assets/sy-table/sfmx.png"
|
||||||
@click="lampScreen(0)"
|
@click="openSf()"
|
||||||
/> -->
|
style="cursor: pointer; width: 63px; height: 44px"
|
||||||
算法模型
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -530,12 +530,14 @@ const closeJj = () => {
|
||||||
};
|
};
|
||||||
//获取算法模型数据
|
//获取算法模型数据
|
||||||
const openSf=()=>{
|
const openSf=()=>{
|
||||||
|
|
||||||
|
http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
sfType.title=routers.query.name;
|
||||||
|
sfType.data=res.data;
|
||||||
dialogShowSf.value = true;
|
dialogShowSf.value = true;
|
||||||
// http.get(`/api/ggfwyth/pg/sfmx?xh=${routers.query.xh}`).then((res) => {
|
}
|
||||||
// if (res.code == 200) {
|
});
|
||||||
// tableType.data = res.data;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
const getTable = (pagination) => {
|
const getTable = (pagination) => {
|
||||||
http
|
http
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,7 @@
|
||||||
<education v-if="gaikuangList.education"></education>
|
<education v-if="gaikuangList.education"></education>
|
||||||
<yl v-if="gaikuangList.yl"></yl>
|
<yl v-if="gaikuangList.yl"></yl>
|
||||||
<hygiene v-if="gaikuangList.hygiene"></hygiene>
|
<hygiene v-if="gaikuangList.hygiene"></hygiene>
|
||||||
|
<jz v-if="gaikuangList.jz"></jz>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -179,6 +180,7 @@ import work from "./table_gk/gk_work.vue";
|
||||||
import education from "./table_gk/gk_education.vue";
|
import education from "./table_gk/gk_education.vue";
|
||||||
import yl from "./table_gk/gk_yl.vue";
|
import yl from "./table_gk/gk_yl.vue";
|
||||||
import hygiene from "./table_gk/gk_hygiene.vue";
|
import hygiene from "./table_gk/gk_hygiene.vue";
|
||||||
|
import jz from "./table_gk/gk_jz.vue";
|
||||||
import { useRouter, useRoute } from "vue-router";
|
import { useRouter, useRoute } from "vue-router";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
|
@ -525,6 +527,7 @@ const gaikuangList = reactive({
|
||||||
education: false,
|
education: false,
|
||||||
yl: false,
|
yl: false,
|
||||||
hygiene: false,
|
hygiene: false,
|
||||||
|
jz:false,
|
||||||
});
|
});
|
||||||
//是否显示七优享
|
//是否显示七优享
|
||||||
const show_7yx = ref(true);
|
const show_7yx = ref(true);
|
||||||
|
|
@ -534,7 +537,8 @@ const gk = computed(() => {
|
||||||
gaikuangList.work ||
|
gaikuangList.work ||
|
||||||
gaikuangList.hygiene ||
|
gaikuangList.hygiene ||
|
||||||
gaikuangList.education ||
|
gaikuangList.education ||
|
||||||
gaikuangList.yl
|
gaikuangList.yl ||
|
||||||
|
gaikuangList.jz
|
||||||
) {
|
) {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -618,8 +622,8 @@ const gaikuang = (name) => {
|
||||||
gaikuangList.yl = true;
|
gaikuangList.yl = true;
|
||||||
} else if (name == "病有所医") {
|
} else if (name == "病有所医") {
|
||||||
gaikuangList.hygiene = true;
|
gaikuangList.hygiene = true;
|
||||||
} else if (name == "住有所居") {
|
}else if(name == "住有所居") {
|
||||||
gaikuangList.infant = true;
|
gaikuangList.jz = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// 服务表格样式
|
// 服务表格样式
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,389 @@
|
||||||
|
<template>
|
||||||
|
<div class="module11">
|
||||||
|
<div class="displayFlex left_bg">
|
||||||
|
<div class="flex1" style="margin-top: 10px">
|
||||||
|
<div class="yd_title left_1">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<eP3 :list="data.jsbgl" v-if="showEchart"></eP3>
|
||||||
|
</div>
|
||||||
|
<div class="flex1">
|
||||||
|
<div class="yd_title left_2">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<eP2
|
||||||
|
:list="data.medicalInsurance.ffrc"
|
||||||
|
:year="data.medicalInsurance.year"
|
||||||
|
></eP2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="displayFlex center_bg">
|
||||||
|
<div class="flex1">
|
||||||
|
<div class="yd_title center_1">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shang">
|
||||||
|
<div class="shang_item">
|
||||||
|
<div class="title">物业小区</div>
|
||||||
|
<div class="i">
|
||||||
|
<zwfw1 :list="data.fgl.list1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shang_item">
|
||||||
|
<div class="title">专业物业</div>
|
||||||
|
<div class="i">
|
||||||
|
<zwfw2 :list="data.fgl.list2"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex1" style="margin-top: 20px">
|
||||||
|
<div class="yd_title center_2">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="displayFlex right_bg">
|
||||||
|
<div class="flex1">
|
||||||
|
<div class="yd_title right_1">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex1">
|
||||||
|
<div class="yd_title right_2">
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
||||||
|
import eP2 from "../echarts_jz/eP2.vue";
|
||||||
|
import eP3 from "../echarts_jz/eP3.vue";
|
||||||
|
import http from "@/utils/request.js";
|
||||||
|
import zwfw1 from "../echarts_jz/zwfw1.vue";
|
||||||
|
import zwfw2 from "../echarts_jz/zwfw2.vue";
|
||||||
|
const data = reactive({
|
||||||
|
medicalInsurance: {}, //医疗保险
|
||||||
|
fgl: {
|
||||||
|
list1: {
|
||||||
|
finish: "60",
|
||||||
|
total: "100",
|
||||||
|
percent: "60",
|
||||||
|
},
|
||||||
|
list2: {
|
||||||
|
finish: "40",
|
||||||
|
total: "100",
|
||||||
|
percent: "40",
|
||||||
|
},
|
||||||
|
},//覆盖率
|
||||||
|
jkda: {
|
||||||
|
jdfs: "336993",
|
||||||
|
jdl: "91.82",
|
||||||
|
jtysqyl: "49.37",
|
||||||
|
}, //健康档案
|
||||||
|
|
||||||
|
});
|
||||||
|
const showEchart = ref(false);
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
showEchart.value = true;
|
||||||
|
// await http.get("/api/ggfwyth/health").then((res) => {
|
||||||
|
// if (res.code == 200) {
|
||||||
|
// data.medicalInsurance = res.data.medicalInsurance;
|
||||||
|
// data.lmb = res.data.lmb;
|
||||||
|
// data.mz = res.data.mz;
|
||||||
|
// // data.jkda = res.data.jkda;
|
||||||
|
// data.jsbgl = res.data.jsbgl;
|
||||||
|
// data.fyglrs = res.data.fyglrs;
|
||||||
|
// data.jktj = res.data.jktj;
|
||||||
|
// data.jkhd = res.data.jkhd;
|
||||||
|
// data.lxbx = res.data.lxbx;
|
||||||
|
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
onMounted(() => {});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.displayFlex {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// flex: 1;
|
||||||
|
width: 33.333333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex1 {
|
||||||
|
// flex: 1;
|
||||||
|
// padding: 0 28px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex2 {
|
||||||
|
// flex: 1;
|
||||||
|
// padding: 0 38px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module11 {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
// margin-top: 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yd_title {
|
||||||
|
// background-image: url(@/assets/img_04.png);
|
||||||
|
// background-repeat: no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 94%;
|
||||||
|
height: 42px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 利用伪元素和两个i元素产生4条线 */
|
||||||
|
.animate-border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
#03e9f4,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
|
||||||
|
animation: one 4s linear infinite;
|
||||||
|
}
|
||||||
|
i:nth-child(1) {
|
||||||
|
top: -100%;
|
||||||
|
right: 0;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
transparent,
|
||||||
|
#03e9f4,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
/* 动画名称 动画持续时间 动画渲染函数 动画延迟时间 动画执行次数 */
|
||||||
|
animation: two 4s linear 1s infinite;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
right: -100%;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
-90deg,
|
||||||
|
transparent,
|
||||||
|
#03e9f4,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: three 4s linear 2s infinite;
|
||||||
|
}
|
||||||
|
i:nth-child(2) {
|
||||||
|
bottom: -100%;
|
||||||
|
left: 0;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
360deg,
|
||||||
|
transparent,
|
||||||
|
#03e9f4,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: four 4s linear 3s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
.c {
|
||||||
|
width: 130px;
|
||||||
|
height: 42px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes one {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes two {
|
||||||
|
0% {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes three {
|
||||||
|
0% {
|
||||||
|
right: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes four {
|
||||||
|
0% {
|
||||||
|
bottom: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_1 {
|
||||||
|
background-image: url(@/assets/images/jz/gzf.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.left_2 {
|
||||||
|
background-image: url(@/assets/images/jz/wfjw.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center_1 {
|
||||||
|
background-image: url(@/assets/images/jz/fgl.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.center_2 {
|
||||||
|
background-image: url(@/assets/images/jz/wlsq.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.right_1 {
|
||||||
|
background-image: url(@/assets/images/jz/zzgc.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.right_2 {
|
||||||
|
background-image: url(@/assets/images/jz/phqgz.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_bg {
|
||||||
|
width: 520px;
|
||||||
|
// height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-right: 28px;
|
||||||
|
background-image: url(@/assets/images/left_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.center_bg {
|
||||||
|
width: 560px;
|
||||||
|
// height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-right: 28px;
|
||||||
|
background-image: url(@/assets/images/center_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.right_bg {
|
||||||
|
width: 520px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-right: 28px;
|
||||||
|
background-image: url(@/assets/images/right_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
.shang {
|
||||||
|
margin-top:20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
&_item {
|
||||||
|
width: 45%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
width: 50%;
|
||||||
|
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: 100%;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue