zhaobing’
1 year ago
17 changed files with 527 additions and 95 deletions
After Width: | Height: | Size: 943 B |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 27 KiB |
@ -0,0 +1,123 @@ |
|||
// package/deviceBigdataGraph/lifeWarning/lifeWarning.js
|
|||
import * as echarts from '../../components/ec-canvas/echarts'; |
|||
function setOption(chart, data) { |
|||
const option = { |
|||
grid: { |
|||
top: '5%', |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: data, |
|||
type: 'line' |
|||
}, |
|||
] |
|||
}; |
|||
chart.setOption(option); |
|||
} |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
ec: { |
|||
// onInit: initChart,
|
|||
lazyLoad: true, // 将 lazyLoad 设为 true 后,需要手动初始化图表
|
|||
}, |
|||
isLoaded: false, |
|||
list: [1,2,3] |
|||
}, |
|||
initChart: function (data) { |
|||
this.ecComponent = this.selectComponent('#device-status-chart'); |
|||
this.ecComponent.init((canvas, width, height, dpr) => { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // new
|
|||
}); |
|||
setOption(chart, data); |
|||
|
|||
// 将图表实例绑定到 this 上,可以在其他成员函数中访问
|
|||
this.chart = chart; |
|||
|
|||
this.setData({ |
|||
isLoaded: true, |
|||
}); |
|||
|
|||
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
|
|||
return chart; |
|||
}); |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
const {windowHeight}=wx.getSystemInfoSync() |
|||
const pageHeight=windowHeight - 48 |
|||
setTimeout(() => { |
|||
this.initChart([1,2,3,4,5,6]) |
|||
}, 1000) |
|||
const that = this |
|||
that.setData({pageHeight:pageHeight+'px'}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
@ -0,0 +1,10 @@ |
|||
{ |
|||
"navigationBarBackgroundColor": "#1979ff", |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "寿命预警", |
|||
"enablePullDownRefresh": false, |
|||
"usingComponents": { |
|||
"ec-canvas": "../../components/ec-canvas/ec-canvas", |
|||
"van-divider": "@vant/weapp/divider/index" |
|||
} |
|||
} |
@ -0,0 +1,91 @@ |
|||
<!--package/deviceBigdataGraph/lifeWarning/lifeWarning.wxml--> |
|||
<view class="status-detail" style="height:{{pageHeight}}"> |
|||
<!--顶部--> |
|||
<view> |
|||
<view class="firstRow"> |
|||
<view> |
|||
<view class="icon"> |
|||
<image src='/images/rectangle.png' class="backStyle"></image> |
|||
<view class="icon-text">设备总数</view> |
|||
</view> |
|||
<view class="fontStyle">300个</view> |
|||
</view> |
|||
<image src="/images/shield.png" class="deviceImgStyle"></image> |
|||
</view> |
|||
<view class="secondRow"> |
|||
<view class="title-item flex flex-col"> |
|||
<view>过保个数</view> |
|||
<view><text class="title-num">{{86}}</text></view> |
|||
</view> |
|||
<view class="title-item flex flex-col"> |
|||
<view>质保个数</view> |
|||
<view><text class="title-num">{{300}}</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--折线图--> |
|||
<view class="card"> |
|||
<view class="flex flex-between"> |
|||
<view class="flex flex-start"> |
|||
<image src="" class="card-img" src="/images/fault_icon.png" /> |
|||
<view class="card-title">寿命预警</view> |
|||
</view> |
|||
</view> |
|||
<view class="chart"> |
|||
<!-- <view>aaa</view> --> |
|||
<ec-canvas id="device-status-chart" canvas-id="device-status-chart" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
</view> |
|||
<!--数据概览--> |
|||
<view class="card"> |
|||
<view class="flex flex-between"> |
|||
<view class="flex flex-start"> |
|||
<image src="" class="card-img" src="/images/fault_icon.png" /> |
|||
<view class="card-title">数据概览</view> |
|||
</view> |
|||
</view> |
|||
<view class="describeStyle"> |
|||
<view class="center-content"> |
|||
<text class="font">30天内你有1000个设备即将过保,请及时更换设备</text> |
|||
</view> |
|||
</view> |
|||
<!--设备列表--> |
|||
<view> |
|||
<view class="detail"> |
|||
<view style="position: relative; top: 8px;"> <text class="deviceStyle">设备A</text></view> |
|||
<van-divider class="van-divider-custom" /> |
|||
<view class="flex flex-between" style="margin-top: -10px;"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">所属结构物</text></view> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">管廊A</text></view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">安装时间</text></view> |
|||
<view style="margin: 5px 5px;"> <text class="chineseStyle">2022-02-11</text></view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">质保期</text></view> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">2022-02-11</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<view class="detail"> |
|||
<view style="position: relative; top: 8px;"> <text class="deviceStyle">设备A</text></view> |
|||
<van-divider class="van-divider-custom" /> |
|||
<view class="flex flex-between" style="margin-top: -10px;"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">所属结构物</text></view> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">管廊A</text></view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">安装时间</text></view> |
|||
<view style="margin: 5px 5px;"> <text class="chineseStyle">2022-02-11</text></view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">质保期</text></view> |
|||
<view style="margin: 5px 5px;"><text class="chineseStyle">2022-02-11</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
@ -0,0 +1,170 @@ |
|||
/* package/deviceBigdataGraph/lifeWarning/lifeWarning.wxss */ |
|||
.status-detail { |
|||
height: 100vh; |
|||
background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%); |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.icon { |
|||
width: 61px; |
|||
height: 31.86px; |
|||
position: relative; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.icon-text { |
|||
width: 100%; |
|||
/* height: 17px; */ |
|||
font-family: PingFangSC-Medium; |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.fontStyle { |
|||
width: 100%; |
|||
height: 33px; |
|||
font-family: PingFangSC-Medium; |
|||
font-weight: 500; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.title-item { |
|||
color: #ffffffd9; |
|||
} |
|||
|
|||
.title-num { |
|||
font-size: 20px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.title-unit { |
|||
font-size: 10px; |
|||
color: #FFFFFE; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.card { |
|||
background: #FFFFFF; |
|||
box-shadow: 2px 2px 11px 0 #00000008, 0 0 4px 0 #00000012; |
|||
border-radius: 4px; |
|||
padding: 12px; |
|||
margin-top: 12px; |
|||
/* height: 100vh; */ |
|||
/* height: 300px; */ |
|||
} |
|||
|
|||
.card-img { |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-right: 13px; |
|||
} |
|||
|
|||
.card-title { |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
color: #383A3B; |
|||
} |
|||
|
|||
.card-link { |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #1684FF; |
|||
} |
|||
|
|||
.chart { |
|||
width: 100%; |
|||
height: 250px; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.list { |
|||
margin-top: 10px; |
|||
padding: 10px 7px; |
|||
background-color: #F1F7FF; |
|||
} |
|||
|
|||
.backStyle { |
|||
width: 61px; |
|||
height: 31.86px; |
|||
} |
|||
|
|||
.firstRow { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
height: 120px; |
|||
} |
|||
|
|||
.deviceImgStyle { |
|||
width: 161.05px; |
|||
height: 166.86px; |
|||
position: absolute; |
|||
right: 15px; |
|||
} |
|||
|
|||
.secondRow { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.describeStyle { |
|||
margin: 5px 2px; |
|||
width: 100%; |
|||
height: 25px; |
|||
opacity: 0.33; |
|||
background-image: linear-gradient(269deg, #FFD9AD 0%, #FF9416 98%); |
|||
border-radius: 13px; |
|||
} |
|||
.font{ |
|||
/* width: 255px; */ |
|||
height: 17px; |
|||
font-family: PingFangSC-Medium; |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
color: #000000; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
|
|||
} |
|||
.center-content { |
|||
display: flex; |
|||
justify-content: center; /* 水平居中 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
height: 100%; /* 或者根据实际需求设置高度 */ |
|||
} |
|||
.detail{ |
|||
/* height: 124px; */ |
|||
background: #F1F7FF; |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
/* position: relative; */ |
|||
} |
|||
.deviceStyle{ |
|||
width: 41px; |
|||
height: 21px; |
|||
font-family: PingFangSC-Medium; |
|||
font-weight: 500; |
|||
font-size: 15px; |
|||
color: #1684FF; |
|||
margin: 10px 10px; |
|||
} |
|||
.chineseStyle{ |
|||
width: 60px; |
|||
height: 17px; |
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
color: #31373ed9; |
|||
} |
|||
.custom-class van-divider { |
|||
margin: 0px!important; /* 设置分割线的高度为2px */ |
|||
} |
@ -1,26 +1,40 @@ |
|||
<!--package/deviceBigdataGraph/detail/detail.wxml--> |
|||
<view class="status-detail"> |
|||
<view class="icon"><text class="icon-text">设备总数</text></view> |
|||
<view>300</view> |
|||
<view class="flex flex-around"> |
|||
<view class="title-item flex flex-col"> |
|||
<view>设备故障率</view> |
|||
<view><text class="title-num">{{86}}%</text></view> |
|||
<!--顶部--> |
|||
<view> |
|||
<view style="display: flex;justify-content: space-between;position: relative;height: 120px;"> |
|||
<view> |
|||
<view class="icon"> |
|||
<image src='/images/rectangle.png' style="width: 61px;height:31.86px;"></image> |
|||
<view class="icon-text">设备总数</view> |
|||
</view> |
|||
<view class="fontStyle">300个</view> |
|||
</view> |
|||
<image src="/images/deviceStatus.png" style="width:161.05px;height:166.86px;position: absolute;right: 15px;"></image> |
|||
</view> |
|||
<view style="display: flex; justify-content: space-between;align-items: center;padding: 0 10px;"> |
|||
<view class="title-item flex flex-col"> |
|||
<view>设备故障率</view> |
|||
<view><text class="title-num">{{86}}%</text></view> |
|||
</view> |
|||
<view class="title-item flex flex-col"> |
|||
<view>完好率</view> |
|||
<view><text class="title-num">{{300}}%</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="title-item flex flex-col"> |
|||
<view>完好率</view> |
|||
<view><text class="title-num">{{300}}%</text></view> |
|||
<!--折线图--> |
|||
<view class="card"> |
|||
<view class="flex flex-between"> |
|||
<view class="flex flex-start"> |
|||
<image src="" class="card-img" src="/images/device5.png" /> |
|||
<view class="card-title">设备状态</view> |
|||
</view> |
|||
<view>近七天</view> |
|||
</view> |
|||
<view class="chart"> |
|||
<!-- <view>aaa</view> --> |
|||
<ec-canvas id="device-status-chart" canvas-id="device-status-chart" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="flex flex-start"> |
|||
<!-- <image src="" class="card-img" /> --> |
|||
<view class="card-img" style="background: blue;"></view> |
|||
<view class="card-title">历史风险趋势</view> |
|||
</view> |
|||
<view class="chart"> |
|||
<ec-canvas id="device-status-chart" canvas-id="device-status-chart" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
Loading…
Reference in new issue