1238 lines
28 KiB
Vue
1238 lines
28 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="padding-box">
|
||
<!-- <view class="loading" v-if="showloading">
|
||
<view class="loading_box">
|
||
<u-loading-icon color='#fff'></u-loading-icon>
|
||
<text>loading...</text>
|
||
</view>
|
||
</view> -->
|
||
<view class="flex-col group">
|
||
<view class="mt-14 flex-row justify-between">
|
||
</view>
|
||
</view>
|
||
<view class="mt-22 flex-col">
|
||
<view class="flex-row justify-center top-img">
|
||
<view @click="fxyujin" class="flex-col section left-card">
|
||
<!-- 左上模块 -->
|
||
<view class="flex-row">
|
||
|
||
<view class="flex-col">
|
||
<view class="flex-row self-stretch top-jinbaoqi top-jinbaoqi-top-t">
|
||
<!-- 警报灯 -->
|
||
<view class="img-lef">
|
||
<image class="shrink-0 self-center image_7" src="../../static/jinbao.png" />
|
||
<text class="self-start text_5">24H</text>
|
||
</view>
|
||
<!-- 22 -->
|
||
<text class="self-start text_3 text_4 ml-19">{{formData.warning_count == undefined ? 0 : formData.warning_count}}</text>
|
||
<!-- 左上的箭头 -->
|
||
<image class="ml-28 self-start image_8 image_9" src="../../static/shouye-you.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-jinbaoqi top-jinbaoqi-top-t">
|
||
<view class="flex-row group_3 tac-dainlaing">
|
||
<text class="font_3 text_8 padding-top-bootm">电量不足</text>
|
||
<text
|
||
:id="formData.battery_low_count < 1 ? 'color-text-shu1' : formData.battery_low_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="font_5 text_12">{{formData.battery_low_count == undefined ? 0 : formData.battery_low_count}}</text>
|
||
</view>
|
||
<view class="flex-row group_5 tac-dainlaing">
|
||
<text class="ml-30 font_3 text_9 padding-top-bootm">震动异常</text>
|
||
<text
|
||
:id="formData.shake_count < 1 ? 'color-text-shu1' : formData.shake_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="ml-68 font_5">{{formData.shake_count == undefined ? 0 : formData.shake_count}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="top-jinbaoqi top-jinbaoqi-top-t">
|
||
<view class="flex-row group_3 tac-dainlaing">
|
||
<text class="font_3 text_13 padding-top-bootm">出勤异常</text>
|
||
<text
|
||
:id="formData.work_count < 1 ? 'color-text-shu1' : formData.work_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="font_5 ml-67">{{formData.work_count== undefined ? 0 :formData.work_count}}</text>
|
||
</view>
|
||
<view class="flex-row group_5 tac-dainlaing">
|
||
<text class="font_3 ml-31 padding-top-bootm">重量异常</text>
|
||
<text
|
||
:id="formData.weight_count < 1 ? 'color-text-shu1' : formData.weight_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="font_5 text_14">{{formData.weight_count== undefined ? 0 :formData.weight_count}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="top-jinbaoqi top-jinbaoqi-top-t">
|
||
<view class="flex-row tac-dainlaing">
|
||
<text class="font_3 text_16 padding-top-bootm">温度异常</text>
|
||
<text
|
||
:id="formData.temperature_count < 1 ? 'color-text-shu1' : formData.temperature_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="font_5 text_19">{{formData.temperature_count== undefined ? 0 :formData.temperature_count}}</text>
|
||
</view>
|
||
<view class="flex-row group_7 tac-dainlaing">
|
||
<text class="font_3 text_17 ml-31 padding-top-bootm">湿度异常</text>
|
||
<text
|
||
:id="formData.humidity_count < 1 ? 'color-text-shu1' : formData.humidity_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
|
||
class="font_5 text_20 ml-61">{{formData.humidity_count== undefined? 0 :formData.humidity_count}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 右上 -->
|
||
<view class="ml-16 flex-col right-top-img left-card">
|
||
<view class="flex-col section_2 box-rie">
|
||
<!-- 房子图片 -->
|
||
<view class="flex-row group_2 top-img">
|
||
<view class="flex-col items-center tac-dainlaing">
|
||
<image class="shrink-0 " style="width: 80rpx;height: 102rpx;"
|
||
src="../../static/fx11.png" mode=""></image>
|
||
<!-- <image class="shrink-0 image_6" src="../../static/shouye-fangzi-shang.png" />
|
||
<image class="shrink-0 image_11" src="../../static/shouye-fangzi-xia.png" /> -->
|
||
</view>
|
||
<image class="ml-90 self-start image_8 image_10" src="../../static/shouye-you.png" />
|
||
</view>
|
||
|
||
<view class="top-jinbaoqi" @click="topage(1)">
|
||
<view class="mt-8 flex-row tac-dainlaing">
|
||
<text class="font text_6 padding-top-bootm">蜂箱数量</text>
|
||
<text class="self-center font_4 text_3 text_10">{{formData.beehive_count==undefined?0:formData.beehive_count}}</text>
|
||
|
||
</view>
|
||
<view class="mt-8 flex-row tac-dainlaing">
|
||
<text
|
||
class="ml-30 font_2 text_7 padding-top-bootm">在线：{{formData.beehive_online_count == undefined ? 0 : formData.beehive_online_count}}</text>
|
||
<text
|
||
class="self-start font_2 text_11 ml-39 ">离线：{{formData.beehive_offline_count == undefined ? 0 : formData.beehive_offline_count}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex-col section_2 mt-13 box-rie top-jinbaoqi" @click="topage(2)">
|
||
<!-- 左 -->
|
||
<view class="flex-row items-center tac-dainlaing">
|
||
<image class="image_12" src="../../static/shouye-fangchang-shuliang.png" />
|
||
<text class="font padding-top-bootm">蜂场数量</text>
|
||
<text class="font_4 text_3 text_10 padding-top-bootm">{{formData.apiary_count==undefined?0:formData.apiary_count}}</text>
|
||
</view>
|
||
<!-- 右 -->
|
||
<view class="ml-18 flex-col items-end">
|
||
<view class="right-jainto">
|
||
<image class="image_8 image_13 padding-top-bootm"
|
||
src="../../static/shouye-you.png" />
|
||
<!-- </view>
|
||
<text class="font_2 text_15 mt-13 hg-num" v-for="item in formData.apiary_data" :key="item.id">{{item.name}}：{{item.count}}</text>
|
||
</view> -->
|
||
</view>
|
||
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[0]">
|
||
<view>{{formData.apiary_data[0].name==undefined?0:formData.apiary_data[0].name}}</view>
|
||
<view class="taxt-wen">：</view>
|
||
<view class="taxt-wen-1">{{formData.apiary_data[0].count==undefined?0:formData.apiary_data[0].count}}</view>
|
||
</view>
|
||
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[1]">
|
||
<view>{{formData.apiary_data[1].name==undefined?0:formData.apiary_data[1].name}}</view>
|
||
<view class="taxt-wen">：</view>
|
||
<view class="taxt-wen-1">{{formData.apiary_data[1].count==undefined?0:formData.apiary_data[1].count}}</view>
|
||
</view>
|
||
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[2]">
|
||
<view>{{formData.apiary_data[2].name==undefined?0:formData.apiary_data[2].name}}</view>
|
||
<view class="taxt-wen">：</view>
|
||
<view class="taxt-wen-1">{{formData.apiary_data[2].count==undefined?0:formData.apiary_data[2].count}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卡片图表 -->
|
||
<!-- 柱状 -->
|
||
<view class="xin-box" style="margin-top: 20rpx;">
|
||
<view class="xin-box-title" @click="chuqingbianhua" v-if="logoflag">
|
||
<view style="flex: 1;display: flex;align-items: center;">
|
||
<image style="width: 40rpx;height: 40rpx;"
|
||
src="../../static/e5e18447349367492c81f64ccec7ebcb.png"></image>
|
||
<text style="margin-left: 10rpx;">近7天蜜蜂总出勤变化</text>
|
||
</view>
|
||
<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
|
||
</view>
|
||
<view class="charts-box" >
|
||
<qiun-data-charts v-if="logoflag" type="column" :opts="optsZhu" :chartData="chartDataZhu" :errorShow="false" :errorReload="false" :animation="false" :tooltipShow="false" :tapLegend="false" />
|
||
<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...
|
||
<view @click="djdl" style="width: 200rpx;height: 80rpx;text-align: center;line-height: 80rpx;background-color: #3CA272;margin: auto;margin-top: 30rpx;border-radius: 30rpx;color: #fff;padding: 0rpx 20rpx;box-sizing: border-box;">点击登录</view> </view>
|
||
</view>
|
||
</view>
|
||
<!-- 折线 -->
|
||
<view class="xin-box" v-if="logoflag">
|
||
<view class="xin-box-title" @click="zhongliangbianhua" v-if="logoflag">
|
||
<view style="flex: 1;display: flex;align-items: center;">
|
||
<image style="width: 40rpx;height: 40rpx;" src="../../static/kg.png"></image>
|
||
<text style="margin-left: 10rpx;">近7天蜂箱总重量变化(KG)</text>
|
||
</view>
|
||
<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
|
||
</view>
|
||
<view class="charts-box">
|
||
<qiun-data-charts v-if="logoflag" type="line" :opts="optsZhe" :chartData="chartDataZhe" :animation="false" :tooltipShow="false" :tapLegend="false" />
|
||
<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import share from "uview-ui/libs/mixin/mpShare.js"
|
||
import request from '../../utils/request'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
logoflag:true,
|
||
showloading: false,
|
||
uchartsData: {}, // ucharts 数据
|
||
formData: {}, // 上方三个盒子的数据
|
||
// 折线图
|
||
chartDataZhe: {},
|
||
optsZhe: {
|
||
timing: "easeOut",
|
||
duration: 1000,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: [0, 0, 0, 0],
|
||
fontSize: 12,
|
||
fontColor: "#666666",
|
||
dataLabel: false,
|
||
dataPointShape: false,
|
||
dataPointShapeType: "solid",
|
||
touchMoveLimit: 60,
|
||
enableScroll: false,
|
||
enableMarkLine: false,
|
||
legend: {
|
||
show: true,
|
||
position: "top",
|
||
float: "right",
|
||
padding: 5,
|
||
margin: 5,
|
||
backgroundColor: "rgba(0,0,0,0)",
|
||
borderColor: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
fontSize: 12,
|
||
fontColor: "#666666",
|
||
lineHeight: 11,
|
||
hiddenColor: "#CECECE",
|
||
itemGap: 20
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
disabled: false,
|
||
axisLine: true,
|
||
axisLineColor: "#CCCCCC",
|
||
calibration: false,
|
||
fontColor: "#666666",
|
||
fontSize: 12,
|
||
lineHeight: 20,
|
||
marginTop: 0,
|
||
rotateLabel: false,
|
||
rotateAngle: 45,
|
||
itemCount: 5,
|
||
boundaryGap: "center",
|
||
splitNumber: 5,
|
||
gridColor: "#CCCCCC",
|
||
gridType: "solid",
|
||
dashLength: 4,
|
||
gridEval: 1,
|
||
scrollShow: false,
|
||
scrollAlign: "left",
|
||
scrollColor: "#A6A6A6",
|
||
scrollBackgroundColor: "#EFEBEF",
|
||
title: "",
|
||
titleFontSize: 13,
|
||
titleOffsetY: 0,
|
||
titleOffsetX: 0,
|
||
titleFontColor: "#666666",
|
||
format: ""
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "curve",
|
||
width: 2,
|
||
activeType: "hollow",
|
||
linearType: "none",
|
||
onShadow: false,
|
||
animation: "vertical"
|
||
},
|
||
tooltip: {
|
||
showBox: true,
|
||
showArrow: true,
|
||
showCategory: false,
|
||
borderWidth: 0,
|
||
borderRadius: 0,
|
||
borderColor: "#000000",
|
||
borderOpacity: 0.7,
|
||
bgColor: "#000000",
|
||
bgOpacity: 0.7,
|
||
gridType: "solid",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
boxPadding: 3,
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
fontColor: "#FFFFFF",
|
||
legendShow: true,
|
||
legendShape: "auto",
|
||
splitLine: true,
|
||
horizentalLine: false,
|
||
xAxisLabel: false,
|
||
yAxisLabel: false,
|
||
labelBgColor: "#FFFFFF",
|
||
labelBgOpacity: 0.7,
|
||
labelFontColor: "#666666"
|
||
},
|
||
markLine: {
|
||
type: "solid",
|
||
dashLength: 4,
|
||
data: []
|
||
}
|
||
}
|
||
},
|
||
// 柱状图
|
||
chartDataZhu: {},
|
||
optsZhu: {
|
||
timing: "linear",
|
||
duration: 1000,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ["#89c28c", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: [0, 0, 0, 0],
|
||
fontSize: 13,
|
||
fontColor: "#666666",
|
||
dataLabel: false,
|
||
dataPointShape: false,
|
||
dataPointShapeType: "solid",
|
||
touchMoveLimit: 60,
|
||
enableScroll: false,
|
||
enableMarkLine: false,
|
||
legend: {
|
||
show: false,
|
||
position: "bottom",
|
||
float: "center",
|
||
padding: 5,
|
||
margin: 5,
|
||
backgroundColor: "rgba(0,0,0,0)",
|
||
borderColor: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
fontSize: 13,
|
||
fontColor: "#666666",
|
||
lineHeight: 11,
|
||
hiddenColor: "#CECECE",
|
||
itemGap: 10
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
disabled: false,
|
||
axisLine: false,
|
||
axisLineColor: "#CCCCCC",
|
||
calibration: false,
|
||
fontColor: "#666666",
|
||
fontSize: 10,
|
||
lineHeight: 20,
|
||
marginTop: 10,
|
||
rotateLabel: false,
|
||
rotateAngle: 45,
|
||
itemCount: 5,
|
||
boundaryGap: "center",
|
||
splitNumber: 5,
|
||
gridColor: "#CCCCCC",
|
||
gridType: "dash",
|
||
dashLength: 4,
|
||
gridEval: 1,
|
||
scrollShow: false,
|
||
scrollAlign: "left",
|
||
scrollColor: "#A6A6A6",
|
||
scrollBackgroundColor: "#EFEBEF",
|
||
title: "",
|
||
titleFontSize: 13,
|
||
titleOffsetY: 0,
|
||
titleOffsetX: 0,
|
||
titleFontColor: "#666666",
|
||
format: ""
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
min: 0,
|
||
disabled: false,
|
||
axisLine: false,
|
||
position: "left",
|
||
calibration: false,
|
||
title: "",
|
||
textAlign: "left",
|
||
titleFontSize: 13,
|
||
max: null,
|
||
format: "",
|
||
titleOffsetY: 0,
|
||
titleOffsetX: 0,
|
||
type: "value"
|
||
}],
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridType: "dash",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
padding: 10,
|
||
showTitle: true
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: 20,
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
seriesGap: 2,
|
||
categoryGap: 3,
|
||
barBorderCircle: false,
|
||
barBorderRadius: [
|
||
50,
|
||
50,
|
||
50,
|
||
50
|
||
],
|
||
linearType: "none",
|
||
linearOpacity: 1,
|
||
colorStop: 0,
|
||
meterBorder: 1,
|
||
meterFillColor: "#FFFFFF",
|
||
labelPosition: "outside"
|
||
},
|
||
tooltip: {
|
||
showBox: false,
|
||
showArrow: false,
|
||
showCategory: false,
|
||
borderWidth: 0,
|
||
borderRadius: 0,
|
||
borderColor: "#000000",
|
||
borderOpacity: 0.7,
|
||
bgColor: "#000000",
|
||
bgOpacity: 0.7,
|
||
gridType: "solid",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
boxPadding: 3,
|
||
fontSize: 13,
|
||
lineHeight: 20,
|
||
fontColor: "#FFFFFF",
|
||
legendShow: true,
|
||
legendShape: "auto",
|
||
splitLine: true,
|
||
horizentalLine: false,
|
||
xAxisLabel: false,
|
||
yAxisLabel: false,
|
||
labelBgColor: "#FFFFFF",
|
||
labelBgOpacity: 0.7,
|
||
labelFontColor: "#666666"
|
||
},
|
||
markLine: {
|
||
type: "solid",
|
||
dashLength: 4,
|
||
data: []
|
||
}
|
||
}
|
||
},
|
||
tokenflag: false
|
||
};
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
//分享
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: "苏他数字蜂箱 首页",
|
||
};
|
||
},
|
||
onShow() {
|
||
this.cheshi();
|
||
this.intervalId = setInterval(() => {
|
||
this.cheshi();
|
||
}, 5000);
|
||
this.getServerDataZhe();
|
||
this.getServerDataZhu();
|
||
},
|
||
mounted() {},
|
||
onHide() {
|
||
// Clear the interval when the component is destroyed
|
||
clearInterval(this.intervalId);
|
||
},
|
||
methods: {
|
||
djdl(){
|
||
uni.navigateTo({
|
||
url:'/pages/login/index'
|
||
})
|
||
},
|
||
topage(num) {
|
||
if (this.tokenflag == true) {
|
||
if (num == 1) {
|
||
uni.switchTab({
|
||
url: '/pages/fengxiang/index'
|
||
});
|
||
} else if (num == 2) {
|
||
uni.switchTab({
|
||
url: '/pages/fengchang/index'
|
||
});
|
||
}
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/pages/login/index'
|
||
})
|
||
}
|
||
|
||
},
|
||
// 图表数据请求
|
||
async echartsFn() {
|
||
this.showloading = true
|
||
await request.get('/api/index/statistics', ).then(res => {
|
||
if (res.code == 401) {
|
||
this.showloading = false
|
||
this.tokenflag = false
|
||
} else {
|
||
this.uchartsData = {
|
||
...res.data.data
|
||
}
|
||
this.tokenflag = true
|
||
}
|
||
this.showloading = false
|
||
})
|
||
// this.showloading=true
|
||
// const eres = await request.get('/api/index/statistics') // echarts数据
|
||
|
||
|
||
},
|
||
// 数据请求
|
||
async cheshi() {
|
||
try {
|
||
const res = await request.get('/api/index') // 基本数据
|
||
console.log(res)
|
||
// console.log(eres,'图')
|
||
this.formData = {
|
||
...res.data.data
|
||
}
|
||
this.logoflag = true
|
||
// console.log(this.formData,'101010')
|
||
} catch (error) {
|
||
this.logoflag = false
|
||
// setTimeout(()=> {
|
||
// wx.navigateTo({
|
||
// url: '/pages/login/index'
|
||
// })
|
||
// },10000)
|
||
|
||
// console.log(error)
|
||
}
|
||
},
|
||
// 跳转预警
|
||
fxyujin() {
|
||
// console.log("风向预警");
|
||
if (this.tokenflag == true) {
|
||
uni.navigateTo({
|
||
url: "/pagesFengXiang/pages/fengxiang-yujin/index"
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/pages/login/index'
|
||
})
|
||
}
|
||
|
||
},
|
||
// 跳转折线图
|
||
zhongliangbianhua() {
|
||
|
||
if (this.tokenflag == true) {
|
||
wx.navigateTo({
|
||
url: '../echartszhe/index'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/pages/login/index'
|
||
})
|
||
}
|
||
},
|
||
// 跳转柱状图
|
||
chuqingbianhua() {
|
||
if (this.tokenflag == true) {
|
||
wx.navigateTo({
|
||
url: '../echartszhu/index'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/pages/login/index'
|
||
})
|
||
}
|
||
|
||
},
|
||
// 图表数据
|
||
// 折线
|
||
async getServerDataZhe() {
|
||
await this.echartsFn()
|
||
//模拟从服务器获取数据时的延时
|
||
setTimeout(async () => {
|
||
// console.log(this.uchartsData)
|
||
if(this.uchartsData != ''){
|
||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||
let res = {
|
||
categories: [...this.uchartsData.weight_statistics.xData.slice(-7)],
|
||
series: [{
|
||
name: "总重量",
|
||
data: [...this.uchartsData.weight_statistics.yData.slice(-7)]
|
||
},
|
||
{
|
||
name: "日增量",
|
||
data: [...this.uchartsData.weight_statistics.yData_day.slice(-7)]
|
||
}
|
||
]
|
||
};
|
||
this.chartDataZhe = JSON.parse(JSON.stringify(res));
|
||
}else{
|
||
let res = {
|
||
categories: [],
|
||
series: [{
|
||
name: "",
|
||
data: []
|
||
},
|
||
{
|
||
name: "",
|
||
data: []
|
||
}
|
||
]
|
||
};
|
||
this.chartDataZhe = JSON.parse(JSON.stringify(res));
|
||
}
|
||
|
||
}, 500);
|
||
},
|
||
// 柱状
|
||
async getServerDataZhu() {
|
||
await this.echartsFn()
|
||
//模拟从服务器获取数据时的延时
|
||
setTimeout(() => {
|
||
if(this.uchartsData != ''){
|
||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||
let res = {
|
||
categories: [...this.uchartsData.work_count_statistics.xData.slice(-7)], // X 轴
|
||
series: [{
|
||
name: "目标值",
|
||
data: [...this.uchartsData.work_count_statistics.yData.slice(-
|
||
7)] // Y 轴
|
||
}]
|
||
};
|
||
|
||
this.chartDataZhu = JSON.parse(JSON.stringify(res));
|
||
console.log(this.chartDataZhu, '柱状图数据');
|
||
}else{
|
||
let res = {
|
||
categories: [], // X 轴
|
||
series: [{
|
||
name: "",
|
||
data: [] // Y 轴
|
||
}]
|
||
};
|
||
this.chartDataZhu = JSON.parse(JSON.stringify(res));
|
||
}
|
||
|
||
}, 500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.loading {
|
||
z-index: 10074;
|
||
width: 224rpx;
|
||
height: 224rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.loading_box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
image {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
display: block;
|
||
}
|
||
|
||
text {
|
||
margin-top: 12rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
display: block;
|
||
font-size: 24rpx;
|
||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
line-height: 24rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.items-end {
|
||
text-align: right;
|
||
}
|
||
|
||
// 图标的样式
|
||
.charts-box {
|
||
width: 100%;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.charts-h {
|
||
height: 100%;
|
||
}
|
||
|
||
// 卡片盒子
|
||
.xin-box {
|
||
// height: 300rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.xin-box-title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.text-wen {
|
||
width: 15rpx;
|
||
}
|
||
|
||
#color-text-shu1 {
|
||
color: #89c28c;
|
||
}
|
||
|
||
#color-text-shu2 {
|
||
color: #ff8f19;
|
||
}
|
||
|
||
#color-text-shu3 {
|
||
color: #ff5733;
|
||
}
|
||
|
||
.padding-box {
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.right-jainto {
|
||
padding-bottom: 20rpx;
|
||
// text-align: right;
|
||
padding-left: 120rpx;
|
||
}
|
||
|
||
.hg-num {
|
||
margin: 10rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.taxt-wen {
|
||
flex: 1;
|
||
}
|
||
|
||
.taxt-wen-1 {
|
||
width: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.padding-top-bootm {
|
||
margin: 18rpx 0;
|
||
}
|
||
|
||
.tac-dainlaing {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-img {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.right-top-img {
|
||
width: 40%;
|
||
}
|
||
|
||
.left-card {
|
||
width: 45%;
|
||
border-radius: 5%;
|
||
}
|
||
|
||
.box-rie {
|
||
border-radius: 5%;
|
||
}
|
||
|
||
.top-jinbaoqi {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.top-jinbaoqi-top-t {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.img-lef {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.page {
|
||
height: 100%;
|
||
width: 100%;
|
||
top: 0px;
|
||
bottom: 0px;
|
||
background-color: #f7f7f7;
|
||
padding: 36rpx 0rpx 10rpx;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
|
||
.group {
|
||
padding-left: 40rpx;
|
||
|
||
.text {
|
||
color: #7d7d7d;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN;
|
||
font-weight: 700;
|
||
line-height: 21.5rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 34rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.image_2 {
|
||
width: 30rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 48rpx;
|
||
height: 22.66rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.text_2 {
|
||
color: #000000;
|
||
font-size: 36rpx;
|
||
font-family: AlibabaPuHuiTi;
|
||
line-height: 33.52rpx;
|
||
}
|
||
|
||
.image_5 {
|
||
filter: drop-shadow(0rpx 4rpx 4rpx #00000040);
|
||
border-radius: 120rpx;
|
||
width: 158rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.section {
|
||
padding: 16rpx 20rpx 16rpx 28rpx;
|
||
background-color: #ffffff;
|
||
height: 426rpx;
|
||
|
||
.image_7 {
|
||
width: 76rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.text_4 {
|
||
margin-top: 24rpx;
|
||
color: #ff5733;
|
||
font-size: 72rpx;
|
||
line-height: 51.9rpx;
|
||
}
|
||
|
||
.text_5 {
|
||
margin-left: 12rpx;
|
||
margin-top: 10rpx;
|
||
color: #ff8d1a;
|
||
font-size: 28rpx;
|
||
line-height: 20.18rpx;
|
||
}
|
||
|
||
.image_9 {
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.group_3 {
|
||
padding: 0 4rpx;
|
||
|
||
.text_8 {
|
||
line-height: 22.04rpx;
|
||
}
|
||
|
||
.text_9 {
|
||
line-height: 22.22rpx;
|
||
}
|
||
}
|
||
|
||
.view {
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.group_5 {
|
||
|
||
// margin-top: 20rpx;
|
||
// padding: 0 40rpx;
|
||
.text_12 {
|
||
color: #89c28c;
|
||
line-height: 29.22rpx;
|
||
}
|
||
|
||
// .text_14 {
|
||
// line-height: 28.44rpx;
|
||
// }
|
||
}
|
||
|
||
.view_2 {
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.group_6 {
|
||
margin-top: 28rpx;
|
||
|
||
.text_16 {
|
||
line-height: 22.28rpx;
|
||
}
|
||
|
||
.text_17 {
|
||
line-height: 22.28rpx;
|
||
}
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 24rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 22.18rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.group_7 {
|
||
|
||
// margin-top: 20rpx;
|
||
// padding: 0 28rpx;
|
||
.text_19 {
|
||
color: #ff5733;
|
||
}
|
||
|
||
.text_20 {
|
||
line-height: 28.58rpx;
|
||
}
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 40rpx;
|
||
line-height: 28.82rpx;
|
||
}
|
||
}
|
||
|
||
.section_2 {
|
||
margin-bottom: 23rpx;
|
||
padding: 8rpx 16rpx 16rpx 24rpx;
|
||
background-color: #ffffff;
|
||
|
||
.group_2 {
|
||
padding-left: 12rpx;
|
||
|
||
.image_6 {
|
||
width: 70rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.image_11 {
|
||
margin-top: -8rpx;
|
||
width: 54rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.image_10 {
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
.font {
|
||
font-size: 24rpx;
|
||
font-family: Nunito;
|
||
line-height: 22.18rpx;
|
||
font-weight: 600;
|
||
color: #42484a;
|
||
}
|
||
|
||
.text_6 {
|
||
line-height: 22.24rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 24rpx;
|
||
font-family: Nunito;
|
||
line-height: 22.18rpx;
|
||
font-weight: 600;
|
||
color: #888888;
|
||
}
|
||
|
||
.text_7 {
|
||
color: #23693f;
|
||
line-height: 22.06rpx;
|
||
}
|
||
|
||
.group_4 {
|
||
padding: 0 16rpx;
|
||
|
||
.text_11 {
|
||
line-height: 22.22rpx;
|
||
}
|
||
}
|
||
|
||
.image_12 {
|
||
width: 80rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.image_13 {
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
font-size: 22rpx;
|
||
line-height: 20.3rpx;
|
||
}
|
||
|
||
.text_18 {
|
||
font-size: 22rpx;
|
||
line-height: 20.28rpx;
|
||
}
|
||
|
||
.group_8 {
|
||
padding-left: 36rpx;
|
||
|
||
.text_21 {
|
||
font-size: 22rpx;
|
||
line-height: 20.24rpx;
|
||
}
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 40rpx;
|
||
font-family: AlimamaShuHeiTi;
|
||
line-height: 28.82rpx;
|
||
color: #23693f;
|
||
}
|
||
|
||
.text_10 {
|
||
line-height: 29.04rpx;
|
||
}
|
||
}
|
||
|
||
.image_8 {
|
||
width: 18rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.group_9 {
|
||
padding-bottom: 30rpx;
|
||
|
||
.view_3 {
|
||
margin: 0 16rpx;
|
||
}
|
||
|
||
.image_17 {
|
||
width: 36rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 74rpx;
|
||
}
|
||
|
||
.image_18 {
|
||
opacity: 0.1;
|
||
filter: blur(1rpx);
|
||
width: 104rpx;
|
||
height: 322rpx;
|
||
}
|
||
|
||
.pos_3 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 30rpx;
|
||
}
|
||
|
||
.image_16 {
|
||
width: 134rpx;
|
||
height: 340rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
.group_10 {
|
||
overflow: hidden;
|
||
|
||
.view_4 {
|
||
margin: 0 14rpx;
|
||
}
|
||
|
||
.image-wrapper {
|
||
background-image: url('https://ide.code.fun/api/image?token=655ec7f0fcfbac0011348c61&name=0846bd627e035104ba6a5edd32fd7538.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 58rpx;
|
||
|
||
.image_20 {
|
||
width: 60rpx;
|
||
height: 346rpx;
|
||
}
|
||
}
|
||
|
||
.pos_4 {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.image_22 {
|
||
opacity: 0.5;
|
||
width: 44rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.pos_5 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 46.38rpx;
|
||
}
|
||
}
|
||
|
||
.section_3 {
|
||
padding: 10rpx 20rpx 0 38rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 30rpx;
|
||
|
||
.image_14 {
|
||
width: 42rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 30rpx;
|
||
font-family: HarmonyOSSansSC;
|
||
line-height: 28.82rpx;
|
||
color: #42484a;
|
||
}
|
||
|
||
.text_22 {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
.text_23 {
|
||
line-height: 28.42rpx;
|
||
}
|
||
|
||
.image_15 {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.image_19 {
|
||
margin-left: 52rpx;
|
||
width: 22rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.image_21 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.text_24 {
|
||
margin-left: 16rpx;
|
||
margin-top: 12rpx;
|
||
line-height: 28.36rpx;
|
||
}
|
||
|
||
.section_4 {
|
||
margin-left: 12rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #89c28c;
|
||
border-radius: 50%;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
}
|
||
|
||
.font_7 {
|
||
font-size: 20rpx;
|
||
font-family: HarmonyOSSansSC;
|
||
}
|
||
|
||
.text_25 {
|
||
margin-top: 16rpx;
|
||
color: #89c28c;
|
||
line-height: 18.18rpx;
|
||
}
|
||
|
||
.section_5 {
|
||
margin-top: 20rpx;
|
||
background-color: #23693f;
|
||
border-radius: 50%;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
}
|
||
|
||
.text_26 {
|
||
margin-left: 4rpx;
|
||
margin-top: 16rpx;
|
||
color: #23693f;
|
||
line-height: 18.66rpx;
|
||
}
|
||
|
||
.image_23 {
|
||
margin-left: 56rpx;
|
||
width: 22rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |