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-19 15:33:59 +08:00
parent cef7383539
commit 157c7323aa
11 changed files with 349 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/big-screen/index.vue
+18 -9
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 10:40:14
* @LastEditTime: 2024-12-19 15:22:15
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@@ -103,6 +103,7 @@
>
<template>
<component
class="animate__animated animate__slideInLeft"
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
@@ -131,6 +132,7 @@
>
<template>
<component
class="animate__animated animate__slideInRight"
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
@@ -210,10 +212,15 @@
<span>≥{{ mapLegendList.s1 }}</span>
</div>
<!-- 病害筛选下拉框 -->
<div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
<span v-if="elementDiv === 'DiseaseScreen' || showMap"
>病害类型筛选：</span
>
<div
class="map-image-select"
:style="{
top: elementDiv === 'DiseaseScreen' || showMap ? '10%' : '23%',
}"
v-if="elementDiv != 'RoadScreen'"
>
<span>病害类型筛选：</span>
<!-- v-if="elementDiv === 'DiseaseScreen' || showMap" -->
<el-cascader
ref="screenCascader"
v-model="mapCareSelect"
@@ -443,6 +450,7 @@ import TrafficLog from "./disease-components/traffic-log.vue";
import ImgDialog from "./components/img-dialog.vue";
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import CountTo from "vue-count-to";
import "animate.css";
// 接口
import {
selectTypeList,
@@ -1653,8 +1661,7 @@ export default {
// 筛选病害类型下拉
.map-image-select {
position: absolute;
left: 26%;
top: 10%;
left: 28%;
font-size: 0.9rem;
position: absolute;
color: #ffffff;
@@ -1674,7 +1681,7 @@ export default {
.work-order {
width: 35%;
height: 12%;
left: 38.5%;
left: 28%;
top: 10%;
display: flex;
position: absolute;
@@ -1689,12 +1696,14 @@ export default {
align-items: flex-end;
.btn-time {
width: 80%;
width: 7rem;
height: 2rem;
margin: 0;
background: url("~@/assets/screen/index/btn-time.png") no-repeat;
background-size: 100% 100%;
border-color: transparent;
color: #ffffff;
font-size: 0.8rem;
font-family: "DouYu";
&:hover {
src/views/big-screen/overview-components/disease-trends.vue
+227 -218
View File
@@ -2,12 +2,14 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-13 16:10:18
* @LastEditTime: 2024-12-19 13:42:02
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势
-->
<template>
<div class="content" ref="trendsChart"></div>
<div class="content">
<div class="chart" ref="trendsChart"></div>
</div>
</template>
<script>
@@ -50,233 +52,235 @@ export default {
const yData3 = this.echartList.map((item) => {
return item.sanluowu;
});
const chart = echarts.init(this.$refs.trendsChart);
chart.setOption({
//你的代码
title: {
text: "",
textStyle: {
color: "#fff",
fontSize: 12,
},
},
legend: {
top: "6%",
icon: "roundRect",
itemWidth: 15,
itemHeight: 10,
textStyle: {
color: "#808C9F",
fontSize: 10,
fontFamily: "DouYu",
},
},
grid: {
top: "25%",
left: "0%",
right: "10%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
},
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
color: "#808C9F",
},
confine: true,
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "rgba(60,132,163,0.4)", // x轴线颜色
if (this.$refs.trendsChart) {
const chart = echarts.init(this.$refs.trendsChart);
chart.setOption({
//你的代码
title: {
text: "",
textStyle: {
color: "#fff",
fontSize: 12,
},
},
axisTick: {
show: false, // 是否显示x轴的刻度
},
axisLabel: {
interval: 0,
color: "#808C9F",
fontSize: 12,
},
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
data: xData,
},
yAxis: {
name: "数量:个",
nameTextStyle: {
color: "#C7DAF2",
align: "left",
},
type: "value",
axisTick: {
show: false,
},
minInterval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "#808C9F",
fontSize: 14,
formatter: function (value) {
return value + "";
legend: {
top: "6%",
icon: "roundRect",
itemWidth: 15,
itemHeight: 10,
textStyle: {
color: "#808C9F",
fontSize: 10,
fontFamily: "DouYu",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(60,132,163,0.2)",
grid: {
top: "25%",
left: "0%",
right: "10%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
},
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
fontSize: 12,
color: "#808C9F",
},
confine: true,
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "rgba(60,132,163,0.4)", // x轴线颜色
},
},
axisTick: {
show: false, // 是否显示x轴的刻度
},
axisLabel: {
interval: 0,
color: "#808C9F",
fontSize: 12,
},
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
data: xData,
},
yAxis: {
name: "数量:个",
nameTextStyle: {
color: "#C7DAF2",
align: "left",
},
type: "value",
axisTick: {
show: false,
},
minInterval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "#808C9F",
fontSize: 14,
formatter: function (value) {
return value + "";
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(60,132,163,0.2)",
},
},
},
},
series: [
{
name: "护栏损坏",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FFC100",
},
{
offset: 1,
color: "rgba(98,74,0,0)",
},
]),
series: [
{
name: "护栏损坏",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FFC100",
},
{
offset: 1,
color: "rgba(98,74,0,0)",
},
]),
},
lineStyle: {
width: 1,
color: "#FFC100",
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#FFC100", // 节点颜色
},
data: yData1,
},
lineStyle: {
width: 1,
color: "#FFC100",
{
name: "坑槽",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#08B4A6",
},
{
offset: 1,
color: "rgba(8,180,166,0)",
},
]),
},
lineStyle: {
width: 1,
color: "#08B4A6",
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#08B4A6",
},
data: yData2,
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#FFC100", // 节点颜色
{
name: "散落物",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#994EFF",
},
{
offset: 1,
color: "rgba(153,78,255,0)",
},
]),
},
lineStyle: {
width: 1,
color: "#994EFF",
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#994EFF",
},
data: yData3,
},
data: yData1,
},
{
name: "坑槽",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#08B4A6",
},
{
offset: 1,
color: "rgba(8,180,166,0)",
},
]),
],
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgba(225,225,225,0.2)",
// 设置选中范围的填充颜色
fillerColor: "#ccc",
// 设置边框颜色
borderColor: "rgba(225,225,225,0.2)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue:
this.echartList.length > 6 ? this.echartList.length - 6 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.echartList.length,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "80%",
// 设置滚动条高度
height: 5,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 10,
// dataZoom-slider组件离容器下侧的距离
bottom: 0,
},
lineStyle: {
width: 1,
color: "#08B4A6",
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#08B4A6",
},
data: yData2,
},
{
name: "散落物",
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#994EFF",
},
{
offset: 1,
color: "rgba(153,78,255,0)",
},
]),
},
lineStyle: {
width: 1,
color: "#994EFF",
},
// 设置节点样式
showSymbol: false,
symbol: "circle", // 可以选择 circle, diamond, pin 等
symbolSize: 10, // 节点大小
itemStyle: {
color: "#994EFF",
},
data: yData3,
},
],
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgba(225,225,225,0.2)",
// 设置选中范围的填充颜色
fillerColor: "#ccc",
// 设置边框颜色
borderColor: "rgba(225,225,225,0.2)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue:
this.echartList.length > 6 ? this.echartList.length - 6 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.echartList.length,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "80%",
// 设置滚动条高度
height: 5,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 10,
// dataZoom-slider组件离容器下侧的距离
bottom: 0,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
});
window.addEventListener("resize", () => {
chart.resize();
});
],
});
window.addEventListener("resize", () => {
chart.resize();
});
}
},
},
};
@@ -287,5 +291,10 @@ export default {
width: 100%;
height: 100%;
overflow: hidden;
.chart {
width: 100%;
height: 100%;
}
}
</style>
src/views/big-screen/overview-components/patrol-order.vue
+2 -1
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:25:29
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-16 17:39:06
* @LastEditTime: 2024-12-19 15:07:40
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\patrol-order.vue
* @Description: 总览大屏-巡查里程
-->
@@ -430,6 +430,7 @@ export default {
background: url("~@/assets/screen/disease/patrol-order.png") no-repeat;
background-size: 90%;
background-position: 50%;
overflow: hidden;
.patrol-div {
width: 50%;
src/views/big-screen/road-components/ancillary-facilities.vue
+28 -1
View File
@@ -37,7 +37,32 @@ export default {
// 附属设施总数
sum: 0,
// 附属设施分布数据
ancillaryList: [],
ancillaryList: [
{
label: "指示标志",
value: 0,
},
{
label: "警告标志",
value: 0,
},
{
label: "指路标志",
value: 0,
},
{
label: "辅助标志",
value: 0,
},
{
label: "辅助标志",
value: 0,
},
{
label: "旅游标志",
value: 0,
},
],
};
},
mounted() {
@@ -58,6 +83,8 @@ export default {
getAncillaryList() {
ancillaryList().then(({ code, data }) => {
if (code === 200) {
console.log(data, "ddddd");
this.ancillaryList = data;
}
});
src/views/big-screen/road-components/anomaly-facilities.vue
+4 -9
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:21:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 10:44:52
* @LastEditTime: 2024-12-19 15:25:25
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
* @Description: 附属设施异常统计
-->
@@ -38,8 +38,6 @@ export default {
currentList: [],
// echart图数据
anomalyData: [],
// echart实例
chart: null,
};
},
watch: {
@@ -88,9 +86,6 @@ export default {
},
/* 绘制echart */
drawChart() {
if (this.chart) {
this.chart.dispose();
}
const xData = this.anomalyData.map((item) => {
return item.label;
});
@@ -147,8 +142,8 @@ export default {
};
}
});
this.chart = echarts.init(this.$refs.anomalyChart);
this.chart.setOption({
const chart = echarts.init(this.$refs.anomalyChart);
chart.setOption({
// backgroundColor: "#041139",
tooltip: {
trigger: "axis",
@@ -288,7 +283,7 @@ export default {
],
});
window.addEventListener("resize", () => {
this.chart.resize();
chart.resize();
});
},
},
src/views/xj/route/route-line/index.vue
+3 -3
View File
@@ -2,7 +2,7 @@
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @Date: 2024-10-08 09:26:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 16:40:40
* @LastEditTime: 2024-12-19 15:31:19
* @FilePath: \znxjxt-ui\src\views\xj\route\index.vue
* @Description: 路线管理-道路线
-->
@@ -79,7 +79,7 @@
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
@@ -89,7 +89,7 @@
v-hasPermi="['xj:route:export']"
>导出
</el-button>
</el-col>
</el-col> -->
<!-- <right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
src/views/xj/route/route-section/index.vue
+3 -3
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-15 13:29:47
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 16:43:48
* @LastEditTime: 2024-12-19 15:31:51
* @FilePath: \znxjxt-ui\src\views\xj\route\route-section\index.vue
* @Description: 路线管理-道路段
-->
@@ -67,14 +67,14 @@
@click="deleteTable(null)"
>删除
</el-button>
<el-button
<!-- <el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-button> -->
</div>
<!-- 列表 -->
<el-table