This commit is contained in:
lnn19986213 2024-06-11 11:41:44 +08:00
parent 55aed6b79f
commit 725f7ebfd8
6 changed files with 1343 additions and 95 deletions

BIN
src/assets/dialogTab.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -0,0 +1,402 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShowTab"
width="80vw"
:show-close="false"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<el-icon
size="26"
color="#fff"
@click="closeDialog"
>
<CircleCloseFilled />
</el-icon>
</div>
</template>
<div class="tabelPart">
<div class="bo">
<div class="title">
<div class="title_top">
<img
src="@/assets/images/table_l.png"
alt=""
style="margin-right: 10px"
/>
<div class="name">{{ title }}详情</div>
<img
src="@/assets/images/table_r.png"
alt=""
style="margin-left: 10px"
/>
</div>
<img
class="title_botton"
src="@/assets/images/table_c.png"
alt=""
/>
</div>
</div>
<div class="tabChoose">
<div
:class="data.tab == '0' ? 'choosed' : 'tabs'"
style="margin-right: -25px"
>
<span @click="changeTab('0')">路线</span>
</div>
<div
:class="data.tab == '1' ? 'choosed' : 'tabs'"
style="margin-left: -25px"
>
<span @click="changeTab('1')">乘坐人次趋势</span>
</div>
</div>
<div
v-if="data.tab == '0'"
style="width: 100%; height: calc(100% - 110px)"
>
<el-table
:data="data.tableData"
height="100%"
:header-cell-style="{ background: '#008FCD' }"
:key="tableKey"
>
<!-- <el-table-column
v-for="(item, index) in data.columns"
:key="index"
:property="item.property"
:label="item.label"
:width="item.width"
align="center"
/> -->
<template v-for="item in data.columns">
<el-table-column
:key="item.label"
v-if="item.type === 'slot'"
:show-overflow-tooltip="true"
:label="item.label"
:property="item.property"
align="center"
>
<template #default="scope">
<slot
:name="item.property"
:currentCol="item"
:currentData="scope.row"
></slot>
</template>
</el-table-column>
<el-table-column
:key="item.label"
:property="item.property"
:label="item.label"
:show-overflow-tooltip="true"
align="center"
v-else
/>
</template>
</el-table>
</div>
<div
v-if="data.tab == '0'"
class="pagePart"
>
<el-pagination
background
layout="prev, pager, next,total"
:page-size="pagination.pageSize"
:total="pagination.total"
prev-text="上一页"
next-text="下一页"
@current-change="handle"
v-model:current-page="pagination.currentPage"
/>
</div>
<div
v-if="data.tab == '1'"
style="width: 100%; height: 70vh"
>
<tL
:list1="data.list1"
:year="data.year"
></tL>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import tL from "./echarts/tabLine.vue";
const props = defineProps({
dialogShowTab: {
type: Boolean,
default: () => {
return false;
},
},
columns: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
title: {
type: String,
default: () => {
return "";
},
},
pagination: {
type: Object,
required: true,
},
list1: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const emit = defineEmits(["close", "handle"]);
//
const dialogShowTab = ref();
const data = reactive({
title: "",
columns: [],
tableData: [],
pagination: {},
list1: [],
year: [],
tab: '0',
});
const gridData = [];
//
const tableKey = ref(Math.random());
//
watch(
() => props.dialogShowTab,
(newVal, oldVal) => {
dialogShowTab.value = newVal;
// data.tableData = props.tableData;
data.columns = props.columns;
}
);
watch(
() => props.tableData,
(newVal, oldVal) => {
data.tableData = props.tableData;
tableKey.value = Math.random();
}
);
watch(
() => props.list1,
(newVal, oldVal) => {
data.list1 = newVal;
}
);
watch(
() => props.year,
(newVal, oldVal) => {
data.year = newVal;
}
);
// 使
onMounted(() => {
dialogShowTab.value = props.dialogShowTab;
data.columns = props.columns;
data.title = props.title;
data.tableData = props.tableData;
data.list1 = props.list1;
data.year = props.year;
const paginationTotal = document.querySelector(".el-pagination__total");
console.log(paginationTotal);
// paginationTotal.innerText = ` ${props.pagination.total} `;
});
const closeDialog = () => {
dialogShowTab.value = false;
emit("close");
};
//
const handle = (current) => {
emit("handle", current);
};
const changeTab = (val) => {
data.tab = val
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 76% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
.tabelPart {
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%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid;
border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
:deep(.el-table) {
--el-table-bg-color: none;
--el-table-tr-bg-color: none;
--el-table-header-bg-color: none;
background: none;
border: none;
--el-table-text-color: #fff;
--el-table-header-text-color: #fff;
}
.tabChoose {
width: 100%;
height: 50px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 20px;
line-height: 36px;
cursor: pointer;
}
.tabs {
width: 252px;
text-align: center;
font-size: 20px;
color: rgba(255, 255, 255, 0.7);
line-height: 29px;
letter-spacing: 2px;
text-shadow: 0px 2px 4px #00405f;
}
.choosed {
width: 252px;
text-align: center;
font-size: 20px;
color: #fff;
line-height: 29px;
letter-spacing: 2px;
text-shadow: 0px 2px 4px #00405f,
inset 0px -2px 2px rgba(255, 255, 255, 0.65);
background-image: url(@/assets/dialogTab.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
.pagePart {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
:deep(.el-pagination) {
--el-pagination-button-disabled-bg-color: none;
--el-pagination-bg-color: none;
--el-pagination-button-bg-color: none;
--el-pagination-button-color: #fff;
color: #fff;
}
:deep(.el-pagination button:disabled) {
background-color: rgba(0, 116, 255, 0) !important;
}
:deep(.el-pagination > .is-last) {
color: #ffffff;
}
}
.bo {
width: 100%;
display: flex;
}
.title {
margin: 10px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
img {
height: 33px;
width: 33px;
}
.name {
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 600;
font-size: 33px;
color: #ffffff;
line-height: 38px;
text-align: center;
font-style: normal;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
}
&_botton {
margin-top: 5px;
height: 19px;
}
}
</style>

View File

@ -0,0 +1,262 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShowEc"
width="80vw"
:show-close="false"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<el-icon
size="26"
color="#fff"
@click="closeDialog"
>
<CircleCloseFilled />
</el-icon>
</div>
</template>
<div class="tabelPart">
<div class="bo">
<div class="title">
<div class="title_top">
<img
src="@/assets/images/table_l.png"
alt=""
style="margin-right: 10px"
/>
<div class="name">{{ title }}详情</div>
<img
src="@/assets/images/table_r.png"
alt=""
style="margin-left: 10px"
/>
</div>
<img
class="title_botton"
src="@/assets/images/table_c.png"
alt=""
/>
</div>
</div>
<div style="width: 100%; height: 70vh">
<eL
:list1="data.list1"
:list2="data.list2"
:year="data.year"
></eL>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import eL from "./echarts/echartLine.vue";
const props = defineProps({
dialogShowEc: {
type: Boolean,
default: () => {
return false;
},
},
title: {
type: String,
default: () => {
return "";
},
},
list1: {
type: Array,
default: () => {
return [];
},
},
list2: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const emit = defineEmits(["close"]);
//
const dialogShowEc = ref();
const data = reactive({
title: "",
list1: [],
list2: [],
year: [],
option: {},
bg: [],
});
//
watch(
() => props.dialogShowEc,
(newVal, oldVal) => {
dialogShowEc.value = newVal;
}
);
watch(
() => props.list1,
(newVal, oldVal) => {
data.list1 = newVal;
}
);
watch(
() => props.list2,
(newVal, oldVal) => {
data.list2 = newVal;
}
);
watch(
() => props.year,
(newVal, oldVal) => {
data.year = newVal;
}
);
// 使
onMounted(() => {
data.title = props.title;
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
});
const closeDialog = () => {
dialogShowEc.value = false;
emit("close");
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 76% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
.tabelPart {
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%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid;
border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
:deep(.el-table) {
--el-table-bg-color: none;
--el-table-tr-bg-color: none;
--el-table-header-bg-color: none;
background: none;
border: none;
--el-table-text-color: #fff;
--el-table-header-text-color: #fff;
}
}
.pagePart {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
:deep(.el-pagination) {
--el-pagination-button-disabled-bg-color: none;
--el-pagination-bg-color: none;
--el-pagination-button-bg-color: none;
--el-pagination-button-color: #fff;
color: #fff;
}
:deep(.el-pagination button:disabled) {
background-color: rgba(0, 116, 255, 0) !important;
}
:deep(.el-pagination > .is-last) {
color: #ffffff;
}
}
.bo {
width: 100%;
display: flex;
}
.title {
margin: 10px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
img {
height: 33px;
width: 33px;
}
.name {
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 600;
font-size: 33px;
color: #ffffff;
line-height: 38px;
text-align: center;
font-style: normal;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
}
&_botton {
margin-top: 5px;
height: 19px;
}
}
</style>

View File

@ -0,0 +1,237 @@
<template>
<div ref="chart" style="width: 100%; height: 100%"></div>
</template>
<script setup >
import { onBeforeMount, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const props = defineProps({
list1: {
type: Array,
default: () => {
return [];
},
},
list2: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const data = reactive({
list1: [],
list2: [],
year: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
},
legend: {
data: ["骑行次数", "骑行时长"],
top: "5%",
right: "center",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "20%",
left: "5%",
right: "5%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: data.year,
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
yAxis: [
{
type: "value",
name: "骑行次数/次",
splitLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
min: 0, // Y
max: function (value) {
// Y
return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
},
nameTextStyle: {
// Y
fontSize: 14, // 20
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
name: "骑行时长/时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
min: 0, // Y
max: function (value) {
// Y
return Math.ceil(Math.max(value.max, value.max * 1.6) / 2) * 2;
},
nameTextStyle: {
// Y
fontSize: 14, // 20
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "背景",
type: "bar",
data: data.bg,
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "骑行次数",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list1,
},
{
yAxisIndex: 1,
name: "骑行时长",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list2,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
// 使
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -0,0 +1,171 @@
<template>
<div ref="chart" style="width: 100%; height: 100%"></div>
</template>
<script setup >
import { onBeforeMount, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const props = defineProps({
list1: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const data = reactive({
list1: [],
year: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
},
legend: {
data: ["骑行次数"],
top: "5%",
right: "center",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
show: false,
},
grid: {
top: "5%",
left: "5%",
right: "5%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: data.year,
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
yAxis: [
{
type: "value",
name: "骑行次数/次",
splitLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
min: 0, // Y
max: function (value) {
// Y
return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
},
nameTextStyle: {
// Y
fontSize: 14, // 20
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "背景",
type: "bar",
data: data.bg,
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "骑行次数",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list1,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
// 使
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list1 = props.list1;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -15,16 +15,13 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span <span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span>
><span class="right"
>{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div
<span class="left">支出</span class="sr"
><span class="right" style="margin-top: 5px"
>{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span >
> <span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
</div> </div>
</div> </div>
</div> </div>
@ -32,16 +29,13 @@
<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="left">收入</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span>
><span class="right"
>{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div
<span class="left">支出</span class="sr"
><span class="right" style="margin-top: 5px"
>{{ data.LivelihoodWelfare.gsbxzzc }}万元</span >
> <span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
</div> </div>
</div> </div>
</div> </div>
@ -51,16 +45,13 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span <span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span>
><span class="right"
>{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div
<span class="left">支出</span class="sr"
><span class="right" style="margin-top: 5px"
>{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span >
> <span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
</div> </div>
</div> </div>
</div> </div>
@ -70,16 +61,13 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span <span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span>
><span class="right"
>{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div
<span class="left">支出</span class="sr"
><span class="right" style="margin-top: 5px"
>{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span >
> <span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
</div> </div>
</div> </div>
</div> </div>
@ -89,16 +77,13 @@
</div> </div>
<div class="item_content"> <div class="item_content">
<div class="sr"> <div class="sr">
<span class="left">收入</span <span class="left">收入</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span>
><span class="right"
>{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
>
</div> </div>
<div class="sr" style="margin-top: 5px"> <div
<span class="left">支出</span class="sr"
><span class="right" style="margin-top: 5px"
>{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span >
> <span class="left">支出</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +100,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_2"> <div class="yd_title left_2">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -140,35 +128,41 @@
<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 <span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }}
>:{{ jysyList[0].student }}
</div> </div>
</div> </div>
<div class="left_2_bottom_item_xia"> <div class="left_2_bottom_item_xia">
<div class="csbl" :style="cs"></div> <div
class="csbl"
:style="cs"
></div>
</div> </div>
</div> </div>
<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 }}
</div> </div>
</div> </div>
<div class="left_2_bottom_item_xia"> <div class="left_2_bottom_item_xia">
<div class="ncbl" :style="nc"></div> <div
class="ncbl"
:style="nc"
></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_3"> <div class="yd_title left_3">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -213,24 +207,47 @@
/> />
<div class="people_total_item left"> <div class="people_total_item left">
<div class="number">{{ data.PopulationData.man }}</div> <div class="number">{{ data.PopulationData.man }}</div>
<img src="../assets/images/sy/man.png" alt="" /> <img
src="../assets/images/sy/man.png"
alt=""
/>
<div class="sex">男性人口</div> <div class="sex">男性人口</div>
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" /> <img
class="sexMove"
src="../assets/images/sy/sexImg.png"
alt=""
/>
</div> </div>
<div class="people_total_item2 center"> <div class="people_total_item2 center">
<img src="../assets/images/sy/people_total.png" alt="" /> <img
src="../assets/images/sy/people_total.png"
alt=""
/>
<div class="number">{{ data.PopulationData.rkzs }}</div> <div class="number">{{ data.PopulationData.rkzs }}</div>
<div class="total">人口总数</div> <div class="total">人口总数</div>
</div> </div>
<div class="people_total_item right"> <div class="people_total_item right">
<div class="number">{{ data.PopulationData.woman }}</div> <div class="number">{{ data.PopulationData.woman }}</div>
<img src="../assets/images/sy/woman.png" alt="" /> <img
src="../assets/images/sy/woman.png"
alt=""
/>
<div class="sex">女性人口</div> <div class="sex">女性人口</div>
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" /> <img
class="sexMove"
src="../assets/images/sy/sexImg.png"
alt=""
/>
</div> </div>
</div> </div>
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2> <ePie2
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie> style="margin-top: 20px"
:list="data.ageRatio"
></ePie2>
<ePie
style="margin-bottom: 20px"
:list="data.ageGroup"
></ePie>
<div class="table"> <div class="table">
<div class="table_choose"> <div class="table_choose">
<div <div
@ -260,13 +277,20 @@
:header-cell-style="tableHeaderColor" :header-cell-style="tableHeaderColor"
v-if="choose == '1'" v-if="choose == '1'"
> >
<el-table-column prop="company" label="企业名称" width="200" /> <el-table-column
prop="company"
label="企业名称"
width="200"
/>
<el-table-column <el-table-column
prop="address" prop="address"
label="项目事项牵头单位" label="项目事项牵头单位"
width="200" width="200"
/> />
<el-table-column prop="finish" label="完成情况"> <el-table-column
prop="finish"
label="完成情况"
>
<template #default="scope"> <template #default="scope">
<div <div
style="letter-spacing: 3px" style="letter-spacing: 3px"
@ -277,24 +301,35 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="qyfw" v-if="choose == '2'"> <div
class="qyfw"
v-if="choose == '2'"
>
<div <div
class="qyfw_item" class="qyfw_item"
v-for="(item, index) in qyfyList" v-for="(item, index) in qyfyList"
:key="index" :key="index"
> >
<img class="qyfw_item_left" :src="item.img" /> <img
class="qyfw_item_left"
:src="item.img"
/>
<div class="qyfw_item_right"> <div class="qyfw_item_right">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<img class="line" src="@/assets/images/sy/zwfw_line.png" /> <img
class="line"
src="@/assets/images/sy/zwfw_line.png"
/>
<div class="number"> <div class="number">
<span>{{ item.value }}</span <span>{{ item.value }}</span>{{ item.dw }}
>{{ item.dw }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="zwfw" v-if="choose == '3'"> <div
class="zwfw"
v-if="choose == '3'"
>
<div class="shang"> <div class="shang">
<div class="shang_item"> <div class="shang_item">
<div class="title">一网通办事</div> <div class="title">一网通办事</div>
@ -317,19 +352,31 @@
</div> </div>
<div class="xia"> <div class="xia">
<div class="xia_item"> <div class="xia_item">
<img class="left" src="@/assets/images/sy/zwfw_sl.png" /> <img
class="left"
src="@/assets/images/sy/zwfw_sl.png"
/>
<div class="right"> <div class="right">
<div class="name">平均受理时长</div> <div class="name">平均受理时长</div>
<img class="line" src="@/assets/images/sy/zwfw_line.png" /> <img
class="line"
src="@/assets/images/sy/zwfw_line.png"
/>
<div class="time"><span>0.22</span>小时</div> <div class="time"><span>0.22</span>小时</div>
</div> </div>
</div> </div>
<div class="fgx"></div> <div class="fgx"></div>
<div class="xia_item"> <div class="xia_item">
<img class="left" src="@/assets/images/sy/zwfw_bl.png" /> <img
class="left"
src="@/assets/images/sy/zwfw_bl.png"
/>
<div class="right"> <div class="right">
<div class="name">平均办理时长</div> <div class="name">平均办理时长</div>
<img class="line" src="@/assets/images/sy/zwfw_line.png" /> <img
class="line"
src="@/assets/images/sy/zwfw_line.png"
/>
<div class="time"><span>0.54</span>小时</div> <div class="time"><span>0.54</span>小时</div>
</div> </div>
</div> </div>
@ -357,7 +404,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title service"> <div class="yd_title service">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -377,7 +427,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title last"> <div class="yd_title last">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -402,7 +455,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title last_1"> <div class="yd_title last_1">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -430,9 +486,16 @@
</table> --> </table> -->
<div class="jtsyBox"> <div class="jtsyBox">
<div class="jtsyBoxtop"> <div class="jtsyBoxtop">
<div class="jtsyBoxtop1"> <div class="jtsyBoxtop1" @click="showEc('公共自行车')">
<img :src="data.jtsyList[0].img" alt="" /> <img
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" /> :src="data.jtsyList[0].img"
alt=""
/>
<img
src="../assets/images/sy/jtsy.gif"
class="turn"
alt=""
/>
<div> <div>
<div class="jtsyname">{{ data.jtsyList[0].name }}</div> <div class="jtsyname">{{ data.jtsyList[0].name }}</div>
<div class="jtsytext"> <div class="jtsytext">
@ -446,8 +509,15 @@
</div> </div>
</div> </div>
<div class="jtsyBoxtop1"> <div class="jtsyBoxtop1">
<img :src="data.jtsyList[1].img" alt="" /> <img
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" /> :src="data.jtsyList[1].img"
alt=""
/>
<img
src="../assets/images/sy/jtsy.gif"
class="turn"
alt=""
/>
<div> <div>
<div class="jtsyname">{{ data.jtsyList[1].name }}</div> <div class="jtsyname">{{ data.jtsyList[1].name }}</div>
<div class="jtsytext"> <div class="jtsytext">
@ -462,9 +532,16 @@
</div> </div>
</div> </div>
<div class="jtsyBoxbot"> <div class="jtsyBoxbot">
<div class="jtsyBoxtop1"> <div class="jtsyBoxtop1" @click="showTab('公共汽车')">
<img :src="data.jtsyList[2].img" alt="" /> <img
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" /> :src="data.jtsyList[2].img"
alt=""
/>
<img
src="../assets/images/sy/jtsy.gif"
class="turn"
alt=""
/>
<div> <div>
<div class="jtsyname">{{ data.jtsyList[2].name }}</div> <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
<div class="jtsytext"> <div class="jtsytext">
@ -478,8 +555,15 @@
</div> </div>
</div> </div>
<div class="jtsyBoxtop1"> <div class="jtsyBoxtop1">
<img :src="data.jtsyList[3].img" alt="" /> <img
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" /> :src="data.jtsyList[3].img"
alt=""
/>
<img
src="../assets/images/sy/jtsy.gif"
class="turn"
alt=""
/>
<div> <div>
<div class="jtsyname">{{ data.jtsyList[3].name }}</div> <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
<div class="jtsytext"> <div class="jtsytext">
@ -493,8 +577,15 @@
</div> </div>
</div> </div>
<div class="jtsyBoxtop1"> <div class="jtsyBoxtop1">
<img :src="data.jtsyList[4].img" alt="" /> <img
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" /> :src="data.jtsyList[4].img"
alt=""
/>
<img
src="../assets/images/sy/jtsy.gif"
class="turn"
alt=""
/>
<div> <div>
<div class="jtsyname">{{ data.jtsyList[4].name }}</div> <div class="jtsyname">{{ data.jtsyList[4].name }}</div>
<div class="jtsytext"> <div class="jtsytext">
@ -535,6 +626,28 @@
</div> </div>
</template> </template>
</Dialog> </Dialog>
<DialogEc
:dialogShowEc="dialogShowEc"
:title="dataEc.title"
:list1="dataEc.list1"
:list2="dataEc.list2"
:year="dataEc.year"
@close="close"
>
</DialogEc>
<DialogTab
:dialogShowTab="dialogShowTab"
:title="dataTab.title"
:list1="dataTab.list1"
:list2="dataTab.list2"
:year="dataTab.year"
:columns="dataTab.columns"
:tableData="dataTab.data"
:pagination="pagination"
@handle="handlePagination"
@close="close"
>
</DialogTab>
</div> </div>
</template> </template>
@ -557,6 +670,8 @@ import ggjtimg3 from "../assets/images/sy/ggjt3.png";
import ggjtimg4 from "../assets/images/sy/ggjt4.png"; import ggjtimg4 from "../assets/images/sy/ggjt4.png";
import Dialog from "./dialog/dialog.vue"; import Dialog from "./dialog/dialog.vue";
import DialogEc from "./dialog/dialogEc.vue";
import DialogTab from "./dialog/dialogTab.vue";
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";
@ -567,6 +682,8 @@ import qyfw3 from "../assets/images/sy/shqys.png";
import qyfw4 from "../assets/images/sy/dxje.png"; import qyfw4 from "../assets/images/sy/dxje.png";
// //
const dialogShow = ref(false); const dialogShow = ref(false);
const dialogShowEc = ref(false);
const dialogShowTab = ref(false);
// //
const columnss = reactive({ const columnss = reactive({
就业培训: [ 就业培训: [
@ -708,7 +825,36 @@ const showDialog = (title, url) => {
const close = () => { const close = () => {
dialogShow.value = false; dialogShow.value = false;
dialogShowEc.value = false;
dialogShowTab.value = false;
}; };
// -
const dataEc = reactive({
title: '',
list1: [],
list2: [],
year: [],
})
// -
const dataTab = reactive({
title: '',
list1: [],
list2: [],
year: [],
columns: [{
label: "班次",
property: "bc",
},
{
label: "始发站-终点站",
property: "sfzd",
},
{
label: "始发时间",
property: "time",
},],
data: [],
})
const data = reactive({ const data = reactive({
PopulationData: { PopulationData: {
@ -1040,16 +1186,14 @@ const jtsyList = ref([
// //
const cs = computed(() => { const cs = computed(() => {
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${ let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student
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: ${ let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student
jysyList.value[1].teacher + jysyList.value[1].student }`;
}`;
return str; return str;
}); });
// //
@ -1246,6 +1390,38 @@ const qyfyList = reactive([
onBeforeMount(async () => { onBeforeMount(async () => {
getData(); getData();
}); });
//
const showEc = (val) => {
dataEc.title = val
dataEc.list1 = [1,2,3,4,5,6,7,8,9,10,11,122]
dataEc.list2 = [1,2,3,4,5,6,7,8,9,10,11,112]
dataEc.year = [1,2,3,4,5,6,7,8,9,10,11,12]
dialogShowEc.value = true
}
const showTab = (val) => {
dataTab.title = val
dataTab.list1 = [1,2,3,4,5,6,7,8,9,10,11,122]
dataTab.year = [1,2,3,4,5,6,7,8,9,10,11,12]
dataTab.data = [
{
bc: 'G13214',
sfzd: 'A-B',
time: '2024-06-11'
},
{
bc: 'G13214',
sfzd: 'A-B',
time: '2024-06-11'
},
{
bc: 'G13214',
sfzd: 'A-B',
time: '2024-06-11'
}
]
dialogShowTab.value = true
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>