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-13 17:06:50 +08:00
parent 652ad05274
commit a8fde34b5c
11 changed files with 114 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -64,7 +64,7 @@
"sortablejs": "1.10.2",
"vkbeautify": "^0.99.3",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-count-to": "^1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 10:03:08
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-13 13:54:26
* @LastEditTime: 2024-12-13 15:21:00
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
* @Description: 病害巡检大屏-病害趋势
-->
@ -213,10 +213,11 @@ export default {
],
yAxis: [
{
name: "数量",
name: "数量:个",
nameTextStyle: {
color: "#C7DAF2",
},
minInterval: 1,
splitLine: {
show: false,
},

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

@ -1420,6 +1420,7 @@ export default {
background-color: transparent;
padding: 0 0.3rem;
border: none;
color: #ffffff;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
@ -1463,8 +1464,8 @@ export default {
height: 7rem;
width: 2rem;
position: absolute;
top: 17%;
left: 26%;
bottom: 16%;
right: 27%;
z-index: 1;
background-image: url("../../assets/screen/index/map-legend.png");
background-repeat: no-repeat;
@ -1519,9 +1520,10 @@ export default {
.map-image-select {
left: 28%;
top: 10%;
font-size: 1rem;
font-size: 0.9rem;
position: absolute;
color: #ffffff;
font-family: "DouYu";
}
// 打点部分

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 11:42:43
* @LastEditTime: 2024-12-13 16:44:58
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图
-->
@ -34,6 +34,26 @@
<div class="echart" ref="currentChart"></div>
<div class="food-legend">
<fssm-scroll
v-if="!clickType"
style="display: flex; justify-content: center; flex-wrap: wrap"
>
<div
class="legend-div-first"
v-for="(item, index) in dataList"
:key="`chart-${index}`"
@click="clickType === '' ? changeEchart(item) : ''"
>
<div
class="index"
:style="{ backgroundColor: colorList[index] }"
></div>
<div class="name" :title="item.typeName">{{ item.typeName }}</div>
<div class="rate">{{ item.rate }}%</div>
<div class="value">{{ item.value }}</div>
</div>
</fssm-scroll>
<fssm-scroll
v-else
:style="{
display: 'flex',
flexWrap: 'wrap',
@ -170,6 +190,7 @@ export default {
/* 点击图例触发事件 */
changeEchart(item) {
this.dataList = [];
if (item) {
this.clickType = item.id;
this.getChartList();
@ -306,7 +327,7 @@ export default {
false,
k,
// 设置饼图高度
series[i].pieData.value / 1000
series[i].pieData.value / 2500
);
startValue = endValue;
@ -449,6 +470,42 @@ export default {
display: flex;
flex-wrap: wrap;
.legend-div-first {
width: 45%;
height: 50%;
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.7rem;
.index {
width: 1rem;
height: 0.6rem;
}
.name {
width: 6rem;
padding-left: 0.3rem;
color: #aac6c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "DouYu";
}
.rate {
width: 2.5rem;
color: #808c9f;
font-size: 0.9rem;
}
.value {
width: 4rem;
color: #808c9f;
font-size: 0.9rem;
}
}
.legend-div {
width: 32%;
height: 30%;

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 11:42:05
* @LastEditTime: 2024-12-13 16:10:18
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势
-->
@ -61,12 +61,14 @@ export default {
},
},
legend: {
top: "top",
top: "6%",
icon: "roundRect",
itemWidth: 15,
itemHeight: 10,
textStyle: {
color: "#808C9F",
fontSize: 10,
fontFamily: "DouYu",
},
},
grid: {
@ -91,7 +93,6 @@ export default {
},
xAxis: {
type: "category",
data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
axisLine: {
lineStyle: {
color: "rgba(60,132,163,0.4)", // x轴线颜色
@ -109,10 +110,16 @@ export default {
data: xData,
},
yAxis: {
name: "数量:个",
nameTextStyle: {
color: "#C7DAF2",
align: "left",
},
type: "value",
axisTick: {
show: false,
},
minInterval: 1,
axisLine: {
show: false,
},

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

@ -193,10 +193,11 @@ export default {
],
yAxis: [
{
name: "数量",
name: "数量:个",
nameTextStyle: {
color: "#C7DAF2",
},
minInterval: 1,
splitLine: {
show: false,
},

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:12:20
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 16:36:31
* @LastEditTime: 2024-12-13 15:25:14
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
* @Description: 首页-日常巡查
-->
@ -170,6 +170,7 @@ export default {
{
name: "",
type: "value",
minInterval: 1,
axisLine: {
lineStyle: {
color: "#A2B0B8",
@ -186,6 +187,7 @@ export default {
{
name: "",
type: "value",
minInterval: 1,
axisLine: {
lineStyle: {
color: "#A2B0B8",

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:17:58
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 11:58:18
* @LastEditTime: 2024-12-13 15:29:06
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
* @Description: 首页-病害识别
-->
@ -22,13 +22,15 @@
<div>
<div class="name">病害识别总数</div>
<div class="value">
<span>{{ total }}</span>个
<span>{{ total }}</span
>个
</div>
</div>
<div>
<div class="name">新增病害数</div>
<div class="value">
<span>{{ newTotal }}</span>个
<span>{{ newTotal }}</span
>个
</div>
</div>
</div>
@ -38,9 +40,16 @@
<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="legnd-div"
v-for="(item, index) in distributionList"
:key="`distribution-${index}`"
>
<div class="name">
<span class="index" :style="{ backgroundColor: distributionColor[index] }"></span>
<span
class="index"
:style="{ backgroundColor: distributionColor[index] }"
></span>
<span>{{ item.name }}</span>
</div>
<div class="rate">{{ item.rate }}</div>
@ -150,7 +159,10 @@ export default {
return {
value: item.value,
name: item.label,
rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
rate:
data.total > 0
? `${((item.value / data.total) * 100).toFixed(0)}%`
: "0%",
};
});
this.$nextTick(() => {
@ -223,6 +235,7 @@ export default {
{
name: "",
type: "value",
minInterval: 1,
axisLine: {
lineStyle: {
color: "#A2B0B8",
@ -261,7 +274,10 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: this.statisticsData.length > 6 ? this.statisticsData.length - 6 : 0,
startValue:
this.statisticsData.length > 6
? this.statisticsData.length - 6
: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.statisticsData.length,
// empty：当前数据窗口外的数据，被设置为空。
@ -430,7 +446,7 @@ export default {
background: url("../../assets/index/left-bkg.png") no-repeat;
background-size: 100%;
>div {
> div {
height: 50%;
width: calc(100% - 2rem);
margin: 0 1rem;
@ -472,7 +488,7 @@ export default {
z-index: 1;
}
>div {
> div {
height: 50%;
width: 100%;
display: flex;

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:23:44
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-09 11:53:20
* @LastEditTime: 2024-12-13 15:29:27
* @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
* @Description: 首页-公路资产
-->
@ -173,6 +173,7 @@ export default {
{
name: "",
type: "value",
minInterval: 1,
axisLine: {
lineStyle: {
color: "#A2B0B8",

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

@ -192,12 +192,13 @@ export default {
],
yAxis: [
{
name: "",
type: "value",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
name: "",
type: "value",
minInterval: 1,
axisLabel: {
show: true,
color: "#9eaaba",