This commit is contained in:
lnn19986213
parent
55aed6b79f
commit
725f7ebfd8
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
352
src/view/sy.vue
352
src/view/sy.vue
|
|
@ -15,16 +15,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<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 class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,16 +29,13 @@
|
|||
<div class="item_title"><span class="blue">工伤</span>保险</div>
|
||||
<div class="item_content">
|
||||
<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 class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,16 +45,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<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 class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,16 +61,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<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 class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,16 +77,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<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 class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,7 +100,10 @@
|
|||
</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="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -140,35 +128,41 @@
|
|||
<div class="left_2_bottom_item">
|
||||
<div class="left_2_bottom_item_shang">
|
||||
<div class="left">
|
||||
<span class="span1">{{ jysyList[0].title }}</span
|
||||
>学校师生比
|
||||
<span class="span1">{{ jysyList[0].title }}</span>学校师生比
|
||||
</div>
|
||||
<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 class="left_2_bottom_item_xia">
|
||||
<div class="csbl" :style="cs"></div>
|
||||
<div
|
||||
class="csbl"
|
||||
:style="cs"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item">
|
||||
<div class="left_2_bottom_item_shang">
|
||||
<div class="left">
|
||||
<span class="span2">{{ jysyList[1].title }}</span
|
||||
>学校师生比
|
||||
<span class="span2">{{ jysyList[1].title }}</span>学校师生比
|
||||
</div>
|
||||
<div class="right">
|
||||
{{ jysyList[1].teacher }}:{{ jysyList[1].student }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item_xia">
|
||||
<div class="ncbl" :style="nc"></div>
|
||||
<div
|
||||
class="ncbl"
|
||||
:style="nc"
|
||||
></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="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -213,24 +207,47 @@
|
|||
/>
|
||||
<div class="people_total_item left">
|
||||
<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>
|
||||
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
|
||||
<img
|
||||
class="sexMove"
|
||||
src="../assets/images/sy/sexImg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<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="total">人口总数</div>
|
||||
</div>
|
||||
<div class="people_total_item right">
|
||||
<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>
|
||||
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
|
||||
<img
|
||||
class="sexMove"
|
||||
src="../assets/images/sy/sexImg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
|
||||
<ePie2
|
||||
style="margin-top: 20px"
|
||||
:list="data.ageRatio"
|
||||
></ePie2>
|
||||
<ePie
|
||||
style="margin-bottom: 20px"
|
||||
:list="data.ageGroup"
|
||||
></ePie>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
|
@ -260,13 +277,20 @@
|
|||
:header-cell-style="tableHeaderColor"
|
||||
v-if="choose == '1'"
|
||||
>
|
||||
<el-table-column prop="company" label="企业名称" width="200" />
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="企业名称"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="项目事项牵头单位"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column prop="finish" label="完成情况">
|
||||
<el-table-column
|
||||
prop="finish"
|
||||
label="完成情况"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div
|
||||
style="letter-spacing: 3px"
|
||||
|
|
@ -277,24 +301,35 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="qyfw" v-if="choose == '2'">
|
||||
<div
|
||||
class="qyfw"
|
||||
v-if="choose == '2'"
|
||||
>
|
||||
<div
|
||||
class="qyfw_item"
|
||||
v-for="(item, index) in qyfyList"
|
||||
: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="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">
|
||||
<span>{{ item.value }}</span
|
||||
>{{ item.dw }}
|
||||
<span>{{ item.value }}</span>{{ item.dw }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zwfw" v-if="choose == '3'">
|
||||
<div
|
||||
class="zwfw"
|
||||
v-if="choose == '3'"
|
||||
>
|
||||
<div class="shang">
|
||||
<div class="shang_item">
|
||||
<div class="title">一网通办事</div>
|
||||
|
|
@ -317,19 +352,31 @@
|
|||
</div>
|
||||
<div class="xia">
|
||||
<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="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>
|
||||
</div>
|
||||
<div class="fgx"></div>
|
||||
<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="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>
|
||||
</div>
|
||||
|
|
@ -357,7 +404,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="yd_title service">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -377,7 +427,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="yd_title last">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -402,7 +455,10 @@
|
|||
</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="animate-border">
|
||||
<i></i>
|
||||
|
|
@ -430,9 +486,16 @@
|
|||
</table> -->
|
||||
<div class="jtsyBox">
|
||||
<div class="jtsyBoxtop">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[0].img" alt="" />
|
||||
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
|
||||
<div class="jtsyBoxtop1" @click="showEc('公共自行车')">
|
||||
<img
|
||||
:src="data.jtsyList[0].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[0].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
|
@ -446,8 +509,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[1].img" alt="" />
|
||||
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[1].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[1].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
|
@ -462,9 +532,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxbot">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[2].img" alt="" />
|
||||
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
|
||||
<div class="jtsyBoxtop1" @click="showTab('公共汽车')">
|
||||
<img
|
||||
:src="data.jtsyList[2].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[2].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
|
@ -478,8 +555,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[3].img" alt="" />
|
||||
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[3].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[3].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
|
@ -493,8 +577,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[4].img" alt="" />
|
||||
<img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[4].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[4].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
|
@ -535,6 +626,28 @@
|
|||
</div>
|
||||
</template>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
@ -557,6 +670,8 @@ import ggjtimg3 from "../assets/images/sy/ggjt3.png";
|
|||
import ggjtimg4 from "../assets/images/sy/ggjt4.png";
|
||||
|
||||
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 http from "@/utils/request.js";
|
||||
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";
|
||||
// 详情弹框
|
||||
const dialogShow = ref(false);
|
||||
const dialogShowEc = ref(false);
|
||||
const dialogShowTab = ref(false);
|
||||
//表格列
|
||||
const columnss = reactive({
|
||||
就业培训: [
|
||||
|
|
@ -708,7 +825,36 @@ const showDialog = (title, url) => {
|
|||
|
||||
const close = () => {
|
||||
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({
|
||||
PopulationData: {
|
||||
|
|
@ -1040,15 +1186,13 @@ const jtsyList = ref([
|
|||
|
||||
// 县城学校师生比样式
|
||||
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;
|
||||
});
|
||||
// 农村学校师生比样式
|
||||
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;
|
||||
});
|
||||
|
|
@ -1246,6 +1390,38 @@ const qyfyList = reactive([
|
|||
onBeforeMount(async () => {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue