This commit is contained in:
姚宇浩 2024-05-24 11:24:32 +08:00
parent 0f0fd4f9ac
commit a4d8d78be5
6 changed files with 220 additions and 84 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

@ -10,10 +10,16 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span> <span class="left">收入</span
><span class="right"
>{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div class="sr" style="margin-top: 5px">
<span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span> <span class="left">支出</span
><span class="right"
>{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
>
</div> </div>
</div> </div>
</div> </div>
@ -21,10 +27,16 @@
<div class="item_title"><span class="blue">工伤</span>保险</div> <div class="item_title"><span class="blue">工伤</span>保险</div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span> <span class="left">收入</span
><span class="right"
>{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div class="sr" style="margin-top: 5px">
<span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span> <span class="left">支出</span
><span class="right"
>{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
>
</div> </div>
</div> </div>
</div> </div>
@ -34,10 +46,16 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span> <span class="left">收入</span
><span class="right"
>{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div class="sr" style="margin-top: 5px">
<span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span> <span class="left">支出</span
><span class="right"
>{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
>
</div> </div>
</div> </div>
</div> </div>
@ -47,10 +65,16 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span> <span class="left">收入</span
><span class="right"
>{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div class="sr" style="margin-top: 5px">
<span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span> <span class="left">支出</span
><span class="right"
>{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
>
</div> </div>
</div> </div>
</div> </div>
@ -60,10 +84,16 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span> <span class="left">收入</span
><span class="right"
>{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div class="sr" style="margin-top: 5px">
<span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span> <span class="left">支出</span
><span class="right"
>{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
>
</div> </div>
</div> </div>
</div> </div>
@ -100,10 +130,12 @@
<div class="left_2_bottom_item"> <div class="left_2_bottom_item">
<div class="left_2_bottom_item_shang"> <div class="left_2_bottom_item_shang">
<div class="left"> <div class="left">
<span class="span1">{{ jysyList[0].title }}</span>学校师生比 <span class="span1">{{ jysyList[0].title }}</span
>学校师生比
</div> </div>
<div class="right"> <div class="right">
<span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }} <span class="span1">{{ jysyList[0].teacher }}</span
>:{{ jysyList[0].student }}
</div> </div>
</div> </div>
<div class="left_2_bottom_item_xia"> <div class="left_2_bottom_item_xia">
@ -113,7 +145,8 @@
<div class="left_2_bottom_item"> <div class="left_2_bottom_item">
<div class="left_2_bottom_item_shang"> <div class="left_2_bottom_item_shang">
<div class="left"> <div class="left">
<span class="span2">{{ jysyList[1].title }}</span>学校师生比 <span class="span2">{{ jysyList[1].title }}</span
>学校师生比
</div> </div>
<div class="right"> <div class="right">
{{ jysyList[1].teacher }}:{{ jysyList[1].student }} {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
@ -166,28 +199,81 @@
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie> <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
<div class="table"> <div class="table">
<div class="table_choose"> <div class="table_choose">
<div :class="choose == '1' ? 'choose' : 'noChoose'" @click="change('1')"> <div
:class="choose == '1' ? 'choose' : 'noChoose'"
@click="change('1')"
>
公共服务 公共服务
</div> </div>
<div :class="choose == '2' ? 'choose' : 'noChoose'" @click="change('2')"> <div
:class="choose == '2' ? 'choose' : 'noChoose'"
@click="change('2')"
>
企业服务 企业服务
</div> </div>
<div :class="choose == '3' ? 'choose' : 'noChoose'" @click="change('3')"> <div
:class="choose == '3' ? 'choose' : 'noChoose'"
@click="change('3')"
>
政务服务 政务服务
</div> </div>
</div> </div>
<el-table :data="tableData" style="width: 100%; height: 272px" class="table_border" :row-style="rowState" <el-table
:header-cell-style="tableHeaderColor"> :data="tableData"
style="width: 100%; height: 272px"
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 prop="company" label="企业名称" width="180" />
<el-table-column prop="address" label="项目事项牵头单位" width="180" /> <el-table-column
prop="address"
label="项目事项牵头单位"
width="180"
/>
<el-table-column prop="finish" label="完成情况"> <el-table-column prop="finish" label="完成情况">
<template #default="scope"> <template #default="scope">
<div style="letter-spacing: 3px" :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'"> <div
style="letter-spacing: 3px"
:style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'"
>
{{ scope.row.finish ? "已完成" : "未完成" }} {{ scope.row.finish ? "已完成" : "未完成" }}
</div> </div>
</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>
<div class="shang_item">
<div class="title">超期受理率</div>
</div>
<div class="shang_item">
<div class="title">超期办理率</div>
</div>
</div>
<div class="xia">
<div class="xia_item">
<div class="left"></div>
<div class="right">
<div class="name">平均受理时长</div>
<img class="line" src="" />
<div class="time"><span>0.22</span>小时</div>
</div>
</div>
<div class="xia_item">
<div class="left"></div>
<div class="right">
<div class="name">平均办理时长</div>
<img class="line" src="" />
<div class="time"><span>0.54</span>小时</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -195,7 +281,11 @@
<div class="flex1"> <div class="flex1">
<div class="yd_title mechanism"></div> <div class="yd_title mechanism"></div>
<div class="ylws"> <div class="ylws">
<div class="ylws_item" v-for="(item, index) in data.ylwsList" :key="index"> <div
class="ylws_item"
v-for="(item, index) in data.ylwsList"
:key="index"
>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="value">{{ item.value }}</div> <div class="value">{{ item.value }}</div>
</div> </div>
@ -204,7 +294,11 @@
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title service"></div> <div class="yd_title service"></div>
<div class="whsy"> <div class="whsy">
<div class="whsy_item" v-for="(item, index) in data.whsyList" :key="index"> <div
class="whsy_item"
v-for="(item, index) in data.whsyList"
:key="index"
>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="value"> <div class="value">
{{ item.value }}<span>{{ item.dw }}</span> {{ item.value }}<span>{{ item.dw }}</span>
@ -215,7 +309,11 @@
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title last"></div> <div class="yd_title last"></div>
<div class="tysy"> <div class="tysy">
<div class="tysy_item" v-for="(item, index) in data.tysyList" :key="index"> <div
class="tysy_item"
v-for="(item, index) in data.tysyList"
:key="index"
>
<div class="value"> <div class="value">
{{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span> {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
</div> </div>
@ -228,7 +326,11 @@
<div class="yd_title last_1"></div> <div class="yd_title last_1"></div>
<table class="table"> <table class="table">
<tbody> <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>{{ item.name }}</td>
<td> <td>
<div class="s1" style="font-size: 16px">{{ item.key1 }}</div> <div class="s1" style="font-size: 16px">{{ item.key1 }}</div>
@ -237,17 +339,23 @@
}}</span> }}</span>
</td> </td>
<td> <td>
<span class="s1" style="font-size: 16px">{{ item.key2 }}</span>:<span class="s2" <span class="s1" style="font-size: 16px">{{ item.key2 }}</span
style="font-size: 15px">{{ >:<span class="s2" style="font-size: 15px">{{
item.key2_value item.key2_value
}}</span> }}</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title" :tableData="tableType.data" @close="close"> <Dialog
:dialogShow="dialogShow"
:columns="tableType.columns"
:title="tableType.title"
:tableData="tableType.data"
@close="close"
>
</Dialog> </Dialog>
</div> </div>
</template> </template>
@ -263,71 +371,70 @@ import Dialog from "./dialog/dialog.vue";
import tableTennis from "../assets/images/sy/tableTennis.png"; import tableTennis from "../assets/images/sy/tableTennis.png";
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue"; import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import { CircleCloseFilled } from '@element-plus/icons-vue' import { CircleCloseFilled } from "@element-plus/icons-vue";
import { columns } from "element-plus/es/components/table-v2/src/common.mjs"; import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
// //
const dialogShow = ref(false) const dialogShow = ref(false);
const tableType = reactive({ const tableType = reactive({
title: '', title: "",
columns: [ columns: [
{ {
label: '姓名', label: "姓名",
property: 'name', property: "name",
width: '150' width: "150",
}, },
{ {
label: '人员类别', label: "人员类别",
property: 'type', property: "type",
width: '150' width: "150",
}, },
{ {
label: '就失业状态', label: "就失业状态",
property: 'status', property: "status",
width: '150' width: "150",
}, },
{ {
label: '日期', label: "日期",
property: 'date', property: "date",
}, },
{ {
label: '地址', label: "地址",
property: 'address', property: "address",
}, },
], ],
data: [ data: [
{ {
date: '2016-05-02', date: "2016-05-02",
name: 'John Smith', name: "John Smith",
address: 'No.1518, Jinshajiang Road, Putuo District', address: "No.1518, Jinshajiang Road, Putuo District",
}, },
{ {
date: '2016-05-04', date: "2016-05-04",
name: 'John Smith', name: "John Smith",
address: 'No.1518, Jinshajiang Road, Putuo District', address: "No.1518, Jinshajiang Road, Putuo District",
}, },
{ {
date: '2016-05-01', date: "2016-05-01",
name: 'John Smith', name: "John Smith",
address: 'No.1518, Jinshajiang Road, Putuo District', address: "No.1518, Jinshajiang Road, Putuo District",
}, },
{ {
date: '2016-05-03', date: "2016-05-03",
name: 'John Smith', name: "John Smith",
address: 'No.1518, Jinshajiang Road, Putuo District', address: "No.1518, Jinshajiang Road, Putuo District",
}, },
] ],
}) });
const showDialog = (title) => { const showDialog = (title) => {
dialogShow.value = true dialogShow.value = true;
tableType.title = title tableType.title = title;
} };
const close = () => { const close = () => {
dialogShow.value = false dialogShow.value = false;
} };
const data = reactive({ const data = reactive({
PopulationData: { PopulationData: {
@ -654,14 +761,16 @@ const jtsyList = ref([
// //
const cs = computed(() => { const cs = computed(() => {
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
}`; jysyList.value[0].teacher + jysyList.value[0].student
}`;
return str; return str;
}); });
// //
const nc = computed(() => { const nc = computed(() => {
let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
}`; jysyList.value[1].teacher + jysyList.value[1].student
}`;
return str; return str;
}); });
// //
@ -834,10 +943,25 @@ onBeforeMount(async () => {
.tabelPart { .tabelPart {
height: 60vh; height: 60vh;
padding: 16px; padding: 16px;
background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%); background: linear-gradient(
270deg,
rgba(0, 77, 131, 0.69) 0%,
rgba(0, 51, 83, 0.77) 50%,
rgba(0, 77, 131, 0.74) 100%
),
radial-gradient(
66% 40% at 50% 0%,
rgba(1, 150, 243, 0.55) 0%,
rgba(0, 116, 255, 0) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5); box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid; border: 2px solid;
border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2; border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
:deep(.el-table) { :deep(.el-table) {
--el-table-bg-color: none; --el-table-bg-color: none;
@ -1084,9 +1208,11 @@ onBeforeMount(async () => {
color: #2ef1ff; color: #2ef1ff;
line-height: 26px; line-height: 26px;
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5); text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
background: linear-gradient(270deg, background: linear-gradient(
rgba(255, 255, 255, 0) 0%, 270deg,
#3976a1 100%); rgba(255, 255, 255, 0) 0%,
#3976a1 100%
);
} }
} }
} }
@ -1424,26 +1550,26 @@ onBeforeMount(async () => {
// border: 1px solid rgba(255, 255, 255, 0.77); // border: 1px solid rgba(255, 255, 255, 0.77);
background-color: #27628d; background-color: #27628d;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
.csbl { .csbl {
position: absolute; position: absolute;
left: 0; left: 0;
width: calc(var(--teacher) / var(--total) * 100%); width: calc(var(--teacher) / var(--total) * 100%);
height: 8px; height: 8px;
background-color: #00f5ff; background-color: #00f5ff;
border-radius: 8px; border-radius: 8px;
} }
.ncbl { .ncbl {
position: absolute; position: absolute;
left: 0; left: 0;
width: calc(var(--teacher) / var(--total) * 100%); width: calc(var(--teacher) / var(--total) * 100%);
height: 8px; height: 8px;
background-color: #ffd863; background-color: #ffd863;
border-radius: 8px; border-radius: 8px;
} }
} }
&_xia:nth-child(2){ &_xia:nth-child(2) {
background-color: #475e73; background-color: #475e73;
} }
} }
@ -1584,9 +1710,11 @@ onBeforeMount(async () => {
line-height: 40px; line-height: 40px;
width: 170px; width: 170px;
height: 40px; height: 40px;
background: linear-gradient(180deg, background: linear-gradient(
rgba(0, 142, 255, 0.35) 0%, 180deg,
rgba(0, 142, 255, 0.52) 100%); rgba(0, 142, 255, 0.35) 0%,
rgba(0, 142, 255, 0.52) 100%
);
box-shadow: inset 0px -2px 0px 0px #00b4ff; box-shadow: inset 0px -2px 0px 0px #00b4ff;
border-radius: 2px 0px 0px 2px; border-radius: 2px 0px 0px 2px;
color: #ffffff; color: #ffffff;
@ -1603,7 +1731,15 @@ 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;
}
:deep(.el-table) { :deep(.el-table) {
background: rgba(32, 64, 115, 1); background: rgba(32, 64, 115, 1);
@ -1620,7 +1756,7 @@ onBeforeMount(async () => {
padding-left: 10px; padding-left: 10px;
} }
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td { ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #2f4b74; background-color: #2f4b74;
} }