<template>
<view class="wrap">
<view class="content-box">
<text class="title">用户与设备统计</text>
<view class="">
<view class="userbox">
<img src="../../static/index/zichan.png" alt="" srcset="">
<view class="user_content">
<view class="userbox_num">
{{userinfo.assetCount}}
</view>
<view class="userbox_name">
资产设备统计
</view>
</view>
</view>
<view class="userbox">
<img src="../../static/index/yonghu.png" alt="" srcset="">
<view class="user_content">
<view class="userbox_num">
{{userinfo.userCount}}
</view>
<view class="userbox_name">
用户数量统计
</view>
</view>
</view>
<view class="userbox">
<img src="../../static/index/bumen.png" alt="" srcset="">
<view class="user_content">
<view class="userbox_num">
{{userinfo.deptCount}}
</view>
<view class="userbox_name">
部门数量统计
</view>
</view>
</view>
<view class="userbox">
<img src="../../static/index/gangwei.png" alt="" srcset="">
<view class="user_content">
<view class="userbox_num">
{{userinfo.postCount}}
</view>
<view class="userbox_name">
岗位数量统计
</view>
</view>
</view>
</view>
</view>
<view class="content-box">
<text class="title">物联设备与测点情况统计</text>
</view>
<view class="content-box baojing">
<text class="title">报警数量统计</text>
<my-radio ref="radio1" :list="radioList1" @change="radioChange($event)" style="top: 30rpx;left: 430rpx;z-index: 99;"></my-radio>
<view class="" ref="alarmbar" id="alarmbar" style="height:400px;"></view>
</view>
<view class="content-box">
<text class="title">设备负载率统计</text>
</view>
</view>
</template>
<script >
import { ref, reactive, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
export default {
setup() {
const { proxy } = getCurrentInstance()
const userinfo = reactive({})
proxy.$request('/rexel-api/tenant/detail/user/asset', {
},"GET").then(res => {
Object.assign(userinfo, res.data)
})
const radioList1 = ['近七天','近半年']
const warnTypeActive = ref(0)
const radioChange = (e) => {
warnTypeActive.value = e
gainWarnList()
}
const gainWarnList = () => {
let url = ''
if (warnTypeActive.value === 0) {
url = '/rexel-api/tenant/detail/alarm/chart/1'
} else {
url = '/rexel-api/tenant/detail/alarm/chart/2'
}
proxy.$request(url, {
},"GET").then(res => {
console.log(res.data)
let baojingxAxis=res.data.xaxis
let baojingyAxis=res.data.yaxis
var myChart = echarts.init(document.getElementById('alarmbar'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
},
color:'#8CBDEE',
xAxis: {
data: baojingxAxis
// data: ['2022/1', '2022/2', '2022/3', '2022/4', '2022/5', '2022/6']
},
yAxis: {
// type: 'log',
type: 'value',
// 单位颜色
name: "条",
nameTextStyle: {
color: "#333",
nameLocation: "start",
},
// 坐标值颜色
"axisLabel":{
color: '#333'
// textStyle: { color: '#333'}
},
splitLine: {
show: false,
// 网格线颜色
lineStyle:{
color: ['#8E8E8E'],
width: 0.5,
type: 'solid'
}
},
},
series: [
{
name: "报警数",
type: "bar",//柱状图
// itemStyle: {
// normal: {
// barBorderRadius:[5, 5, 0, 0]
// }
// },
barWidth: 20, // 柱子宽度
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data:baojingyAxis
// data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
}
const alarmbar = ref(null)
return {
userinfo,
alarmbar,
radioChange,
gainWarnList,
radioList1,
}
},
methods:{
drawalarm() {
var myChart = echarts.init(this.$refs.alarmbar.$el);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
},
color:'#8CBDEE',
xAxis: {
data: this.baojingxAxis
// data: ['2022/1', '2022/2', '2022/3', '2022/4', '2022/5', '2022/6']
},
yAxis: {
// type: 'log',
type: 'value',
// 单位颜色
name: "条",
nameTextStyle: {
color: "#333",
nameLocation: "start",
},
// 坐标值颜色
"axisLabel":{
color: '#333'
// textStyle: { color: '#333'}
},
splitLine: {
show: false,
// 网格线颜色
lineStyle:{
color: ['#8E8E8E'],
width: 0.5,
type: 'solid'
}
},
},
series: [
{
name: "报警数",
type: "bar",//柱状图
// itemStyle: {
// normal: {
// barBorderRadius:[5, 5, 0, 0]
// }
// },
barWidth: 20, // 柱子宽度
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data:this.baojingyAxis
// data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
onShow() {
this.gainWarnList()
}
}
</script>
<style lang="scss" scoped>
.wrap{
min-height: 130vh;
}
.baojing{
position: relative;
}
.content-box{
margin: 30rpx;
padding: 15rpx;
background: #fff;
.title{
padding: 0px 15rpx ;
font-weight: bold;
color: #333333;
}
.userbox{
display: inline-block;
width: 46%;
margin: 30rpx 10rpx 0rpx 15rpx;
padding: 15rpx;
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.1);
border-radius: 4px 4px 4px 4px;
opacity: 1;
img{
width: 50rpx;
height: 50rpx;
display: inline-block;
vertical-align: middle;
}
.user_content{
vertical-align: middle;
display: inline-block;
margin-left: 30rpx;
}
.userbox_num{
color: #333;
font-size: 16rpx;
padding-bottom: 5rpx;
}
.userbox_name{
color: #999;
font-size: 16rpx;
}
}
}
.charts-box {
width: 100%;
height: 360rpx;
position: relative;
.unit {
color: #9E9EA6;
position: absolute;
font-size: 22rpx;
&:nth-child(1) {
left: 40rpx;
top: 43rpx;
}
&:nth-child(2) {
right: 40rpx;
top: 43rpx;
}
}
}
</style>
uniapp点击切换echarts数据
最新推荐文章于 2024-04-20 00:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)