|
|
@@ -0,0 +1,663 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+ <!-- 上面要素值 -->
|
|
|
+ <view :class="`bigBox ${show ? 'bigOpen' : ''}`">
|
|
|
+ <view class="topInfo">
|
|
|
+ <u-row gutter="10">
|
|
|
+ <u-col span="3" v-for="item in ElementList">
|
|
|
+ <view class="item">
|
|
|
+ <view>{{item.value}}</view>
|
|
|
+ <view>{{item.unit}}</view>
|
|
|
+ <view>{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <view class="readmore" v-if="!show" @click="show=true;getHistoryData()">
|
|
|
+ 查看详情<u-icon name="arrow-down" color="#93FFDE" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 统计图 -->
|
|
|
+ <view class="hisBox" v-show="show">
|
|
|
+ <view class="axiosBox">
|
|
|
+ <view class="title">
|
|
|
+ 历史数据
|
|
|
+ </view>
|
|
|
+ <view class="histimeBox">
|
|
|
+ <u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
|
|
|
+ <view class="time" @click="calendarshow = true">{{historyTime.startDate ? historyTime.startDate : '开始'}}</view>
|
|
|
+ <view class="">至</view>
|
|
|
+ <view class="time" @click="calendarshow = true">{{historyTime.endDate ? historyTime.endDate : '结束'}}</view>
|
|
|
+ <u-icon name="close-circle" color="#C1C1C1" size="28" @click="historyTime={};getHistoryData()" v-if="historyTime.startDate"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="calendarshow" mode="range" @change="changeDate"></u-calendar>
|
|
|
+ <view class="chartBox">
|
|
|
+ <canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
|
|
|
+ @touchstart="touchLineA($event)" @touchmove="moveLineA($event)"
|
|
|
+ @touchend="touchEndLineA($event)"></canvas>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="readmore" @click="show=false">
|
|
|
+ 收起详情<u-icon name="arrow-up" color="#14A478" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 历史记录弹框 -->
|
|
|
+ <u-tabs :list="list" active-color="#14A478" bar-width="300" :is-scroll="false" :current="current"
|
|
|
+ @change="change"></u-tabs>
|
|
|
+ <!-- 设备图 -->
|
|
|
+ <view class="devicePhoto" v-if="current == 0">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 操作记录 -->
|
|
|
+ <view class="consoleList" v-else>
|
|
|
+ <view class="histimeBox">
|
|
|
+ <u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
|
|
|
+ <view class="time" @click="consoleshow = true">{{consoleTime.startDate ? consoleTime.startDate : '开始'}}</view>
|
|
|
+ <view class="">至</view>
|
|
|
+ <view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}</view>
|
|
|
+ <u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime" v-if="consoleTime.startDate"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar>
|
|
|
+ <view class="tableList tableTitle">
|
|
|
+ <view>设备名称</view>
|
|
|
+ <view>操作内容</view>
|
|
|
+ <view>操作时间</view>
|
|
|
+ </view>
|
|
|
+ <view class="tableList" v-for="item in tableData" :key="item.uptime">
|
|
|
+ <view>{{item.device_name}}</view>
|
|
|
+ <view>{{item.operation_content}}</view>
|
|
|
+ <view>{{item.uptime}}</view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="status" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ var canvaColumnA = null;
|
|
|
+ var canvasRing = null;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ device_id: '',
|
|
|
+ mainBeng: false,
|
|
|
+ feiBeng: false,
|
|
|
+ calendarshow: false,
|
|
|
+ historyTime: {},
|
|
|
+ cWidth: '350',
|
|
|
+ cHeight: '350',
|
|
|
+ pixelRatio: 1,
|
|
|
+ facilityvalve: [],
|
|
|
+ ElementList: [],
|
|
|
+ typename: [
|
|
|
+ "-",
|
|
|
+ "风机",
|
|
|
+ "水泵",
|
|
|
+ "增氧机",
|
|
|
+ "湿帘",
|
|
|
+ "遮阳",
|
|
|
+ "开窗",
|
|
|
+ "保温",
|
|
|
+ "投食机",
|
|
|
+ ],
|
|
|
+ show: false,
|
|
|
+ list: [{
|
|
|
+ name: '设备控制'
|
|
|
+ }, {
|
|
|
+ name: '操作记录'
|
|
|
+ }],
|
|
|
+ current: 1,
|
|
|
+ consoleshow: false,
|
|
|
+ consoleTime: {},
|
|
|
+ tableData: [],
|
|
|
+ page: 1,
|
|
|
+ total: 0,
|
|
|
+ status: 'loadmore'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择日期
|
|
|
+ changeDate(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.historyTime = e;
|
|
|
+ this.getHistoryData()
|
|
|
+ },
|
|
|
+ // 绘制折线图
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvaColumnA = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量，默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条，默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineA(e) {
|
|
|
+ // console.log(e)
|
|
|
+ canvaColumnA.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ canvaColumnA.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ canvaColumnA.touchLegend(e);
|
|
|
+ // canvaColumnA.showToolTip(e);
|
|
|
+ canvaColumnA.scrollEnd(e);
|
|
|
+ //下面是toolTip事件，如果滚动后不需要显示，可不填写
|
|
|
+ canvaColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 时间戳转换
|
|
|
+ timestampToDateTime(timestamp) {
|
|
|
+ var date = new Date(timestamp * 1000); // 将时间戳转换为毫秒并创建一个日期对象
|
|
|
+ var year = date.getFullYear(); // 获取年份
|
|
|
+ var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
|
|
|
+ var day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
|
|
|
+ return year + '-' + month + '-' + day;
|
|
|
+ },
|
|
|
+ // 历史数据
|
|
|
+ async getHistoryData() {
|
|
|
+ const {
|
|
|
+ historyTime
|
|
|
+ } = this;
|
|
|
+ let begin = historyTime.startDate ? new Date(historyTime.startDate).getTime() / 1000 : '';
|
|
|
+ let end = historyTime.endDate ? new Date(historyTime.endDate).getTime() / 1000 : '';
|
|
|
+ //折线图数据
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=weather.weather.sf_data_chart",
|
|
|
+ data: {
|
|
|
+ device_id: this.device_id,
|
|
|
+ begin: begin,
|
|
|
+ end: end,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+ var conf = res.conf.eleName;
|
|
|
+ var dat = res.dat;
|
|
|
+ //console.log(dat);
|
|
|
+ conf = conf.split("/");
|
|
|
+ // var arr1 = [];
|
|
|
+ var regroupData = []; //重组数据
|
|
|
+ let options = [];
|
|
|
+ var timeList = [];
|
|
|
+ for (var i = 0; i < conf.length; i++) {
|
|
|
+ // var arr = [];
|
|
|
+ if (conf[i] != "-") {
|
|
|
+ var optionobj = {};
|
|
|
+ optionobj.value = i;
|
|
|
+ optionobj.label = conf[i];
|
|
|
+ options.push(optionobj);
|
|
|
+ var reddata = [];
|
|
|
+ dat.forEach((item, index) => {
|
|
|
+ if (timeList.length < dat.length) {
|
|
|
+ timeList.push(this.timestampToDateTime(item.uptime));
|
|
|
+ }
|
|
|
+ var status = item.device_status.split(",");
|
|
|
+ // //console.log(status);
|
|
|
+ var arr = [];
|
|
|
+ for (var j = 0; j < status.length; j++) {
|
|
|
+ if (status[j].indexOf("e") + 1) {
|
|
|
+ arr.push(status[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // //console.log(arr)
|
|
|
+ var dataobj = {};
|
|
|
+ for (var k = 0; k < arr.length; k++) {
|
|
|
+ var indexs = arr[k].indexOf(":");
|
|
|
+ // //console.log(arr[k])
|
|
|
+ if (k == 0) {
|
|
|
+ dataobj[arr[k].slice(1, indexs).trim()] = arr[k]
|
|
|
+ .substr(indexs + 1)
|
|
|
+ .trim();
|
|
|
+ } else {
|
|
|
+ dataobj[arr[k].slice(0, indexs).trim()] = arr[k]
|
|
|
+ .substr(indexs + 1)
|
|
|
+ .trim();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // //console.log(dataobj)
|
|
|
+ for (var key in dataobj) {
|
|
|
+ // //console.log(i)
|
|
|
+ var str = "'e" + (i + 1) + "'";
|
|
|
+ // //console.log(key,str);
|
|
|
+ if (key == str) {
|
|
|
+ if (Number(dataobj[key]) == 32767) {
|
|
|
+ // reddata.push([]);
|
|
|
+ } else {
|
|
|
+ reddata.push(Number(dataobj[key]));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ regroupData.push({
|
|
|
+ name: conf[i],
|
|
|
+ type: "spline",
|
|
|
+ fillColor: {
|
|
|
+ linearGradient: [0, 0, 0, 300],
|
|
|
+ },
|
|
|
+ data: reddata,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(timeList);
|
|
|
+ this.showColumn('canvasColumnA', timeList, regroupData)
|
|
|
+ },
|
|
|
+ // 切换选项卡
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ // 获取要素实时数据
|
|
|
+ async getElmentInfo() {
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=xphsp.views.device_elements",
|
|
|
+ data: {
|
|
|
+ device_id: this.device_id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ var conf = res.conf.eleName.split('/');
|
|
|
+ var dataList = res.data;
|
|
|
+ if (dataList.length == 0) return
|
|
|
+ this.ElementList = [];
|
|
|
+ conf.forEach((item, index) => {
|
|
|
+ let obj = {}
|
|
|
+ if (item == '-') return
|
|
|
+ obj.name = item;
|
|
|
+ let valList = dataList[0].device_data[`e${index + 1}`].split('#');
|
|
|
+ obj.value = valList[0];
|
|
|
+ obj.unit = valList[1];
|
|
|
+ obj.time = dataList[0].uptime;
|
|
|
+ this.ElementList.push(obj)
|
|
|
+ })
|
|
|
+ // console.log(this.ElementList)
|
|
|
+ },
|
|
|
+ async getEquipstatus() {
|
|
|
+ this.facilityvalve = [];
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=xphsp.views.device_info",
|
|
|
+ data: {
|
|
|
+ device_id: this.device_id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ var conf = res.conf.relayName;
|
|
|
+ var dataobj = res.device_status;
|
|
|
+ var relayNum = res.conf.relayNum;
|
|
|
+ var arr = [];
|
|
|
+
|
|
|
+ function numberToArray(number) {
|
|
|
+ // 将数字转换为字符串
|
|
|
+ let numString = number.toString();
|
|
|
+
|
|
|
+ // 创建一个空数组，用于存储结果
|
|
|
+ let result = [];
|
|
|
+
|
|
|
+ // 遍历字符串的每个字符，并将其转换为对应的数字
|
|
|
+ for (let i = 0; i < numString.length; i++) {
|
|
|
+ result.push(parseInt(numString.charAt(i)));
|
|
|
+ }
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ for (var i = 0; i < dataobj.length; i++) {
|
|
|
+ // if (offobj[i].indexOf("j") + 1) {
|
|
|
+ arr.push(offobj[i]);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ conf = conf.split("/");
|
|
|
+ relayNum = relayNum.split("/");
|
|
|
+ var arr1 = [];
|
|
|
+ var reg = /\d/;
|
|
|
+ let totalP = Math.ceil((conf.length) / 32); //总圈数
|
|
|
+ for (var i = 0; i < conf.length; i++) {
|
|
|
+ var obj = {};
|
|
|
+ obj.name = conf[i];
|
|
|
+ // if (reg.test(conf[i])) {
|
|
|
+ // obj.name2 = conf[i].slice(0, conf[i].length - 1);
|
|
|
+ // } else {
|
|
|
+ // obj.name2 = conf[i];
|
|
|
+ // }
|
|
|
+ obj.name2 = this.typename[relayNum[i]];
|
|
|
+ obj.number = i;
|
|
|
+ obj.type = `j${i + 1}`;
|
|
|
+ obj.disabled = false;
|
|
|
+ // "state": 1 继电器打开 ;"state": 0 继电器关闭
|
|
|
+ // 处理开关值
|
|
|
+ // J开头表示状态，总共只有32长度，超过32则从头赋值 位数多一位
|
|
|
+ // 例：1和33是都在J1里面，返回值是一个二进制数 倒数第一位表示第一个 第二位表示33状态 以此类推
|
|
|
+ // 根据总长度 为超过32的j赋值
|
|
|
+ // 当前是循环的第几轮
|
|
|
+ let baseP = Math.ceil((i + 1) / 32);
|
|
|
+ if (i > 31) {
|
|
|
+ dataobj[`j${i + 1}`] = dataobj[
|
|
|
+ `j${(i + 1) % 32 == 0 ? 32 : (i + 1) % 32}`]; // 当前脚标/32取余 当恰好整除的时候 取32
|
|
|
+ }
|
|
|
+ dataobj[`j${i + 1}`] = dataobj[`j${i + 1}`].slice(-totalP); // 截取当前圈数的最后几位数字
|
|
|
+ let baseOff = numberToArray(dataobj[`j${i + 1}`]); // 把当前值根据位数 转换为数组
|
|
|
+ obj.off = baseOff[baseP - 1] == '0' ? false : true; // 根据当前圈数，取对应的数组的值
|
|
|
+ arr1.push(obj);
|
|
|
+ }
|
|
|
+ for (var i = 0; i < arr1.length; i++) {
|
|
|
+ if (arr1[i].name != "-") {
|
|
|
+ this.facilityvalve.push(arr1[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.facilityvalve.forEach(item => {
|
|
|
+ if (item.type == 'j9' && item.off == true) {
|
|
|
+ // 判断注水泵是否打开
|
|
|
+ this.mainBeng = true;
|
|
|
+ }
|
|
|
+ if (item.type == 'j10' && item.off == true) {
|
|
|
+ // 判断施肥阀是否打开
|
|
|
+ this.feiBeng = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.facilityvalve)
|
|
|
+ },
|
|
|
+ getEquipcontrol(num, state) {
|
|
|
+ //设备控制
|
|
|
+ this.$axios({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=xphsp.views.control_order",
|
|
|
+ data: this.qs.stringify({
|
|
|
+ device_id: this.device_id,
|
|
|
+ relayNum: num,
|
|
|
+ relayState: state,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
+ //console.log(res.data.data);
|
|
|
+ if (res.data.data && res.data.data.controlState) {
|
|
|
+ this.$message({
|
|
|
+ message: "指令下发成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // for (var i = 0; i < this.facilityvalve.length; i++) {
|
|
|
+ // //console.log(this.facilityvalve[i].number, res.data.data.relayNum);
|
|
|
+ // if (
|
|
|
+ // this.facilityvalve[i].number == Number(num)
|
|
|
+ // ) {
|
|
|
+ // //console.log(this.facilityvalve[i]);
|
|
|
+ // this.facilityvalve[i].off = !state;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.getEquipstatus()
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // sf_control_data
|
|
|
+ // 操作记录日期
|
|
|
+ changeConsoleDate(e) {
|
|
|
+ this.consoleTime = e;
|
|
|
+ this.tableData = [];
|
|
|
+ this.page = 1;
|
|
|
+ this.getEquipcontroldata()
|
|
|
+ },
|
|
|
+ clearContime() {
|
|
|
+ this.consoleTime = {};
|
|
|
+ this.tableData = [];
|
|
|
+ this.page = 1;
|
|
|
+ this.getEquipcontroldata()
|
|
|
+ },
|
|
|
+ //操作记录
|
|
|
+ async getEquipcontroldata() {
|
|
|
+ const {
|
|
|
+ consoleTime
|
|
|
+ } = this;
|
|
|
+ let begin = consoleTime.startDate ? new Date(consoleTime.startDate).getTime() / 1000 : '';
|
|
|
+ let end = consoleTime.endDate ? new Date(consoleTime.endDate).getTime() / 1000 : '';
|
|
|
+ //操作记录
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=xphsp.views.control_log",
|
|
|
+ data: {
|
|
|
+ device_id: this.device_id,
|
|
|
+ page_num: this.page,
|
|
|
+ page_size: 15,
|
|
|
+ start: begin,
|
|
|
+ end: end,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ // this.tableData = [];
|
|
|
+ var record = res.result;
|
|
|
+ this.tableData = [...this.tableData, ...record];
|
|
|
+ this.total = res.count;
|
|
|
+ if (this.page * 15 > this.total) {
|
|
|
+ this.status = 'nomore'
|
|
|
+ } else {
|
|
|
+ this.status = 'loadmore'
|
|
|
+ }
|
|
|
+ console.log(this.tableData);
|
|
|
+ },
|
|
|
+ switchchange(e, state, item, index) {
|
|
|
+ item.off = e;
|
|
|
+ if (item.type == 'j9') {
|
|
|
+ // 判断注水泵是否打开
|
|
|
+ this.mainBeng = e;
|
|
|
+ }
|
|
|
+ if (item.type == 'j10') {
|
|
|
+ // 判断施肥阀是否打开
|
|
|
+ this.feiBeng = e;
|
|
|
+ }
|
|
|
+ if (['j1', 'j2', 'j3', 'j4', 'j5', 'j6'].indexOf(item.type) > 0) {
|
|
|
+ let changeIndex = index;
|
|
|
+ if ((index + 1) % 2 == 0) {
|
|
|
+ // 偶数 往前取值
|
|
|
+ this.facilityvalve[index - 1].disabled = true;
|
|
|
+ changeIndex = index - 1;
|
|
|
+ } else if ((index + 1) % 2 == 1) {
|
|
|
+ // 基数 往后取值
|
|
|
+ this.facilityvalve[index + 1].disabled = true;
|
|
|
+ changeIndex = index + 1;
|
|
|
+ }
|
|
|
+ item.disabled = true;
|
|
|
+ this.changeTimeStatus(item, changeIndex);
|
|
|
+ }
|
|
|
+ //console.log(Number(e), state);
|
|
|
+ this.getEquipcontrol(state, Number(e));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.current == 1 && this.status == 'loadmore') {
|
|
|
+ this.page++;
|
|
|
+ this.getEquipcontroldata()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ let deviceItem = JSON.parse(option.shebei)
|
|
|
+ this.device_id = deviceItem.device_id;
|
|
|
+ this.getEquipstatus();
|
|
|
+ this.getElmentInfo();
|
|
|
+ this.getEquipcontroldata();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bigBox {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bigOpen {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topInfo {
|
|
|
+ background: #14A478;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+ border-bottom-right-radius: 16rpx;
|
|
|
+
|
|
|
+ .u-col {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ view:first-child {
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view:nth-child(2) {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ opacity: .72;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .readmore {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ color: #93FFDE;
|
|
|
+
|
|
|
+ .u-icon {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .histimeBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 56rpx;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-top: 54rpx;
|
|
|
+ border: 2rpx solid var(--neutral-color-border-light, #E4EDEA);
|
|
|
+ .u-icon{
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ width: 280rpx;
|
|
|
+ color: #C1C1C1;
|
|
|
+ }
|
|
|
+
|
|
|
+ view {
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hisBox {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ .axiosBox {
|
|
|
+ padding: 48rpx 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chartBox {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ height: 700rpx;
|
|
|
+
|
|
|
+ #canvasColumnA {
|
|
|
+ width: 100%;
|
|
|
+ height: 700rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .readmore {
|
|
|
+ color: #14A478;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .consoleList {
|
|
|
+ padding: 0 32rpx;
|
|
|
+ .histimeBox{
|
|
|
+ margin: 32rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableTitle {
|
|
|
+ background: #E8F3F0;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableList {
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 2rpx solid var(--neutral-color-border-base, #DCE6E3);
|
|
|
+
|
|
|
+ view {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ view:nth-child(1) {
|
|
|
+ width: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view:nth-child(2) {
|
|
|
+ width: 280rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view:nth-child(3) {
|
|
|
+ width: 280rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
