SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改适配

Browse Source
This commit is contained in:
SunTao 2024-12-10 12:59:10 +08:00
parent e0834dd5eb
commit a37af6a573
19 changed files with 206 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/screen/index/旅游标志.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

11
src/layout/components/Navbar.vue
View File

@ -16,7 +16,7 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device !== 'mobile'"> <template v-if="device !== 'mobile'">
<div class="menu-return"> <div class="menu-return right-menu-item">
<i class="el-icon-data-analysis" @click="goBigScreen"></i> <i class="el-icon-data-analysis" @click="goBigScreen"></i>
</div> </div>
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
@ -95,8 +95,8 @@ export default {
}, },
methods: { methods: {
/* 点击跳转大屏页面 */ /* 点击跳转大屏页面 */
goBigScreen(){ goBigScreen() {
this.$router.push("/screen") this.$router.push("/screen");
}, },
toggleSideBar() { toggleSideBar() {
this.$store.dispatch("app/toggleSideBar"); this.$store.dispatch("app/toggleSideBar");
@ -165,12 +165,11 @@ export default {
.menu-return { .menu-return {
height: 100%; height: 100%;
margin-right: 0.5rem; padding: 0 8px;
i { i {
cursor: pointer; cursor: pointer;
font-size: 1.4rem; font-size: 18px;
line-height: 3.1rem;
font-weight: bold; font-weight: bold;
} }
} }

4
src/views/big-screen/components/img-dialog.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-22 15:30:25 * @Date: 2024-10-22 15:30:25
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 10:29:47 * @LastEditTime: 2024-12-10 11:45:44
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
* @Description: 大屏查看图片弹窗 * @Description: 大屏查看图片弹窗
--> -->
@ -46,7 +46,7 @@
ref="imgForm" ref="imgForm"
size="small" size="small"
:inline="true" :inline="true"
label-width="5rem" label-width="6rem"
> >
<el-form-item label="路段名称"> <el-form-item label="路段名称">
<el-select <el-select

236
src/views/big-screen/disease-components/traffic-log.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 11:56:02 * @Date: 2024-11-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 09:25:57 * @LastEditTime: 2024-12-10 11:28:03
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
* @Description: 病害巡检-病害日志 * @Description: 病害巡检-病害日志
--> -->
@ -10,118 +10,124 @@
<div class="content"> <div class="content">
<!-- 搜索表单 --> <!-- 搜索表单 -->
<div class="traffic-form"> <div class="traffic-form">
<el-form <fssm-scroll>
:model="trafficForm" <el-form
ref="trafficForm" :model="trafficForm"
size="small" ref="trafficForm"
:inline="true" size="small"
label-position="left" :inline="true"
label-width="5rem" label-position="left"
> label-width="6rem"
<el-form-item class="form-item" label="路线名称" prop="routeId"> >
<el-select <el-form-item class="form-item" label="路线名称" prop="routeId">
v-model="trafficForm.routeId" <el-select
:popper-append-to-body="false" v-model="trafficForm.routeId"
placeholder="请选择路线" :popper-append-to-body="false"
filterable placeholder="请选择路线"
clearable filterable
@change="chengeLine" clearable
@change="chengeLine"
>
<el-option
v-for="item in lineList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item class="form-item" label="路段名称" prop="segmentId">
<el-select
v-model="trafficForm.segmentId"
:popper-append-to-body="false"
placeholder="请选择路段"
filterable
clearable
>
<el-option
v-for="item in segmentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
class="form-item"
label="上下行"
prop="inspectDirection"
> >
<el-option <el-select
v-for="item in lineList" v-model="trafficForm.inspectDirection"
:key="item.value" :popper-append-to-body="false"
:label="item.label" placeholder="请选择上下行"
:value="item.value" clearable
>
<el-option label="上行" value="0" />
<el-option label="下行" value="1" />
</el-select>
</el-form-item>
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
<el-input
v-model="trafficForm.stakeStart"
placeholder="格式K0000+000"
style="width: 8.5rem"
clearable
/> />
</el-select> <span style="margin: 0 5px; color: #ffffff">-</span>
</el-form-item> <el-input
<el-form-item class="form-item" label="路段名称" prop="segmentId"> v-model="trafficForm.stakeEnd"
<el-select placeholder="格式K0000+000"
v-model="trafficForm.segmentId" style="width: 8.5rem"
:popper-append-to-body="false" clearable
placeholder="请选择路段"
filterable
clearable
>
<el-option
v-for="item in segmentList"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-select> </el-form-item>
</el-form-item> <el-form-item class="form-item" label="时间筛选" prop="dateTime">
<el-form-item class="form-item" label="上下行" prop="inspectDirection"> <el-date-picker
<el-select v-model="dateTime"
v-model="trafficForm.inspectDirection" type="daterange"
:popper-append-to-body="false" range-separator="至"
placeholder="请选择上下行" start-placeholder="开始日期"
clearable end-placeholder="结束日期"
> format="yyyy-MM-dd"
<el-option label="上行" value="0" /> value-format="yyyy-MM-dd"
<el-option label="下行" value="1" /> clearable
</el-select> popper-class="traffic-log-date-time"
</el-form-item> >
<el-form-item class="form-item" label="公里桩" prop="stakeRange"> </el-date-picker>
<el-input </el-form-item>
v-model="trafficForm.stakeStart" <el-form-item class="form-item" label="病害类型" prop="defectType">
placeholder="格式K0000+000" <el-select
style="width: 10rem" v-model="trafficForm.defectType"
clearable :popper-append-to-body="false"
/> placeholder="请选择病害类型"
<span style="margin: 0 5px; color: #ffffff">-</span> clearable
<el-input >
v-model="trafficForm.stakeEnd" <el-option
placeholder="格式K0000+000" v-for="item in eventType"
style="width: 9.5rem" :key="item.value"
clearable :label="item.label"
/> :value="item.value"
</el-form-item> />
<el-form-item class="form-item" label="时间筛选" prop="dateTime"> </el-select>
<el-date-picker </el-form-item>
v-model="dateTime" <el-form-item class="form-item" label="病害状态" prop="state">
type="daterange" <el-select
range-separator="至" v-model="trafficForm.state"
start-placeholder="开始日期" :popper-append-to-body="false"
end-placeholder="结束日期" placeholder="请选择病害状态"
format="yyyy-MM-dd" clearable
value-format="yyyy-MM-dd" >
clearable <el-option
popper-class="traffic-log-date-time" v-for="item in defectStatus"
> :key="item.value"
</el-date-picker> :label="item.label"
</el-form-item> :value="item.value"
<el-form-item class="form-item" label="病害类型" prop="defectType"> />
<el-select </el-select>
v-model="trafficForm.defectType" </el-form-item>
:popper-append-to-body="false" </el-form>
placeholder="请选择病害类型" </fssm-scroll>
clearable
>
<el-option
v-for="item in eventType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item class="form-item" label="病害状态" prop="state">
<el-select
v-model="trafficForm.state"
:popper-append-to-body="false"
placeholder="请选择病害状态"
clearable
>
<el-option
v-for="item in defectStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</div> </div>
<div class="form-btn"> <div class="form-btn">
<el-button class="btn-submit" size="mini" @click="handleQuery" <el-button class="btn-submit" size="mini" @click="handleQuery"
@ -153,7 +159,7 @@
{{ scope.row.state === "2" ? "已修复" : "未修复" }} {{ scope.row.state === "2" ? "已修复" : "未修复" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="pci" label="操作"> <el-table-column width="50" prop="pci" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
slot="reference" slot="reference"
@ -186,8 +192,10 @@
<script> <script>
import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen"; import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
import { getSegment, getDefectDropDown } from "@/api/xj/screen/index"; import { getSegment, getDefectDropDown } from "@/api/xj/screen/index";
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
export default { export default {
name: "TrafficLog", name: "TrafficLog",
components: { fssmScroll },
props: { props: {
// 病害巡检中4种类型点击绑定 // 病害巡检中4种类型点击绑定
bottomTipClick: { bottomTipClick: {
@ -425,6 +433,7 @@ export default {
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
.traffic-form { .traffic-form {
width: calc(100% - 0.5rem); width: calc(100% - 0.5rem);
@ -432,10 +441,11 @@ export default {
padding: 0.5rem; padding: 0.5rem;
.form-item { .form-item {
width: 100%; width: calc(100% - 1rem);
margin-bottom: 15px;
::v-deep .el-form-item__content { ::v-deep .el-form-item__content {
width: calc(100% - 5rem); width: calc(100% - 6rem);
.el-select, .el-select,
.el-date-editor { .el-date-editor {

4
src/views/big-screen/disease-components/traffic-safety.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 09:59:32 * @Date: 2024-10-21 09:59:32
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 11:39:11 * @LastEditTime: 2024-12-10 10:52:10
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
* @Description: 病害巡检大屏-今日巡查 * @Description: 病害巡检大屏-今日巡查
--> -->
@ -713,7 +713,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: "DouYu"; font-family: "DouYu";
font-size: 0.9rem; font-size: 1rem;
.up { .up {
color: #ff2e2e; color: #ff2e2e;

6
src/views/big-screen/disease-components/traffic-statistic.vue
View File

@ -170,7 +170,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: "1rem", fontSize: 12,
color: "#808C9F", color: "#808C9F",
}, },
}, },
@ -182,7 +182,7 @@ export default {
top: "50%", top: "50%",
textStyle: { textStyle: {
fontFamily: "DinBm", fontFamily: "DinBm",
fontSize: "1rem", fontSize: 15,
color: "#ffffff", color: "#ffffff",
}, },
}, },
@ -192,7 +192,7 @@ export default {
top: "40%", top: "40%",
textStyle: { textStyle: {
fontFamily: "DouYu", fontFamily: "DouYu",
fontSize: "1.2rem", fontSize:15,
color: "rgba(255, 183, 89, 0.8)", color: "rgba(255, 183, 89, 0.8)",
}, },
}, },

24
src/views/big-screen/disease-components/traffic-trend.vue
View File

@ -10,8 +10,17 @@
<template> <template>
<div class="content"> <div class="content">
<div class="traffic-select"> <div class="traffic-select">
<el-select :popper-append-to-body="false" v-model="itemSelect" placeholder="请选择"> <el-select
<el-option v-for="item in trafficList" :key="item.value" :label="item.label" :value="item.value" /> :popper-append-to-body="false"
v-model="itemSelect"
placeholder="请选择"
>
<el-option
v-for="item in trafficList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div ref="trafficChart" class="traffic-echart"></div> <div ref="trafficChart" class="traffic-echart"></div>
@ -166,7 +175,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: "0.8rem", fontSize: 12,
color: "#808C9F", color: "#808C9F",
}, },
}, },
@ -184,7 +193,7 @@ export default {
data: xData, data: xData,
axisLabel: { axisLabel: {
color: "#808C9F", color: "#808C9F",
fontSize: "0.8rem", fontSize: 12,
interval: 0, interval: 0,
}, },
axisLine: { axisLine: {
@ -223,7 +232,7 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
color: "#808C9F", color: "#808C9F",
fontSize: "0.8rem", fontSize: 12,
}, },
}, },
], ],
@ -246,7 +255,7 @@ export default {
formatter: "{c}", formatter: "{c}",
position: "top", position: "top",
color: "#fff", color: "#fff",
fontSize: "0.8rem", fontSize: 14,
}, },
data: yData, data: yData,
}, },
@ -266,7 +275,8 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息 // 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false, showDetail: false,
// 数据窗口范围的起始数值 // 数据窗口范围的起始数值
startValue: this.echartData.length > 6 ? this.echartData.length - 6 : 0, startValue:
this.echartData.length > 6 ? this.echartData.length - 6 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据） // 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.echartData.length, endValue: this.echartData.length,
// empty：当前数据窗口外的数据，被设置为空。 // empty：当前数据窗口外的数据，被设置为空。

2
src/views/big-screen/index.vue
View File

@ -1519,6 +1519,7 @@ export default {
.map-image-select { .map-image-select {
left: 28%; left: 28%;
top: 10%; top: 10%;
font-size: 1rem;
position: absolute; position: absolute;
color: #ffffff; color: #ffffff;
} }
@ -1603,6 +1604,7 @@ export default {
.header-time { .header-time {
display: flex; display: flex;
color: #89c5e8; color: #89c5e8;
font-size: 1rem;
> div { > div {
margin: 0 0.5rem; margin: 0 0.5rem;

4
src/views/big-screen/overview-components/disease-current.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56 * @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 17:38:03 * @LastEditTime: 2024-12-10 11:42:43
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图 * @Description: 总览大屏-病害三维饼图
--> -->
@ -198,7 +198,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: "0.8rem", fontSize: 12,
color: "#ffffff", color: "#ffffff",
}, },
formatter: (params) => { formatter: (params) => {

10
src/views/big-screen/overview-components/disease-trends.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30 * @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 17:39:15 * @LastEditTime: 2024-12-10 11:42:05
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势 * @Description: 总览大屏-病害趋势
--> -->
@ -57,7 +57,7 @@ export default {
text: "", text: "",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: "0.8rem", fontSize: 12,
}, },
}, },
legend: { legend: {
@ -84,7 +84,7 @@ export default {
backgroundColor: "rgba(9, 24, 48, 0.5)", backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)", borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: { textStyle: {
fontSize: "0.8rem", fontSize: 12,
color: "#808C9F", color: "#808C9F",
}, },
confine: true, confine: true,
@ -103,7 +103,7 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
color: "#808C9F", color: "#808C9F",
fontSize: "0.8rem", fontSize: 12,
}, },
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始 boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
data: xData, data: xData,
@ -118,7 +118,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#808C9F", color: "#808C9F",
fontSize: "0.8rem", fontSize: 14,
formatter: function (value) { formatter: function (value) {
return value + ""; return value + "";
}, },

15
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18 * @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 17:44:25 * @LastEditTime: 2024-12-10 11:05:40
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆 * @Description: 总览大屏-巡检车辆
--> -->
@ -42,16 +42,18 @@
style="width: 100%; background: none" style="width: 100%; background: none"
height="80%" height="80%"
> >
<el-table-column prop="plateNo" label="车牌号码"> </el-table-column> <el-table-column prop="plateNo" show-overflow-tooltip label="车牌号码">
<el-table-column width="60" prop="status" label="状态">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
width="50"
show-overflow-tooltip show-overflow-tooltip
prop="companyName" prop="status"
label="所属" label="状态"
> >
</el-table-column> </el-table-column>
<el-table-column width="130" prop="pci" label="操作"> <el-table-column show-overflow-tooltip prop="companyName" label="所属">
</el-table-column>
<el-table-column width="120" prop="pci" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover <el-popover
popper-class="scope-popover" popper-class="scope-popover"
@ -304,6 +306,7 @@ export default {
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
color: #ffffff; color: #ffffff;
.inspection-top { .inspection-top {

1
src/views/big-screen/overview-components/today-inspection.vue
View File

@ -664,6 +664,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: "DouYu"; font-family: "DouYu";
font-size: 1rem;
.up { .up {
color: #ff2e2e; color: #ff2e2e;

7
src/views/big-screen/road-components/anomaly-facilities.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:21:24 * @Date: 2024-10-18 15:21:24
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-31 14:24:19 * @LastEditTime: 2024-12-10 11:39:57
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
* @Description: 附属设施异常统计 * @Description: 附属设施异常统计
--> -->
@ -255,7 +255,7 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息 // 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false, showDetail: false,
// 数据窗口范围的起始数值 // 数据窗口范围的起始数值
startValue: this.anomalyData.length > 10 ? this.anomalyData.length - 10 : 0, startValue: this.anomalyData.length > 8 ? this.anomalyData.length - 8 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据） // 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.anomalyData.length, endValue: this.anomalyData.length,
// empty：当前数据窗口外的数据，被设置为空。 // empty：当前数据窗口外的数据，被设置为空。
@ -299,6 +299,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden;
.anomaly-select { .anomaly-select {
position: absolute; position: absolute;
@ -313,4 +314,4 @@ export default {
height: 100%; height: 100%;
} }
} }
</style> </style>

6
src/views/big-screen/road-components/road-statistic.vue
View File

@ -66,7 +66,7 @@
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import { roadStatisticList } from "@/api/xj/screen/road-screen"; import { roadStatisticList } from "@/api/xj/screen/road-screen";
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
@ -128,7 +128,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
width: 100%; width: 100%;
@ -143,6 +143,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 1rem;
> div { > div {
display: flex; display: flex;
@ -252,4 +253,3 @@ export default {
} }
} }
</style> </style>

9
src/views/index-components/daily-index.vue
View File

@ -22,13 +22,15 @@
<div class="left-div"> <div class="left-div">
<div class="name">巡查里程</div> <div class="name">巡查里程</div>
<div class="value"> <div class="value">
<span>{{ formatNumber(mileage) }}</span>km <span>{{ formatNumber(mileage) }}</span
>km
</div> </div>
</div> </div>
<div class="left-div"> <div class="left-div">
<div class="name">覆盖道路数</div> <div class="name">覆盖道路数</div>
<div class="value"> <div class="value">
<span>{{ roadNum }}</span>条 <span>{{ roadNum }}</span
>条
</div> </div>
</div> </div>
<!-- <div class="left-chart" ref="rateChart"></div> --> <!-- <div class="left-chart" ref="rateChart"></div> -->
@ -446,6 +448,7 @@ export default {
background: url("../../assets/index/div-title.png") no-repeat; background: url("../../assets/index/div-title.png") no-repeat;
background-size: 5%; background-size: 5%;
background-position: 0 30%; background-position: 0 30%;
font-size: 1.2rem;
span { span {
font-family: "DouYu"; font-family: "DouYu";
@ -505,7 +508,7 @@ export default {
width: 78%; width: 78%;
height: 100%; height: 100%;
>div { > div {
height: 50%; height: 50%;
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;

4
src/views/index-components/disease-index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:17:58 * @Date: 2024-10-29 15:17:58
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 16:35:11 * @LastEditTime: 2024-12-10 11:58:18
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
* @Description: 首页-病害识别 * @Description: 首页-病害识别
--> -->
@ -411,6 +411,7 @@ export default {
background: url("../../assets/index/div-title.png") no-repeat; background: url("../../assets/index/div-title.png") no-repeat;
background-size: 5%; background-size: 5%;
background-position: 0 30%; background-position: 0 30%;
font-size: 1.2rem;
span { span {
font-family: "DouYu"; font-family: "DouYu";
@ -504,6 +505,7 @@ export default {
align-items: center; align-items: center;
background-color: #f6f6fa; background-color: #f6f6fa;
border-radius: 0.2rem; border-radius: 0.2rem;
font-size: 1rem;
.name { .name {
display: flex; display: flex;

2
src/views/index-components/road-index.vue
View File

@ -282,6 +282,7 @@ export default {
background: url("../../assets/index/div-title.png") no-repeat; background: url("../../assets/index/div-title.png") no-repeat;
background-size: 5%; background-size: 5%;
background-position: 0 30%; background-position: 0 30%;
font-size: 1.2rem;
span { span {
font-family: "DouYu"; font-family: "DouYu";
@ -296,6 +297,7 @@ export default {
padding-left: 3rem; padding-left: 3rem;
background: url("../../assets/index/top-div-title.png") no-repeat; background: url("../../assets/index/top-div-title.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 1rem;
a { a {
margin-top: 0.4rem; margin-top: 0.4rem;

3
src/views/index-components/traffic-index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:30:35 * @Date: 2024-10-29 15:30:35
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 11:54:48 * @LastEditTime: 2024-12-10 11:56:27
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
* @Description: 首页-路况评定 * @Description: 首页-路况评定
--> -->
@ -355,6 +355,7 @@ export default {
background: url("../../assets/index/div-title.png") no-repeat; background: url("../../assets/index/div-title.png") no-repeat;
background-size: 5%; background-size: 5%;
background-position: 0 30%; background-position: 0 30%;
font-size: 1.2rem;
>span { >span {
font-family: "DouYu"; font-family: "DouYu";

27
src/views/index.vue
View File

@ -75,18 +75,20 @@ export default {
/* 获取顶栏数据 */ /* 获取顶栏数据 */
getTopData() { getTopData() {
this.loading = true; this.loading = true;
getTotalCount().then(({ code, data }) => { getTotalCount()
if (code === 200) { .then(({ code, data }) => {
this.topList = [ if (code === 200) {
{ name: "路面病害总数", value: data.road, unit: "个" }, this.topList = [
{ name: "交安事件总数 ", value: data.event, unit: "个" }, { name: "路面病害总数", value: data.road, unit: "个" },
{ name: "桥隧病害总数", value: data.bridge, unit: "个" }, { name: "交安事件总数 ", value: data.event, unit: "个" },
{ name: "绿化待处理问题数", value: data.green, unit: "个" }, { name: "桥隧病害总数", value: data.bridge, unit: "个" },
]; { name: "绿化待处理问题数", value: data.green, unit: "个" },
} ];
}).finally(() => { }
this.loading = false; })
}); .finally(() => {
this.loading = false;
});
}, },
}, },
}; };
@ -104,6 +106,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-size: 1.2rem;
background: url("../assets/index/top-content.png") no-repeat; background: url("../assets/index/top-content.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;