parent
55ae673aed
commit
c1e5623908
20 changed files with 1191 additions and 127 deletions
@ -0,0 +1,187 @@ |
|||||||
|
<template> |
||||||
|
<view class="page-css"> |
||||||
|
<view class=""> |
||||||
|
<view class="banner-swiper" v-if="swiperList.length > 0"> |
||||||
|
<view class="logo-txt">科研医疗建筑运维平台</view> |
||||||
|
<u-swiper height="444" :list="swiperList" mode="none"></u-swiper> |
||||||
|
</view> |
||||||
|
<view class="work-title">工作台</view> |
||||||
|
<view class="workbench"> |
||||||
|
<view v-for="(item, index) in workList" :key="index" class="workbench-slider"> |
||||||
|
<view class="workbench-item" @click="goPage(item)"> |
||||||
|
<view class="workbench-item-icon"> |
||||||
|
<image :src="item.img" mode="aspectFit" /> |
||||||
|
</view> |
||||||
|
<u-badge class="badge" type="error" :count="item.num" :offset="[0, 0]"></u-badge> |
||||||
|
</view> |
||||||
|
<view class="workbench-name">{{ item.name }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="work-title">实验室巡检</view> |
||||||
|
<view> |
||||||
|
<swiperSlider></swiperSlider> |
||||||
|
</view> |
||||||
|
<view class="work-title">设备报警</view> |
||||||
|
<view> |
||||||
|
<alarm></alarm> |
||||||
|
</view> |
||||||
|
<view class="work-title">维修统计</view> |
||||||
|
<view class="statistics"> |
||||||
|
<eacharts :type="'maintenanceStatistics'"></eacharts> |
||||||
|
<eacharts :type="'maintenanceStatisticsPie'"></eacharts> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<betone-tabbar ref="tabbarRef" /> |
||||||
|
<betone-loading ref="BetLoading"></betone-loading> |
||||||
|
<u-modal v-model="show" :content="content" ></u-modal> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import swiperSlider from "./components/swiper.vue"; |
||||||
|
import alarm from "./components/alarm.vue"; |
||||||
|
import eacharts from "./components/eacharts.vue"; |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
swiperSlider, |
||||||
|
alarm, |
||||||
|
eacharts, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show:true, |
||||||
|
content:'账号审核中！', |
||||||
|
swiperList: [require("@/static/images/home/lab.png")], |
||||||
|
workList: [ |
||||||
|
{ |
||||||
|
name: "实验室巡检", |
||||||
|
img: require("@/static/images/home/lab_xj.png"), |
||||||
|
num: 10, |
||||||
|
pagePath: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "报送记录", |
||||||
|
img: require("@/static/images/home/bs_jl.png"), |
||||||
|
num: 0, |
||||||
|
pagePath: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "设备报警", |
||||||
|
img: require("@/static/images/home/alarm.png"), |
||||||
|
num: 2, |
||||||
|
pagePath: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "其他", |
||||||
|
img: require("@/static/images/home/full.png"), |
||||||
|
num: 0, |
||||||
|
pagePath: '' |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.tabbarRef.getPermission(); |
||||||
|
this.$refs.BetLoading.show(); |
||||||
|
setTimeout(() => { |
||||||
|
this.$refs.BetLoading.hide(); |
||||||
|
}, 1000); |
||||||
|
}); |
||||||
|
//工作台 |
||||||
|
this.getworkbench(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getworkbench() { |
||||||
|
console.log(55); |
||||||
|
// this.$u.api.getworkbench().then(res=>{ |
||||||
|
|
||||||
|
// }).catch(err=>{ |
||||||
|
|
||||||
|
// }) |
||||||
|
}, |
||||||
|
goPage(item){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: item.pagePath, |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.page-css { |
||||||
|
width: 100%; |
||||||
|
// min-height: 100%; |
||||||
|
padding: 0; |
||||||
|
background: rgba(239, 239, 239, 1); |
||||||
|
padding-top: var(--status-bar-height); |
||||||
|
.banner-swiper { |
||||||
|
margin-bottom: 64rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.logo-txt { |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
font-size: 36rpx; |
||||||
|
position: absolute; |
||||||
|
top: 40rpx; |
||||||
|
left: 20rpx; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.work-title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 32rpx; |
||||||
|
padding: 0 0 32rpx 36rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.workbench { |
||||||
|
height: 210rpx; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
margin: 0 40rpx 32rpx; |
||||||
|
|
||||||
|
.workbench-item { |
||||||
|
width: 160rpx; |
||||||
|
height: 148rpx; |
||||||
|
background-color: rgba(58, 98, 215, 0.57); |
||||||
|
border-radius: 8rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.workbench-item-icon { |
||||||
|
width: 64rpx; |
||||||
|
height: 64rpx; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.workbench-name { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
margin-top: 16rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.badge { |
||||||
|
// background-color: blue; |
||||||
|
// color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.statistics_pie { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view v-for="(item, index) in list" :key="index" class="alarm-box"> |
||||||
|
<view class="alarm-left" :style="{ borderColor: item.color }"> |
||||||
|
<i>{{ item.alarmName }}</i> |
||||||
|
<i>{{ item.levelNanme }}</i> |
||||||
|
</view> |
||||||
|
<view class="alarm-center"> |
||||||
|
<text>{{ item.deviceName }}</text> |
||||||
|
<text>品牌:{{ item.brand }}</text> |
||||||
|
<text>型号:{{ item.model }}</text> |
||||||
|
<text>报警时间:{{ item.alarmTime }}</text> |
||||||
|
<view class="alarm-center-btn">一键报送</view> |
||||||
|
</view> |
||||||
|
<view class="alarm-right"></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
colorList: { |
||||||
|
特别严重: "rgba(189,49,36,1)", |
||||||
|
严重: "rgba(233,157,66,1)", |
||||||
|
}, |
||||||
|
list: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.deviceList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
deviceList() { |
||||||
|
// this.$u.api.deviceList().then(res => { |
||||||
|
// if (res.code == 200) { |
||||||
|
let data_ = [ |
||||||
|
{ |
||||||
|
"alarmTime": "2024-11-15", |
||||||
|
"alarmLevel": 1, |
||||||
|
"model": "GDXH-12582", |
||||||
|
"deviceName": "2024-11-11", |
||||||
|
"brand": "品牌A" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"alarmTime": "2024-11-08", |
||||||
|
"alarmLevel": 2, |
||||||
|
"model": "GDXH-88542", |
||||||
|
"deviceName": "2024-11-11", |
||||||
|
"brand": "品牌B" |
||||||
|
} |
||||||
|
] |
||||||
|
data_.forEach(v => { |
||||||
|
if (v.alarmLevel == 1) { |
||||||
|
v.alarmName = '一级' |
||||||
|
v.levelNanme = '超级严重' |
||||||
|
|
||||||
|
} |
||||||
|
if (v.alarmLevel == 2) { |
||||||
|
v.alarmName = '二级' |
||||||
|
v.levelNanme = '严重' |
||||||
|
} |
||||||
|
v.color = this.colorList[v.levelNanme] |
||||||
|
}); |
||||||
|
this.list = data_ |
||||||
|
// } |
||||||
|
// }) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.alarm-box { |
||||||
|
margin: 0 40rpx 32rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 20rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
|
||||||
|
.alarm-left { |
||||||
|
width: 160rpx; |
||||||
|
height: 160rpx; |
||||||
|
text-align: center; |
||||||
|
border: 16rpx solid rgba(189, 49, 36, 1); |
||||||
|
border-radius: 50%; |
||||||
|
margin: 36rpx 36rpx 36rpx 48rpx; |
||||||
|
|
||||||
|
i { |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&:nth-child(1) { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 28rpx; |
||||||
|
padding-top: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(2) { |
||||||
|
color: rgba(190, 190, 190, 1); |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.alarm-center { |
||||||
|
flex: 1; |
||||||
|
color: rgba(154, 154, 154, 1); |
||||||
|
font-size: 24rpx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
text { |
||||||
|
display: block; |
||||||
|
line-height: 40rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
|
||||||
|
&:nth-child(1) { |
||||||
|
color: rgba(0, 0, 0, 1); |
||||||
|
font-size: 28rpx; |
||||||
|
padding: 28rpx 0 8rpx 0; |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(2) {} |
||||||
|
} |
||||||
|
|
||||||
|
.alarm-center-btn { |
||||||
|
width: 160rpx; |
||||||
|
height: 60rpx; |
||||||
|
line-height: 40rpx; |
||||||
|
border-radius: 8rpx; |
||||||
|
background-color: rgba(58, 98, 215, 0.16); |
||||||
|
color: rgba(58, 98, 215, 1); |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 60rpx; |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
top: 28rpx; |
||||||
|
right: 40rpx; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,366 @@ |
|||||||
|
<template> |
||||||
|
<view class="eacharts-box"> |
||||||
|
<view class="eacharts-time"> |
||||||
|
<!-- <u-form :model="form" ref="uForm"> |
||||||
|
<u-form-item label="选择时间:" label-width="140" :border-bottom="false"> |
||||||
|
<u-input v-model="form.searchTime" type="select" @click="calendarShow = true" :border="true" |
||||||
|
placeholder="请选择时间" /> |
||||||
|
</u-form-item> |
||||||
|
</u-form> --> |
||||||
|
<u-calendar v-model="calendarShow" :mode="mode" @change="change"></u-calendar> |
||||||
|
</view> |
||||||
|
<!-- eacharts 图表 --> |
||||||
|
<view class="echarts" v-if="type == 'maintenanceStatistics'"> |
||||||
|
<l-echart ref="chartRef" :key="Math.random()"></l-echart> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 饼状图 --> |
||||||
|
<view class="echartsPie" v-if="type == 'maintenanceStatisticsPie'"> |
||||||
|
<view class="pie-item"> |
||||||
|
<view style="height:308rpx"><l-echart ref="chartRefPieLeft" :key="Math.random()"></l-echart></view> |
||||||
|
<text class="pie-title">故障现象分类</text> |
||||||
|
</view> |
||||||
|
<view class="pie-item"> |
||||||
|
<view style="height:308rpx"><l-echart ref="chartRefPieRight" :key="Math.random()"></l-echart></view> |
||||||
|
<text class="pie-title">设备分类</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import lEchart from "@/uni_modules/lime-echart/components/lime-echart/"; |
||||||
|
export default { |
||||||
|
components: { lEchart }, |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
searchTime: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
calendarShow: false, |
||||||
|
mode: "range", |
||||||
|
upkeepStatInfo: {}, |
||||||
|
pieInfo: {},//饼图数据 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
// 维修统计 |
||||||
|
if (this.type == "maintenanceStatistics") { |
||||||
|
this.upkeepStat() |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
if (this.type == "maintenanceStatisticsPie") { |
||||||
|
this.pieStat() |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 维修统计 |
||||||
|
upkeepStat() { |
||||||
|
let query_ = { |
||||||
|
startTime: this.form.startTime, |
||||||
|
endTime: this.form.endTime, |
||||||
|
} |
||||||
|
// this.$u.api.upkeepStat(query_).then(res => { |
||||||
|
// if (res.code == 200) { |
||||||
|
this.upkeepStatInfo = { |
||||||
|
"total": [ |
||||||
|
10, |
||||||
|
20 |
||||||
|
], |
||||||
|
"unCompleted": [ |
||||||
|
7, |
||||||
|
8 |
||||||
|
], |
||||||
|
"xData": [ |
||||||
|
"报送维修", |
||||||
|
"巡检维修" |
||||||
|
], |
||||||
|
"completed": [ |
||||||
|
3, |
||||||
|
12 |
||||||
|
] |
||||||
|
} |
||||||
|
this.maintenanceInit(); |
||||||
|
// } |
||||||
|
// }) |
||||||
|
}, |
||||||
|
// 饼图数据 |
||||||
|
pieStat() { |
||||||
|
let query_ = { |
||||||
|
startTime: this.form.startTime, |
||||||
|
endTime: this.form.endTime, |
||||||
|
} |
||||||
|
// this.$u.api.pieStat(query_).then(res => { |
||||||
|
// if (res.code == 200) { |
||||||
|
this.pieInfo = {"fault": [ |
||||||
|
{ |
||||||
|
"name": "电气", |
||||||
|
"value": 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "空调", |
||||||
|
"value": 248 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "装修类", |
||||||
|
"value": 135 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "智能设备", |
||||||
|
"value": 180 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "暖通、自控", |
||||||
|
"value": 654 |
||||||
|
} |
||||||
|
], |
||||||
|
"device": [ |
||||||
|
{ |
||||||
|
"name": "设备1", |
||||||
|
"value": 580 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "空调", |
||||||
|
"value": 1048 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "通风柜", |
||||||
|
"value": 735 |
||||||
|
} |
||||||
|
]} |
||||||
|
this.maintenancePieLeftInit(); |
||||||
|
this.maintenancePieRightInit(); |
||||||
|
// } |
||||||
|
// }) |
||||||
|
}, |
||||||
|
selectFun() { |
||||||
|
this.calendarShow = true; |
||||||
|
}, |
||||||
|
change(e) { |
||||||
|
this.form.startTime = e.startDate; |
||||||
|
this.form.endTime = e.endDate; |
||||||
|
this.form.searchTime = e.startDate + "-" + e.endDate; |
||||||
|
if (this.type == "maintenanceStatistics") { |
||||||
|
this.upkeepStat() |
||||||
|
} |
||||||
|
if (this.type == "maintenanceStatisticsPie") { |
||||||
|
this.pieStat() |
||||||
|
} |
||||||
|
|
||||||
|
// 查询数据 |
||||||
|
}, |
||||||
|
// 维修统计柱状图 |
||||||
|
maintenanceInit() { |
||||||
|
let opts = { |
||||||
|
tooltip: {}, |
||||||
|
legend: { |
||||||
|
//图例组件 |
||||||
|
data: ["总计", "已完成", "未完成"], |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: this.upkeepStatInfo.xData, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "15%", |
||||||
|
left: "10%", |
||||||
|
right: "5%", |
||||||
|
bottom: "15%", |
||||||
|
}, |
||||||
|
yAxis: {}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "总计", |
||||||
|
type: "bar", |
||||||
|
data: this.upkeepStatInfo.total, |
||||||
|
barWidth: 30, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#2478f2", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "已完成", |
||||||
|
type: "bar", |
||||||
|
data: this.upkeepStatInfo.completed, |
||||||
|
barWidth: 30, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#84b7f9", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "未完成", |
||||||
|
type: "bar", |
||||||
|
data: this.upkeepStatInfo.unCompleted, |
||||||
|
barWidth: 30, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#5f9cf8", |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.$refs.chartRef.init((config) => { |
||||||
|
const { canvas } = config; |
||||||
|
const chart = echarts.init(canvas, null, config); |
||||||
|
chart.setOption(opts); |
||||||
|
// 需要把 chart 返回 |
||||||
|
return chart; |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 故障现象分类 |
||||||
|
maintenancePieLeftInit() { |
||||||
|
let opts = { |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
type: "pie", |
||||||
|
radius: ['40%', '70%'], |
||||||
|
label: { |
||||||
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
fontSize: 8, // 是否显示标签[ default: false ] |
||||||
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||||
|
formatter: "{b}\n {c}", // 标签内容 |
||||||
|
color: '#000' |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
data: this.pieInfo.fault, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: "rgba(0, 0, 0, 1)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
normal: { |
||||||
|
show: true, // 是否显示视觉引导线。 |
||||||
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
length2: 5, |
||||||
|
|
||||||
|
// 视觉引导项第二段的长度。 |
||||||
|
lineStyle: { |
||||||
|
// 视觉引导线的样式 |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.$refs.chartRefPieLeft.init((config) => { |
||||||
|
const { canvas } = config; |
||||||
|
const chart = echarts.init(canvas, null, config); |
||||||
|
chart.setOption(opts); |
||||||
|
// 需要把 chart 返回 |
||||||
|
return chart; |
||||||
|
}); |
||||||
|
}, |
||||||
|
maintenancePieRightInit() { |
||||||
|
let opts = { |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ['40%', '70%'], |
||||||
|
label: { |
||||||
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
fontSize: 8, // 是否显示标签[ default: false ] |
||||||
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||||
|
formatter: "{b}\n {c}", // 标签内容 |
||||||
|
color: '#000' |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: this.pieInfo.device, |
||||||
|
labelLine: { |
||||||
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
normal: { |
||||||
|
show: true, // 是否显示视觉引导线。 |
||||||
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
length2: 5, |
||||||
|
// 视觉引导项第二段的长度。 |
||||||
|
lineStyle: { |
||||||
|
// 视觉引导线的样式 |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.$refs.chartRefPieRight.init((config) => { |
||||||
|
const { canvas } = config; |
||||||
|
const chart = echarts.init(canvas, null, config); |
||||||
|
chart.setOption(opts); |
||||||
|
// 需要把 chart 返回 |
||||||
|
return chart; |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.eacharts-box { |
||||||
|
background: #fff; |
||||||
|
margin: 0 40rpx 32rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.eacharts-time { |
||||||
|
margin: 0 136rpx 0 24rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
|
||||||
|
text { |
||||||
|
line-height: 60rpx; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 28rpx; |
||||||
|
margin-top: 30rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.echarts { |
||||||
|
width: calc(100% - 64rpx); |
||||||
|
height: 308rpx; |
||||||
|
margin: 0 auto 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.echartsPie { |
||||||
|
width: calc(100% - 64rpx); |
||||||
|
min-height: 308rpx; |
||||||
|
margin: 0 auto 0; |
||||||
|
|
||||||
|
.pie-item { |
||||||
|
width: 100%; |
||||||
|
height: 368rpx; |
||||||
|
// float: left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pie-title { |
||||||
|
height: 30rpx; |
||||||
|
text-align: center; |
||||||
|
display: block; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 28rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<template> |
||||||
|
<view class="notice_bg"> |
||||||
|
<view class="line"></view> |
||||||
|
<swiper autoplay="true" display-multiple-items="1" vertical="true" circular interval="7000" class="bar-swiper"> |
||||||
|
<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item"> |
||||||
|
<view class="title">{{ item.inspectionName }}</view> |
||||||
|
<view class="time">巡检计划时间:{{ item.inspectionTime }}</view> |
||||||
|
<view class="name">巡检人:{{ item.inspectionPerson }}</view> |
||||||
|
<view class="status"> |
||||||
|
<i class="status-name">{{ item.isStart == 1 ? '已开始' : '未开始' }}</i><i>预约时间：{{ item.appointTime }}</i> |
||||||
|
</view> |
||||||
|
<view class="type">{{ item.taskType == 1 ? '周期任务' : '单次任务' }}</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
list: [ |
||||||
|
{ |
||||||
|
"inspectionPerson": "张三", |
||||||
|
"taskType": "1", |
||||||
|
"appointTime": "2024-11-15", |
||||||
|
"inspectionTime": "2024-11-11", |
||||||
|
"inspectionName": "水系统检查", |
||||||
|
"isStart": "0" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"inspectionPerson": "李四", |
||||||
|
"taskType": "2", |
||||||
|
"appointTime": "2024-11-15", |
||||||
|
"inspectionTime": "2024-11-11", |
||||||
|
"inspectionName": "设备检查", |
||||||
|
"isStart": "1" |
||||||
|
} |
||||||
|
], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 点击通告栏 |
||||||
|
click(id) { |
||||||
|
// console.log(id, "======>id"); |
||||||
|
}, |
||||||
|
workList() { |
||||||
|
this.$u.api.workList().then(res => { |
||||||
|
if (res.code == 200) { |
||||||
|
this.list = res.data |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.notice_bg { |
||||||
|
margin: 0 40rpx 32rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 20rpx; |
||||||
|
padding: 16rpx 20rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 74rpx; |
||||||
|
height: 72rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-swiper { |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: rgba(34, 34, 34, 0.5); |
||||||
|
height: 260rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex: 1; |
||||||
|
margin-left: 12rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-item { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
// 内容样式 |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
text-align: left; |
||||||
|
margin-top: 22rpx; |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.time { |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 28rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.time, |
||||||
|
.name { |
||||||
|
font-size: 26rpx; |
||||||
|
color: rgba(108, 108, 108, 1); |
||||||
|
line-height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.status { |
||||||
|
font-size: 26rpx; |
||||||
|
line-height: 38rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
|
||||||
|
.status-name { |
||||||
|
color: rgba(58, 98, 215, 1); |
||||||
|
padding-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type { |
||||||
|
position: absolute; |
||||||
|
top: 20rpx; |
||||||
|
right: 20rpx; |
||||||
|
color: rgba(58, 98, 215, 1); |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue