|
|
@@ -0,0 +1,646 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- <view class="status_bar"></view> -->
|
|
|
+ <view class="" style="position: relative;">
|
|
|
+ <!-- <view style="position: fixed; z-index: 100; width: 100%">
|
|
|
+ <uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备详情"></uni-nav-bar>
|
|
|
+ </view> -->
|
|
|
+ <view class="info">
|
|
|
+ <view class="info_item">
|
|
|
+ <image src="http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png" mode="" class="bgi"></image>
|
|
|
+ <p style="font-size: 32rpx" @click="copy(eqinfo.device_id)">
|
|
|
+ 设备 ID:{{ eqinfo.device_id }}
|
|
|
+ <image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode=""
|
|
|
+ class="tishi"></image>
|
|
|
+ </p>
|
|
|
+ <p>设备名称:{{ eqinfo.device_name || "无" }}</p>
|
|
|
+ <p>
|
|
|
+ 最近上报时间:<span v-if="eqinfo.uptime">{{ eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat()
|
|
|
+ }}</span><span v-else>{{eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat() }}</span>
|
|
|
+ </p>
|
|
|
+ <p>地址:{{ eqinfo.location || "暂无地址" }}</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="control">
|
|
|
+ <view class="control_item" v-if="kongtf" @click="control">
|
|
|
+ <image :src="
|
|
|
+ 'http://www.hnyfwlw.com:8006/bigdata_app' +
|
|
|
+ '/image/environment/forecastResult.png'
|
|
|
+ " mode=""></image>
|
|
|
+ <p>防控决策</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="his_box" v-if="datatf">
|
|
|
+ <view class="selecttimes" @click="tiemshow = !tiemshow">
|
|
|
+ <view class="timesbox">
|
|
|
+ <image
|
|
|
+ :src="'http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
|
|
|
+ mode=""></image>
|
|
|
+ <p>{{ timetab(begintime) }}</p>
|
|
|
+ <p class="or">~</p>
|
|
|
+ <p>{{ timetab(end) }}</p>
|
|
|
+ <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar>
|
|
|
+ </view>
|
|
|
+ <view class="shuju_one">
|
|
|
+ <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="canvastishi" v-if="dataloadingtf">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ <canvas v-show="!tiemshow" canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
|
|
|
+ @touchstart="touchLineA($event)" @touchmove="moveLineA($event)"
|
|
|
+ @touchend="touchEndLineA($event)" disable-scroll="true" :style="{
|
|
|
+ width: cWidth * pixelRatio + 'px',
|
|
|
+ height: cHeight * pixelRatio + 'px',
|
|
|
+ transform: 'scale(' + 1 / pixelRatio + ')',
|
|
|
+ 'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
|
|
|
+ 'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
|
|
+ }"></canvas>
|
|
|
+ <canvas v-show="!tiemshow" canvas-id="canvasColumnB" id="canvasColumnB" class="charts"
|
|
|
+ @touchstart="touchLineB($event)" @touchmove="moveLineB($event)"
|
|
|
+ @touchend="touchEndLineB($event)" disable-scroll="true" :style="{
|
|
|
+ width: cWidth * pixelRatio + 'px',
|
|
|
+ height: cHeight * pixelRatio + 'px',
|
|
|
+ transform: 'scale(' + 1 / pixelRatio + ')',
|
|
|
+ 'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
|
|
|
+ 'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
|
|
+ }"></canvas>
|
|
|
+ </view>
|
|
|
+ <view class="condition">
|
|
|
+ <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
|
+ <table class="table">
|
|
|
+ <tr class="tr">
|
|
|
+ <th class="th" v-for="(value, key) in param" :key="'a' + key">
|
|
|
+ {{ value }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-for="(items, indexs) in historylistdata" :key="'b' + indexs"
|
|
|
+ v-if="!forbidden">
|
|
|
+ <td class="td" v-for="(value, key) in param">{{ items[key]}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr" v-if="forbidden">
|
|
|
+ <td class="td" v-for="item in 13">暂无数据</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="pagenumber">
|
|
|
+ <button @click="prev">上一页</button>
|
|
|
+ <view class="pagenumber_page"> 第 {{ page }} 页 </view>
|
|
|
+ <view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
|
|
|
+ <button @click="next">下一页</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from "../../../components/js_sdk/u-charts/u-charts/u-charts.js";
|
|
|
+ var canvaColumnA = null;
|
|
|
+ var canvaColumnB = null;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ basetype: "",
|
|
|
+ kongtf: false,
|
|
|
+ datatf: false,
|
|
|
+ eqinfo: {},
|
|
|
+ city: "河南省",
|
|
|
+ tiemshow: false, //时间筛选弹框
|
|
|
+ begintime: "", //开始时间
|
|
|
+ end: "", //结束时间
|
|
|
+ dataloadingtf: true,
|
|
|
+ canvastishiTF: false,
|
|
|
+ device_id: "", //设备ID
|
|
|
+ forbidden: false,
|
|
|
+ historylistdata: [], //历史数据
|
|
|
+ pagesum: 1,
|
|
|
+ page: 1,
|
|
|
+ cWidth: "",
|
|
|
+ cHeight: "",
|
|
|
+ pixelRatio: 1,
|
|
|
+ param: {
|
|
|
+
|
|
|
+ },
|
|
|
+ color: [
|
|
|
+ "#ff7b30",
|
|
|
+ "#f93948",
|
|
|
+ "#fb2ea4",
|
|
|
+ "#bc59db",
|
|
|
+ "#7457ec",
|
|
|
+ "#307dfd",
|
|
|
+ "#31bfff",
|
|
|
+ "#46e9b1",
|
|
|
+ "#19cd48",
|
|
|
+ "#b2e409",
|
|
|
+ "#f0f254",
|
|
|
+ "#fed000",
|
|
|
+ "#f06f14",
|
|
|
+ "#a74040",
|
|
|
+ "#90bb71",
|
|
|
+ "#a07635",
|
|
|
+ "#6502bd",
|
|
|
+ "#048bbb",
|
|
|
+ "#9ebb01",
|
|
|
+ "#cc9202",
|
|
|
+ "#ff8fa0",
|
|
|
+ "#a3d55f",
|
|
|
+ "#d9bedd",
|
|
|
+ "#00a6b6",
|
|
|
+ "#236093",
|
|
|
+ "#009fff",
|
|
|
+ "#ddc0a6",
|
|
|
+ "#c4a6dd",
|
|
|
+ "#dda6a6",
|
|
|
+ "#779e33",
|
|
|
+ "#a6ddb0",
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copy(item) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: item,
|
|
|
+ success: function() {
|
|
|
+ console.log("success");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ control() {
|
|
|
+ //设备控制
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "./forecastResult?id=" + this.eqinfo.device_id,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tiemchange(e) {
|
|
|
+ console.log(e);
|
|
|
+ //切换时间
|
|
|
+ // this.begintime = parseInt(+new Date(e.startDate) / 1000);
|
|
|
+ this.begintime = parseInt(+new Date(`${e.startDate} 00:00:00`) / 1000);
|
|
|
+ this.end = parseInt(+new Date(`${e.endDate} 00:00:00`) / 1000);
|
|
|
+ this.histprydatas();
|
|
|
+ this.getChartLine();
|
|
|
+ },
|
|
|
+ timetab(e) {
|
|
|
+ //时间转换
|
|
|
+ e = new Date(e * 1000);
|
|
|
+ var year = e.getFullYear();
|
|
|
+ var month =
|
|
|
+ e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1;
|
|
|
+ var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate();
|
|
|
+ var time = year + "/" + month + "/" + day;
|
|
|
+ return time;
|
|
|
+ },
|
|
|
+ // 表格数据
|
|
|
+ async histprydatas() {
|
|
|
+ //表格历史数据
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: "/api/api_gateway?method=wheat.potato.potato_data_list",
|
|
|
+ data: {
|
|
|
+ device_id: this.eqinfo.device_id,
|
|
|
+ page: this.page,
|
|
|
+ begin: this.begintime,
|
|
|
+ end: this.end,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log(res);
|
|
|
+ this.param = res.ele
|
|
|
+ this.pagesum = Math.ceil(res.nums / 10) || 1;
|
|
|
+ if (this.pagesum > 0) {
|
|
|
+ var dat = res.sta;
|
|
|
+ this.historylistdata = [];
|
|
|
+ for (var i = 0; i < dat.length; i++) {
|
|
|
+ var item = eval("(" + dat[i] + ")");
|
|
|
+ var obj = {};
|
|
|
+ for (var i1 in item) {
|
|
|
+ // if (i1 == "uploadTime") {
|
|
|
+ // obj[i1] = this.formatTime(item[i1] * 1000);
|
|
|
+ // } else {
|
|
|
+ obj[i1] = item[i1];
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ this.historylistdata.push(obj);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.historylistdata = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取折线图数据
|
|
|
+ async getChartLine() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=wheat.potato.potato_data",
|
|
|
+ data: {
|
|
|
+ device_id: this.eqinfo.device_id,
|
|
|
+ begin: this.begintime,
|
|
|
+ end: this.end,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.dataloadingtf = false;
|
|
|
+ var dat = res.data;
|
|
|
+ this.param = res.ele;
|
|
|
+ if (dat.length) {
|
|
|
+ var regroupData = []; //重组数据
|
|
|
+ var kindArr = []; //通道数组
|
|
|
+ var time = [];
|
|
|
+ var xtitle = [];
|
|
|
+ for (var i = 0; i < dat.length; i++) {
|
|
|
+ var item = eval("(" + dat[i] + ")");
|
|
|
+ console.log(item)
|
|
|
+ var tim = new Date(item["dataTime"]).getTime();
|
|
|
+ var times = new Date(tim);
|
|
|
+ xtitle.unshift(
|
|
|
+ times.getMonth() +
|
|
|
+ 1 +
|
|
|
+ "/" +
|
|
|
+ times.getDate() +
|
|
|
+ "-" +
|
|
|
+ times.getHours() +
|
|
|
+ ":" +
|
|
|
+ times.getMinutes()
|
|
|
+ );
|
|
|
+ time.unshift(tim);
|
|
|
+ for (var j in item) {
|
|
|
+ var arr = "";
|
|
|
+ if (j == "id" || j == "dataTime" || j=='windDir') {
|
|
|
+ continue;
|
|
|
+ } else if (kindArr.indexOf(j) == "-1") {
|
|
|
+ kindArr.push(j);
|
|
|
+ regroupData.push({
|
|
|
+ name: this.param[j],
|
|
|
+ color: this.color[kindArr.length - 1],
|
|
|
+ data: [],
|
|
|
+ });
|
|
|
+ // arr.push(tim);
|
|
|
+ arr = parseFloat(item[j]);
|
|
|
+ regroupData[kindArr.indexOf(j)].data.unshift(arr);
|
|
|
+ } else {
|
|
|
+ // arr.push(tim);
|
|
|
+ // arr.push(parseFloat(item[j]));
|
|
|
+ arr = parseFloat(item[j]);
|
|
|
+ regroupData[kindArr.indexOf(j)].data.unshift(arr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(regroupData);
|
|
|
+ // 分割折线图
|
|
|
+ const regroupDataNum = Math.ceil(regroupData.length / 2);
|
|
|
+ const options1 = regroupData.filter((v, i) => {
|
|
|
+ return i < regroupDataNum;
|
|
|
+ });
|
|
|
+ const options2 = regroupData.filter((v, i) => {
|
|
|
+ return i >= regroupDataNum;
|
|
|
+ });
|
|
|
+ console.log(options1, options2);
|
|
|
+
|
|
|
+ this.showColumn("canvasColumnA", xtitle, options1);
|
|
|
+ this.showColumn("canvasColumnB", xtitle, options2);
|
|
|
+ this.canvastishiTF = true;
|
|
|
+ } else {
|
|
|
+ this.canvastishiTF = false;
|
|
|
+ this.showColumn("canvasColumnA", xtitle, []);
|
|
|
+ this.showColumn("canvasColumnB", xtitle, []);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prev() {
|
|
|
+ //上一页
|
|
|
+ if (this.page > 1) {
|
|
|
+ this.page--;
|
|
|
+ this.histprydatas();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next() {
|
|
|
+ //下一页
|
|
|
+ if (this.page < this.pagesum) {
|
|
|
+ this.page++;
|
|
|
+ this.histprydatas();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickLeft() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ console.log(id);
|
|
|
+ var _self = this;
|
|
|
+ if (id === "canvasColumnA") {
|
|
|
+ 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",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (id === "canvasColumnB") {
|
|
|
+ canvaColumnB = 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.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + " " + item.name + ":" + item.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineB(e) {
|
|
|
+ console.log(e);
|
|
|
+ canvaColumnB.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineB(e) {
|
|
|
+ canvaColumnB.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineB(e) {
|
|
|
+ canvaColumnB.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvaColumnB.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + " " + item.name + ":" + item.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.eqinfo = JSON.parse(option.shebei);
|
|
|
+ this.basetype = this.eqinfo.type
|
|
|
+ this.cWidth = uni.upx2px(650);
|
|
|
+ this.cHeight = uni.upx2px(500);
|
|
|
+ this.device_id = option.id;
|
|
|
+ this.end = parseInt(+new Date() / 1000);
|
|
|
+ this.begintime = parseInt(this.end - 24 * 60 * 60);
|
|
|
+ this.histprydatas();
|
|
|
+ this.getChartLine();
|
|
|
+ this.kongtf = this.$QueryPermission(347)
|
|
|
+ this.datatf = this.$QueryPermission(348)
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .info_item {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 240rpx;
|
|
|
+ padding: 40rpx 50rpx;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .bgi {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .tishi {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin: 0rpx 0 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ // padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .control_item {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ width: 20%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .his_box {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selecttimes {
|
|
|
+ width: 90%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .timesbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ color: #949494;
|
|
|
+ text-align: right;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-calendar__action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .u-calendar__action__text {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuju_one {
|
|
|
+ width: 90%;
|
|
|
+ margin: 20px auto;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ height: 1000rpx;
|
|
|
+
|
|
|
+ .canvastishi {
|
|
|
+ font-size: 32rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -64rpx;
|
|
|
+ margin-top: -21rpx;
|
|
|
+
|
|
|
+ .dataloading:after {
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ animation: ellipsis 2s infinite;
|
|
|
+ content: "\2026";
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ellipsis {
|
|
|
+ from {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ width: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 90%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin: 0 auto 30rpx;
|
|
|
+
|
|
|
+ .scroll-X {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .th,
|
|
|
+ .td {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #f1f1f1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:nth-child(2n-1) {
|
|
|
+ background-color: #f5fff8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr:first-child {
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagenumber {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #57c878;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagenumber_page {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|