fix：首页页面
This commit is contained in:
parent
fe0d8f9b54
commit
8d356de312
@ -169,7 +169,8 @@ export default {
|
|||||||
|
|
||||||
i {
|
i {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.3rem;
|
font-size: 1.4rem;
|
||||||
|
line-height: 3.1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
440
src/views/index-components/daily-index.vue
Normal file
440
src/views/index-components/daily-index.vue
Normal file
@ -0,0 +1,440 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: SunTao 328867980@qq.com
|
||||||
|
* @Date: 2024-10-29 15:12:20
|
||||||
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
|
* @LastEditTime: 2024-10-30 13:10:04
|
||||||
|
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
|
||||||
|
* @Description: 首页-日常巡查
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">日常巡查</div>
|
||||||
|
<div class="daily-content">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-div">
|
||||||
|
<div class="name">巡查里程</div>
|
||||||
|
<div class="value"><span>15.16</span>km</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-div">
|
||||||
|
<div class="name">覆盖道路数</div>
|
||||||
|
<div class="value"><span>352</span>条</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-chart" ref="rateChart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div ref="trendChart"></div>
|
||||||
|
<div ref="distributionChart">图表2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
name: "DailyIndex",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 获取数据 */
|
||||||
|
getData() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawLeftChart();
|
||||||
|
this.drawTrendChart();
|
||||||
|
this.drawDistributionChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 绘制覆盖率饼图 */
|
||||||
|
drawLeftChart() {
|
||||||
|
if (this.$refs.rateChart) {
|
||||||
|
const chart = echarts.init(this.$refs.rateChart);
|
||||||
|
const current = 45;
|
||||||
|
chart.setOption({
|
||||||
|
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "80%",
|
||||||
|
x: "center",
|
||||||
|
y: "52%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#444",
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "覆盖率",
|
||||||
|
x: "center",
|
||||||
|
y: "10%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
polar: {
|
||||||
|
center: ["50%", "60%"],
|
||||||
|
radius: ["40%", "58%"],
|
||||||
|
},
|
||||||
|
angleAxis: {
|
||||||
|
max: 100,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
radiusAxis: {
|
||||||
|
type: "category",
|
||||||
|
show: true,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [80],
|
||||||
|
name: "",
|
||||||
|
type: "bar",
|
||||||
|
roundCap: true,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "#BDD5F4",
|
||||||
|
},
|
||||||
|
coordinateSystem: "polar",
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#005DCF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#00CCFF",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 绘制病害趋势柱状图 */
|
||||||
|
drawTrendChart() {
|
||||||
|
if (this.$refs.trendChart) {
|
||||||
|
const chart = echarts.init(this.$refs.trendChart);
|
||||||
|
chart.setOption({
|
||||||
|
color: ["#388BD8", "#FFC400"],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "巡查里程-病害趋势",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||||
|
axisTick: {
|
||||||
|
show: false, //隐藏X轴刻度
|
||||||
|
},
|
||||||
|
axisLabel: { color: "#A2B0B8" },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3C6579",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#A2B0B8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// "formatter": "{value} T/h"
|
||||||
|
// formatter: "{value}",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#A2B0B8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// "formatter": "{value} T/W㎡"
|
||||||
|
// formatter: "{value}",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
name: "架梁完成量",
|
||||||
|
data: [400, 600, 1400, 1700],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
symbolSize: 5,
|
||||||
|
name: "墩身完成率",
|
||||||
|
smooth: 1,
|
||||||
|
data: [10, 40, 50, 90],
|
||||||
|
yAxisIndex: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 绘制病害分布柱状图 */
|
||||||
|
drawDistributionChart() {
|
||||||
|
const xData = [
|
||||||
|
{ name: "1月", value: 10 },
|
||||||
|
{ name: "2月", value: 12 },
|
||||||
|
{ name: "3月", value: 10 },
|
||||||
|
{ name: "4月", value: 30 },
|
||||||
|
{ name: "5月", value: 20 },
|
||||||
|
{ name: "6月", value: 50 },
|
||||||
|
{ name: "7月", value: 30 },
|
||||||
|
{ name: "8月", value: 40 },
|
||||||
|
{ name: "9月", value: 40 },
|
||||||
|
{ name: "10月", value: 15 },
|
||||||
|
].map((item) => {
|
||||||
|
return item.name;
|
||||||
|
});
|
||||||
|
const yData = [
|
||||||
|
{ name: "1月", value: 10 },
|
||||||
|
{ name: "2月", value: 12 },
|
||||||
|
{ name: "3月", value: 10 },
|
||||||
|
{ name: "4月", value: 30 },
|
||||||
|
{ name: "5月", value: 20 },
|
||||||
|
{ name: "6月", value: 50 },
|
||||||
|
{ name: "7月", value: 30 },
|
||||||
|
{ name: "8月", value: 40 },
|
||||||
|
{ name: "9月", value: 40 },
|
||||||
|
{ name: "10月", value: 15 },
|
||||||
|
].map((item, index) => {
|
||||||
|
if (index % 2 == 0) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: [3, 3, 0, 0],
|
||||||
|
color: "#388BD8",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: [3, 3, 0, 0],
|
||||||
|
color: "#38C8D8",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
if (this.$refs.distributionChart) {
|
||||||
|
const chart = echarts.init(this.$refs.distributionChart);
|
||||||
|
chart.setOption({
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "道路新增病害分布",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
padding: [5, 10, 5, 10],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "7%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "12%",
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
data: xData,
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false, //隐藏X轴刻度
|
||||||
|
},
|
||||||
|
axisLabel: { color: "#A2B0B8" },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3C6579",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#9eaaba",
|
||||||
|
},
|
||||||
|
axisLine: { show: false },
|
||||||
|
splitLine: { show: true },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "新增病害数",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(105,160,231,0.1)",
|
||||||
|
},
|
||||||
|
data: yData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
padding-left: 3rem;
|
||||||
|
font-family: "DouYu";
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.left-div {
|
||||||
|
height: 27.5%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px red solid;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
line-height: 2rem;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-chart {
|
||||||
|
height: 45%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3rem;
|
||||||
|
border: 1px red solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 78%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px red solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
470
src/views/index-components/disease-index.vue
Normal file
470
src/views/index-components/disease-index.vue
Normal file
@ -0,0 +1,470 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: SunTao 328867980@qq.com
|
||||||
|
* @Date: 2024-10-29 15:17:58
|
||||||
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
|
* @LastEditTime: 2024-10-30 13:55:08
|
||||||
|
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
|
||||||
|
* @Description: 首页-病害识别
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">病害识别</div>
|
||||||
|
<div class="disease-content">
|
||||||
|
<div class="left">
|
||||||
|
<div>
|
||||||
|
<div class="name">病害识别总数</div>
|
||||||
|
<div class="value"><span>57875</span>个</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="name">新增病害数</div>
|
||||||
|
<div class="value"><span>57875</span>个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div ref="statisticsChart"></div>
|
||||||
|
<div>
|
||||||
|
<el-select
|
||||||
|
v-model="diseaseType"
|
||||||
|
@change="getChartData"
|
||||||
|
placeholder="请选择"
|
||||||
|
size="mini"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in diseaseOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<div class="distribution-div" ref="distributionChart"></div>
|
||||||
|
<div class="distribution-legnd">
|
||||||
|
<fssm-scroll>
|
||||||
|
<div
|
||||||
|
class="legnd-div"
|
||||||
|
v-for="(item, index) in distributionList"
|
||||||
|
:key="`distribution-${index}`"
|
||||||
|
>
|
||||||
|
<div class="name">
|
||||||
|
<span
|
||||||
|
class="index"
|
||||||
|
:style="{ backgroundColor: distributionColor[index] }"
|
||||||
|
></span>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="rate">{{ item.rate }}</div>
|
||||||
|
</div>
|
||||||
|
</fssm-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
name: "DiseaseIndex",
|
||||||
|
components: {
|
||||||
|
FssmScroll,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 下拉框数据绑定
|
||||||
|
diseaseType: "",
|
||||||
|
// 下拉框数据
|
||||||
|
diseaseOptions: [],
|
||||||
|
// 病害类型颜色盘
|
||||||
|
distributionColor: [
|
||||||
|
"#3678FF",
|
||||||
|
"#F8A74E",
|
||||||
|
"#04DAD7",
|
||||||
|
"#00D669",
|
||||||
|
"#8448FF",
|
||||||
|
"#F6D566",
|
||||||
|
"#00B1FF",
|
||||||
|
"#62CFFF",
|
||||||
|
"#6A9BFF",
|
||||||
|
"#B38EFF",
|
||||||
|
],
|
||||||
|
// 病害类型分布数据
|
||||||
|
distributionList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getOptions();
|
||||||
|
this.getChartData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 获取病害类别下拉 */
|
||||||
|
getOptions() {
|
||||||
|
this.diseaseOptions = [
|
||||||
|
{
|
||||||
|
value: "选项1",
|
||||||
|
label: "黄金糕",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "选项2",
|
||||||
|
label: "双皮奶",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "选项3",
|
||||||
|
label: "蚵仔煎",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "选项4",
|
||||||
|
label: "龙须面",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "选项5",
|
||||||
|
label: "北京烤鸭",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
/* 获取echart图数据 */
|
||||||
|
getChartData() {
|
||||||
|
this.distributionList = [
|
||||||
|
{
|
||||||
|
value: 15461,
|
||||||
|
name: "一类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
name: "二类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 6546,
|
||||||
|
name: "三类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2718,
|
||||||
|
name: "四类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1704,
|
||||||
|
name: "五类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
name: "二类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 6546,
|
||||||
|
name: "三类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2718,
|
||||||
|
name: "四类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1704,
|
||||||
|
name: "五类",
|
||||||
|
rate: "10%",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawStatisticsChart();
|
||||||
|
this.drawDistributionChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 绘制新增病害统计echart图 */
|
||||||
|
drawStatisticsChart() {
|
||||||
|
if (this.$refs.statisticsChart) {
|
||||||
|
const chart = echarts.init(this.$refs.statisticsChart);
|
||||||
|
chart.setOption({
|
||||||
|
color: ["#388BD8", "#FFC400"],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "新增病害统计",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||||
|
axisTick: {
|
||||||
|
show: false, //隐藏X轴刻度
|
||||||
|
},
|
||||||
|
axisLabel: { color: "#A2B0B8" },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3C6579",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#A2B0B8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// "formatter": "{value} T/h"
|
||||||
|
// formatter: "{value}",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "新增病害数",
|
||||||
|
type: "line",
|
||||||
|
symbolSize: 5,
|
||||||
|
smooth: 1,
|
||||||
|
data: [400, 600, 1400, 1700],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 绘制病害类型分布图 */
|
||||||
|
drawDistributionChart() {
|
||||||
|
if (this.$refs.distributionChart) {
|
||||||
|
const chart = echarts.init(this.$refs.distributionChart);
|
||||||
|
chart.setOption({
|
||||||
|
color: this.distributionColor,
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "新增病害类型分布",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
// hoverAnimation: true,
|
||||||
|
minAngle: 1,
|
||||||
|
padAngle: 4,
|
||||||
|
hoverOffset: 0,
|
||||||
|
startAngle: 0, //起始角度
|
||||||
|
clockwise: false, //是否顺时针
|
||||||
|
radius: ["55%", "70%"],
|
||||||
|
center: ["50%", "56%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
animationDuration: 3000,
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
|
||||||
|
show: true,
|
||||||
|
fontSize: "30",
|
||||||
|
fontWeight: "bold",
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 40,
|
||||||
|
lineHeight: 50,
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: "#000",
|
||||||
|
fontSize: 30,
|
||||||
|
lineHeight: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
color: "rgba(13, 17, 29,0)",
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: this.distributionList,
|
||||||
|
zlevel: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["35%", "55%"],
|
||||||
|
center: ["50%", "56%"],
|
||||||
|
// hoverAnimation: true,
|
||||||
|
hoverOffset: 0,
|
||||||
|
startAngle: 0, //起始角度
|
||||||
|
clockwise: false, //是否顺时针
|
||||||
|
padAngle: 4,
|
||||||
|
minAngle: 1,
|
||||||
|
animationDuration: 3000,
|
||||||
|
emphasis: { scale: false },
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "#E4EDFD",
|
||||||
|
},
|
||||||
|
data: this.distributionList,
|
||||||
|
z: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
padding-left: 3rem;
|
||||||
|
font-family: "DouYu";
|
||||||
|
}
|
||||||
|
|
||||||
|
.disease-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px red solid;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
line-height: 4rem;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 78%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
width: 8rem;
|
||||||
|
position: absolute;
|
||||||
|
right: 2%;
|
||||||
|
top: 5%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
height: 50%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
border: 1px red solid;
|
||||||
|
|
||||||
|
.distribution-div {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.distribution-legnd {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 2.6rem 2rem 2rem 2rem;
|
||||||
|
|
||||||
|
.scroll-box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legnd-div {
|
||||||
|
width: 47%;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
margin: 0.2rem 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.index {
|
||||||
|
width: 0.7rem;
|
||||||
|
height: 0.7rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
248
src/views/index-components/road-index.vue
Normal file
248
src/views/index-components/road-index.vue
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: SunTao 328867980@qq.com
|
||||||
|
* @Date: 2024-10-29 15:23:44
|
||||||
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
|
* @LastEditTime: 2024-10-30 14:15:44
|
||||||
|
* @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
|
||||||
|
* @Description: 首页-公路资产
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">公路资产</div>
|
||||||
|
<div class="top-div">
|
||||||
|
<a>累计公路资产总数</a>
|
||||||
|
<span v-for="(item, index) in roadNum" :key="`top-span-${index}`">{{
|
||||||
|
item
|
||||||
|
}}</span
|
||||||
|
>个
|
||||||
|
</div>
|
||||||
|
<div class="middle-div">
|
||||||
|
<div
|
||||||
|
class="middle-item"
|
||||||
|
:class="`middle-item-${index}`"
|
||||||
|
v-for="(item, index) in middleList"
|
||||||
|
:key="`middle-item-${index}`"
|
||||||
|
>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
<span>{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="road-chart" ref="roadChart"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
name: "RoadIndex",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 累计公路资产总数
|
||||||
|
roadNum: [],
|
||||||
|
// 中间循环数据
|
||||||
|
middleList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 获取数据 */
|
||||||
|
getData() {
|
||||||
|
this.roadNum = ["0", "0", "6", "7"];
|
||||||
|
this.middleList = [
|
||||||
|
{ name: "信号灯", value: 5002 },
|
||||||
|
{ name: "路锥", value: 5002 },
|
||||||
|
{ name: "警示杆", value: 5002 },
|
||||||
|
{ name: "防撞桶", value: 5002 },
|
||||||
|
{ name: "斑马线", value: 5002 },
|
||||||
|
{ name: "里程碑", value: 5002 },
|
||||||
|
{ name: "交通杆件", value: 5002 },
|
||||||
|
{ name: "龙门架", value: 5002 },
|
||||||
|
];
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawRoadChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 绘制echart图 */
|
||||||
|
drawRoadChart() {
|
||||||
|
if (this.$refs.roadChart) {
|
||||||
|
const chart = echarts.init(this.$refs.roadChart);
|
||||||
|
chart.setOption({
|
||||||
|
color: ["#388BD8", "#04DAD7"],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "常数统计",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||||
|
axisTick: {
|
||||||
|
show: false, //隐藏X轴刻度
|
||||||
|
},
|
||||||
|
axisLabel: { color: "#A2B0B8" },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3C6579",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#A2B0B8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// "formatter": "{value} T/h"
|
||||||
|
// formatter: "{value}",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "路产总数",
|
||||||
|
type: "line",
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#388BD8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: [400, 600, 1400, 1700],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "异常设施数量",
|
||||||
|
type: "line",
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#04DAD7",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: [40, 500, 1500, 700],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
padding-left: 3rem;
|
||||||
|
font-family: "DouYu";
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-div {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
font-family: "DouYu";
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 1.2rem;
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 3px 3px 3px 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-div {
|
||||||
|
width: 100%;
|
||||||
|
height: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: flex-end;
|
||||||
|
border: 1px solid red;
|
||||||
|
|
||||||
|
.middle-item {
|
||||||
|
width: 21%;
|
||||||
|
height: 40%;
|
||||||
|
padding: 0 0.5rem 0 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #f2f9fe;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.road-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
246
src/views/index-components/traffic-index.vue
Normal file
246
src/views/index-components/traffic-index.vue
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: SunTao 328867980@qq.com
|
||||||
|
* @Date: 2024-10-29 15:30:35
|
||||||
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
|
* @LastEditTime: 2024-10-30 14:42:47
|
||||||
|
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
|
||||||
|
* @Description: 首页-路况评定
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">路况评定</div>
|
||||||
|
<div class="traffic-table">
|
||||||
|
<el-table :data="trafficTableData" style="width: 100%" height="180">
|
||||||
|
<el-table-column type="index" label="序号"></el-table-column>
|
||||||
|
<el-table-column prop="date" label="日期" width="180">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="姓名" width="180">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="address" label="地址"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="traffic-chart" ref="trafficChart"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
name: "TrafficIndex",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 路况表格数据
|
||||||
|
trafficTableData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 获取表格数据 */
|
||||||
|
getTableData() {
|
||||||
|
this.trafficTableData = [
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1517 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1519 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1517 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1519 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1517 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1519 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawTrafficChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 绘制柱状图 */
|
||||||
|
drawTrafficChart() {
|
||||||
|
if (this.$refs.trafficChart) {
|
||||||
|
const chart = echarts.init(this.$refs.trafficChart);
|
||||||
|
chart.setOption({
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
title: [
|
||||||
|
// 中心比例
|
||||||
|
{
|
||||||
|
text: "道路新增病害分布",
|
||||||
|
x: "1%",
|
||||||
|
y: "1%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
right:"3%"
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
padding: [5, 10, 5, 10],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "20%",
|
||||||
|
left: "7%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "12%",
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false, //隐藏X轴刻度
|
||||||
|
},
|
||||||
|
axisLabel: { color: "#A2B0B8" },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3C6579",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#9eaaba",
|
||||||
|
},
|
||||||
|
axisLine: { show: false },
|
||||||
|
splitLine: { show: true },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "路产总数",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: [3, 3, 0, 0],
|
||||||
|
color: "#388BD8",
|
||||||
|
},
|
||||||
|
data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "异常设施数量",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 20,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: [3, 3, 0, 0],
|
||||||
|
color: "#38C8D8",
|
||||||
|
},
|
||||||
|
data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
padding-left: 3rem;
|
||||||
|
font-family: "DouYu";
|
||||||
|
}
|
||||||
|
|
||||||
|
.traffic-table {
|
||||||
|
width: 100%;
|
||||||
|
height: 45%;
|
||||||
|
|
||||||
|
::v-deep .el-table tr {
|
||||||
|
background-color: #f6f7fa;
|
||||||
|
}
|
||||||
|
::v-deep .el-table .el-table__header-wrapper th,
|
||||||
|
.el-table .el-table__fixed-header-wrapper th {
|
||||||
|
background-color: #f6f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.traffic-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-08 09:26:24
|
* @Date: 2024-10-08 09:26:24
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
* @LastEditTime: 2024-10-29 13:07:17
|
* @LastEditTime: 2024-10-29 15:30:19
|
||||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||||
* @Description: 系统首页
|
* @Description: 系统首页
|
||||||
-->
|
-->
|
||||||
@ -24,22 +24,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-content">
|
<div class="middle-content">
|
||||||
<div>日常巡查</div>
|
<div class="daily-content">
|
||||||
<div>病害识别</div>
|
<daily-index></daily-index>
|
||||||
|
</div>
|
||||||
|
<div class="disease-content">
|
||||||
|
<disease-index></disease-index>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-content">
|
<div class="bottom-content">
|
||||||
<div>公路资产</div>
|
<div class="road-content">
|
||||||
<div>路况评定</div>
|
<road-index></road-index>
|
||||||
|
</div>
|
||||||
|
<div class="traffic-content">
|
||||||
|
<traffic-index></traffic-index>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fssm-scroll>
|
</fssm-scroll>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||||
|
import DailyIndex from "./index-components/daily-index.vue";
|
||||||
|
import DiseaseIndex from "./index-components/disease-index.vue";
|
||||||
|
import RoadIndex from "./index-components/road-index.vue";
|
||||||
|
import TrafficIndex from "./index-components/traffic-index.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "Index",
|
name: "Index",
|
||||||
components: {
|
components: {
|
||||||
FssmScroll,
|
FssmScroll,
|
||||||
|
DailyIndex,
|
||||||
|
DiseaseIndex,
|
||||||
|
RoadIndex,
|
||||||
|
TrafficIndex,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -91,7 +107,7 @@ export default {
|
|||||||
.value {
|
.value {
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
|
|
||||||
span{
|
span {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -101,11 +117,33 @@ export default {
|
|||||||
.middle-content {
|
.middle-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px red solid;
|
||||||
|
|
||||||
|
.daily-content,
|
||||||
|
.disease-content {
|
||||||
|
width: 49.5%;
|
||||||
|
height: calc(100% - 1rem);
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px blue solid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-content {
|
.bottom-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px red solid;
|
||||||
|
|
||||||
|
.road-content,
|
||||||
|
.traffic-content {
|
||||||
|
width: 49.5%;
|
||||||
|
height: calc(100% - 1rem);
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px blue solid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user