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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -37,6 +37,7 @@
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"animate.css": "^4.1.1",
"axios": "0.28.1",
"bpmn-js": "^11.1.0",
"bpmn-js-bpmnlint": "^0.22.3",

8
src/assets/images/empty.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="56" height="58" viewBox="0 0 56 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321319312">
<path id="Vector" opacity="0.1" d="M0 53.7992C0 54.7011 2.86631 55.5661 7.96836 56.2039C13.0704 56.8416 19.9903 57.1999 27.2057 57.1999C34.4211 57.1999 41.341 56.8416 46.443 56.2039C51.5451 55.5661 54.4114 54.7011 54.4114 53.7992C54.4114 52.8973 51.5451 52.0323 46.443 51.3945C41.341 50.7568 34.4211 50.3985 27.2057 50.3985C19.9903 50.3985 13.0704 50.7568 7.96836 51.3945C2.86631 52.0323 0 52.8973 0 53.7992Z" fill="#30D7F9"/>
<path id="Vector_2" opacity="0.2" d="M40.2983 3.53674V3.91082L43.1209 6.52937L54.0032 1.25826L44.1751 7.54958V10.6442L45.7395 9.11391V9.0799L45.7735 9.11391L47.3378 10.6442L55.7716 0.340071V0L40.2983 3.53674Z" fill="#30D7F9"/>
<path id="Vector_3" opacity="0.5" d="M1.29248 47.8819C1.29248 48.46 1.73457 48.9021 2.31269 48.9021C2.89081 48.9021 3.33291 48.46 3.33291 47.8819C3.33291 47.3038 2.89081 46.8617 2.31269 46.8617C1.76858 46.8617 1.29248 47.3378 1.29248 47.8819ZM54.7517 50.6025C53.7314 50.8745 53.4934 51.0786 53.2213 52.1328C52.9493 51.1126 52.7452 50.8745 51.691 50.6025C52.7112 50.3304 52.9493 50.0924 53.2213 49.0722C53.4934 50.0924 53.6974 50.3304 54.7517 50.6025ZM53.2213 46.6917C51.555 47.1338 51.2149 47.4738 50.7728 49.1402C50.3307 47.4738 49.9907 47.1338 48.3243 46.6917C49.9907 46.2496 50.3307 45.8755 50.7728 44.2432C51.1809 45.9095 51.555 46.2496 53.2213 46.6917ZM6.97167 12.6165C5.95146 12.8886 5.74741 13.0926 5.47536 14.1129C5.2033 13.0926 4.99926 12.8886 3.97904 12.6165C4.99926 12.3445 5.2033 12.1404 5.47536 11.1202C5.71341 12.1404 5.95146 12.3445 6.97167 12.6165ZM11.0185 7.37945C8.36596 8.05959 7.82185 8.63771 7.1077 11.2903C6.42755 8.63771 5.84943 8.09359 3.19688 7.37945C5.84943 6.6993 6.39355 6.12118 7.1077 3.46863C7.78784 6.08718 8.36596 6.6653 11.0185 7.37945ZM27.2059 28.6679C27.0359 28.6679 26.8658 28.6339 26.6958 28.5319L9.42018 18.6698C9.11412 18.4998 8.91007 18.1597 8.91007 17.7856C8.91007 17.4115 9.11412 17.0715 9.42018 16.9014L26.6958 7.03937C27.0019 6.86934 27.4099 6.86934 27.716 7.03937L44.9916 16.9014C45.2977 17.0715 45.5017 17.4115 45.5017 17.7856C45.5017 18.1597 45.2977 18.4998 44.9916 18.6698L27.716 28.5319C27.546 28.6339 27.3759 28.6679 27.2059 28.6679ZM11.9707 17.7516L27.2059 26.4574L42.4411 17.7516L27.2059 9.0798L11.9707 17.7516ZM24.6214 53.187C24.4513 53.187 24.2813 53.153 24.1113 53.051L6.90365 43.0189C6.59759 42.8489 6.39355 42.5088 6.39355 42.1347L6.29153 22.2406C6.29153 21.8665 6.49557 21.5264 6.80163 21.3564C7.1077 21.1863 7.51578 21.1863 7.82185 21.3564L25.0294 31.3885C25.3355 31.5585 25.5396 31.8986 25.5396 32.2727L25.6416 52.1668C25.6416 52.5409 25.4375 52.881 25.1315 53.051C24.9614 53.153 24.7914 53.187 24.6214 53.187ZM8.43397 41.5566L23.6011 50.3984L23.5331 32.8508L8.36596 24.0089L8.43397 41.5566ZM29.7904 53.187C29.6204 53.187 29.4504 53.153 29.2803 53.051C28.9743 52.881 28.7702 52.5409 28.7702 52.1668L28.8722 32.2727C28.8722 31.8986 29.0763 31.5925 29.3824 31.3885L46.59 21.3564C46.896 21.1863 47.3041 21.1863 47.6102 21.3564C47.9162 21.5264 48.1203 21.8665 48.1203 22.2406L48.0183 42.1347C48.0183 42.5088 47.8142 42.8149 47.5081 43.0189L30.3005 53.051C30.1305 53.153 29.9605 53.187 29.7904 53.187ZM30.8787 32.8508L30.8107 50.3984L45.9778 41.5566L46.0458 24.0089L30.8787 32.8508Z" fill="#30D7F9"/>
<path id="Vector_4" opacity="0.2" d="M11.1203 40.0264L11.0522 28.702L20.8463 34.4152L20.8803 45.7056L11.1203 40.0264ZM33.565 34.4152L43.359 28.702L43.291 40.0264L33.531 45.7056L33.565 34.4152ZM17.3776 17.7517L27.2056 12.1406L37.0337 17.7517L27.2056 23.3629L17.3776 17.7517Z" fill="#30D7F9"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

