fix：大屏页面
This commit is contained in:
@@ -2,14 +2,27 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:15:47
|
||||
* @LastEditTime: 2024-10-21 17:14:45
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="content-select">下拉框</div>
|
||||
<div class="content-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="echart" ref="currentChart"></div>
|
||||
<div class="food-legend">
|
||||
<div
|
||||
@@ -33,8 +46,34 @@ export default {
|
||||
name: "DiseaseCurrent",
|
||||
data() {
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
// 配置项数据
|
||||
options: {},
|
||||
// 颜色盘
|
||||
colorList: [
|
||||
"#F29C1F",
|
||||
"#E163EF",
|
||||
@@ -113,6 +152,28 @@ export default {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
// title: [
|
||||
// {
|
||||
// x: "center",
|
||||
// top: "20%",
|
||||
// text: 50,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 42,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// x: "center",
|
||||
// top: "50%",
|
||||
// text: "还款总额",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// fontWeight: 400,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
grid3D: {
|
||||
show: false,
|
||||
width: "250%",
|
||||
@@ -123,7 +184,7 @@ export default {
|
||||
left: "-75%",
|
||||
viewControl: {
|
||||
// 是否自动旋转
|
||||
autoRotate: false,
|
||||
autoRotate: true,
|
||||
// 调节角度
|
||||
alpha: 25,
|
||||
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
|
||||
@@ -299,6 +360,49 @@ export default {
|
||||
.content-select {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echart {
|
||||
@@ -327,19 +431,19 @@ export default {
|
||||
.name {
|
||||
width: 3.5rem;
|
||||
padding-left: 0.3rem;
|
||||
color: #AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 1.5rem;
|
||||
color: #808C9F;
|
||||
color: #808c9f;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 2rem;
|
||||
color: #808C9F;
|
||||
color: #808c9f;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,6 +66,7 @@ export default {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
confine:true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@@ -239,6 +240,7 @@ export default {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,7 +24,9 @@
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
</div>
|
||||
<div class="pic-top-value">{{ item.value }}</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
@@ -73,7 +75,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #c7daf2;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
.pic-div {
|
||||
width: calc(100% - 1rem);
|
||||
@@ -83,7 +85,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #2f78aa;
|
||||
border: 1px solid rgba(47, 120, 170, 0.4);
|
||||
|
||||
.pic-top {
|
||||
display: flex;
|
||||
@@ -101,18 +103,27 @@ export default {
|
||||
margin-right: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #2f78aa;
|
||||
border: 1px solid rgba(47, 120, 170, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pic-top-value {
|
||||
font-family: "DouYu";
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.pic-bottom {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
background-color: rgba(2, 40, 88, 0.7);
|
||||
|
||||
.pic-bottom-0 {
|
||||
height: 0.3rem;
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 11:04:18
|
||||
* @LastEditTime: 2024-10-22 09:30:05
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 病害巡检-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left"><span>87</span></div>
|
||||
<div class="today-left"><span>86</span></div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
@@ -40,11 +40,23 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.today-right {
|
||||
@@ -60,17 +72,34 @@ export default {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
@@ -78,6 +107,21 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#E9BC5C
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:34:00
|
||||
* @LastEditTime: 2024-10-22 09:30:43
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 病害巡检-工单统计
|
||||
-->
|
||||
@@ -14,7 +14,7 @@
|
||||
v-for="(item, index) in workList"
|
||||
:key="`work-${index}`"
|
||||
>
|
||||
{{ item.value }}
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -52,10 +52,12 @@ export default {
|
||||
> div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
line-height: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
.work-div-0 {
|
||||
@@ -63,6 +65,16 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.work-div-1 {
|
||||
@@ -70,6 +82,16 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#E9BC5C
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.work-div-2 {
|
||||
@@ -77,6 +99,16 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#21F1E1
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user