51
src/components/empty/fssm-empty.vue Normal file
View File

@ -0,0 +1,51 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-19 13:27:46
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 13:53:35
* @FilePath: \znxjxt-ui\src\components\empty\fssm-empty.vue
* @Description: 空数据提示组件
*
-->
<template>
<div class="fssm-empty-tip">
<img src="~@/assets/images/empty.svg" />
<div class="fssm-empty-tip__label">{{ tip }}</div>
</div>
</template>
<script>
export default {
name: "FssmEmpty",
props: {
tip: {
type: String,
default: "暂无数据",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.fssm-empty-tip {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
width: 25%;
}
.fssm-empty-tip__label {
color: #1b7698;
font-family: "DouYu";
font-size: 0.8rem;
}
}
</style>

5
src/components/scroll/fssm-scroll.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 15:22:21
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-14 15:26:52
* @LastEditTime: 2024-12-19 15:16:42
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\fssm-scroll.vue
* @Description: 滚动条封装样式
-->
@ -28,7 +28,8 @@ export default {
.scroll-box {
width: 100%;
height: 100%;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 6px;

25
src/views/big-screen/index.vue
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 {

13
src/views/big-screen/overview-components/disease-trends.vue
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,6 +52,7 @@ export default {
const yData3 = this.echartList.map((item) => {
return item.sanluowu;
});
if (this.$refs.trendsChart) {
const chart = echarts.init(this.$refs.trendsChart);
chart.setOption({
//你的代码
@ -277,6 +280,7 @@ export default {
window.addEventListener("resize", () => {
chart.resize();
});
}
},
},
};
@ -287,5 +291,10 @@ export default {
width: 100%;
height: 100%;
overflow: hidden;
.chart {
width: 100%;
height: 100%;
}
}
</style>

3
src/views/big-screen/overview-components/patrol-order.vue
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%;

29
src/views/big-screen/road-components/ancillary-facilities.vue
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;
}
});

13
src/views/big-screen/road-components/anomaly-facilities.vue
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();
});
},
},

6
src/views/xj/route/route-line/index.vue
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"

6
src/views/xj/route/route-section/index.vue
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