From 1bc2f4fcfb6238544b589c2b26e7c2d68d93b3f3 Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期一, 18 七月 2022 16:58:20 +0800
Subject: [PATCH] #
---
Monitor-APP/pages/index/index_test.vue | 1069 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,069 insertions(+), 0 deletions(-)
diff --git a/Monitor-APP/pages/index/index_test.vue b/Monitor-APP/pages/index/index_test.vue
new file mode 100644
index 0000000..942d259
--- /dev/null
+++ b/Monitor-APP/pages/index/index_test.vue
@@ -0,0 +1,1069 @@
+<template>
+ <view class="container">
+ <view class="floor-screen" :class="floorMove" >
+ <view class="head">
+ <text @click="port()">鑷姩浠撳簱WCS鐩戞帶骞冲彴</text>
+ <view class="time-tools">{{year}}-{{month}}-{{day}} {{hours}}:{{minutes}}:{{seconds}} {{week}}</view>
+ <view class="button-left" @click="url()"></view>
+ <view class="button-right" @click="ledId()"></view>
+ </view>
+ <view class="main">
+ <view class="main-sides" style="width: 100%;">
+ <view class="box" style="height: 90%;">
+ <view class="box-border box-border1"></view>
+ <view class="box-border box-border2"></view>
+ <view class="box-border box-border3"></view>
+ <view class="box-border box-border4"></view>
+ <!-- 鍏ㄦ澘鍑哄簱 -->
+ <view style="width: 10%;height: 100%;display:inline-block;float: left;text-align: center;padding-top: 180px;">
+ <text>{{title}}</text>
+ </view>
+ <!-- 婊氬姩鍖哄煙 -->
+ <view style="width: 80%;height: 100%;display: inline-block;">
+ <!--鏄剧ずorder璁㈠崟缂栧彿 -->
+ <text v-show="orderShow" style="display: block;font-size: 140rpx;" >{{orderNo}}</text>
+ <swiper :class="swiper" circular="true" vertical="true" display-multiple-items="6" :autoplay="autoplay" :interval="interval" :duration="duration">
+ <swiper-item v-for="(item,index) in matList" :key="index">
+ <view style="font-size: 160rpx;">{{item}}</view>
+ </swiper-item>
+ </swiper>
+ </view>
+ <!-- 绔欏彴鍙� -->
+ <view style="width: 10%;height: 100%;display: inline-block;float: right;padding-top: 180px;">
+ <text>{{staNo}}</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="top-screen" :class="topMove">
+ <view class="head">
+ <text @click="port()">鑷姩浠撳簱WCS鐩戞帶骞冲彴</text>
+ <view class="time-tools">{{year}}-{{month}}-{{day}} {{hours}}:{{minutes}}:{{seconds}} {{week}}</view>
+ <view class="button-left" @click="url()"></view>
+ <view class="button-right" @click="ledId()"></view>
+ </view>
+ <view class="main">
+ <view class="main-sides">
+ <view class="box box-lg">
+ <view class="box-border box-border1"></view>
+ <view class="box-border box-border2"></view>
+ <view class="box-border box-border3"></view>
+ <view class="box-border box-border4"></view>
+ <view class="box-item introduce">
+ <h3>鑷姩鍖栫珛浣撲粨搴�</h3>
+ <p class="english">Automatic Storageand Retrieval System</p>
+ <p class="introduce-content"> 鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涜嚜鍔ㄥ寲绔嬩綋浠撳簱鏄綋鍓嶆妧鏈按骞宠緝楂樼殑褰㈠紡銆�
+ 鑷姩鍖栫珛浣撲粨搴撶殑涓讳綋鐢辫揣鏋躲�佸贩閬撳紡鍫嗗灈璧烽噸鏈恒�佸叆锛堝嚭锛夊簱宸ヤ綔鍙板拰鑷姩杩愯繘锛堝嚭锛夊強鎿嶄綔鎺у埗绯荤粺缁勬垚銆�
+ 璐ф灦鏄挗缁撴瀯鎴栭挗绛嬫贩鍑濆湡缁撴瀯鐨勫缓绛戠墿鎴栫粨鏋勪綋锛岃揣鏋跺唴鏄爣鍑嗗昂瀵哥殑璐т綅绌洪棿锛屽贩閬撳爢鍨涜捣閲嶆満绌胯浜庤揣鏋朵箣闂寸殑宸烽亾涓紝瀹屾垚瀛樸�佸彇璐х殑宸ヤ綔銆傜鐞嗕笂閲囩敤璁＄畻鏈哄強鏉″舰鐮佹妧鏈��</p>
+ </view>
+ <view class="box-item charge-info">
+ <h3>浠撳簱鏁版嵁</h3>
+ <p class="english">warehouse data</p>
+ <view class="charge-info-item">
+ <image src="../../static/a1.png" mode="aspectFit"></image>
+ <view>
+ <text class="count">{{xDistance}}</text>
+ <text class="unit">m</text>
+ </view>
+ <view>绱璧拌璺濈(绫�)</view>
+ </view>
+ <view class="charge-info-item">
+ <image src="../../static/b1.png" mode="aspectFit"></image>
+ <view>
+ <text class="count">{{yDistance}}</text>
+ <text class="unit">m</text>
+ </view>
+ <view>绱鍗囬檷璺濈(绫�)</view>
+ </view>
+ <view class="charge-info-item">
+ <image src="../../static/c1.png" mode="aspectFit"></image>
+ <view>
+ <text class="count">{{xDuration}}</text>
+ <text class="unit">m</text>
+ </view>
+ <view>绱璧拌鏃堕暱(绉�)</view>
+ </view>
+ <view class="charge-info-item">
+ <image src="../../static/d1.png" mode="aspectFit"></image>
+ <view>
+ <text class="count">{{yDuration}}</text>
+ <text class="unit">m</text>
+ </view>
+ <view>绱鍗囬檷鏃堕暱(绉�)</view>
+ </view>
+ </view>
+ <view class="box-item use-info">
+ <view class="use-left">
+ <h3>搴撲綅浣跨敤鐜�</h3>
+ <p class="english">EQUIPMENT USAGE THIS MONTH</p>
+ </view>
+ <view class="use-right">
+ <h3>20%</h3>
+ <p class="english">鍚屾瘮涓婃湀 + 5%</p>
+ </view>
+ <view class="use-main">
+ <view class="left">
+ <view class="progressBar">
+ <view class="progress" :style="'width:'+ usedPr + '%'"></view>
+ </view>
+ <!-- <progress percent="20"activeColor="#FF5722" backgroundColor="#233751" stroke-width="30"></progress> -->
+ </view>
+ <view class="right">
+ {{used}}
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="main-sides">
+ <view class="box box-tp">
+ <view class="box-border box-border1"></view>
+ <view class="box-border box-border2"></view>
+ <view class="box-border box-border3"></view>
+ <view class="box-border box-border4"></view>
+ <view class="box-item right-item">
+ <view class="sub-left">
+ <h3>鍏ュ嚭搴撶粺璁�</h3>
+ <p class="english">ORDER STATISTICS</p>
+ </view>
+ <view class="sub-right">
+ <h3>31</h3>
+ <p class="english">浠婃棩璁㈠崟鏁�</p>
+ </view>
+ <view class="sub-main">
+ <view class="charts-box">
+ <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="box box-md">
+ <view class="box-border box-border1"></view>
+ <view class="box-border box-border2"></view>
+ <view class="box-border box-border3"></view>
+ <view class="box-border box-border4"></view>
+ <view class="box-item right-item">
+ <view class="sub-left">
+ <h3>搴撳瓨绫诲瀷</h3>
+ <p class="english">INCOME DATE</p>
+ </view>
+ <view class="sub-right">
+ <h3>浠婂ぉ</h3>
+ <p class="english">Today</p>
+ </view>
+ <view class="sub-main">
+ <view class="charts-box ring">
+ <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
+ </view>
+ <view class="sub-main-right">
+ <view class="sub-info">
+ <image src="../../static/g1.png" mode="aspectFit"></image>
+ <text>鍦ㄥ簱</text>
+ <text>{{stockCount}}</text>
+ </view>
+ <view class="sub-info">
+ <image src="../../static/f1.png" mode="aspectFit"></image>
+ <text>绌哄簱</text>
+ <text>{{emptyCount}}</text>
+ </view>
+ <view class="sub-info">
+ <image src="../../static/e1.png" mode="aspectFit"></image>
+ <text>绂佺敤</text>
+ <text>{{noneCount}}</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="box box-bt">
+ <view class="box-border box-border1"></view>
+ <view class="box-border box-border2"></view>
+ <view class="box-border box-border3"></view>
+ <view class="box-border box-border4"></view>
+ <!-- <text>娴欐睙涓壃绔嬪簱鎶�鏈湁闄愬叕鍙�</text>
+ <text>褰撳墠鐗堟湰鍙�</text> -->
+ <view>娴欐睙涓壃绔嬪簱鎶�鏈湁闄愬叕鍙�</view>
+ <image src="../../static/barcode.png" mode="aspectFit"></image>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view>
+ <!-- 杈撳叆url -->
+ <uni-popup ref="url" type="dialog">
+ <uni-popup-dialog ref="inputClose" mode="input" title="閰嶇疆url" :value="baseUrl"
+ placeholder="绀轰緥:192.168.1.1" @confirm="baseUrlConfirm"></uni-popup-dialog>
+ </uni-popup>
+ </view>
+ <view>
+ <!-- 杈撳叆ledId -->
+ <uni-popup ref="ledId" type="dialog">
+ <uni-popup-dialog ref="inputClose" mode="input" title="閰嶇疆ledId" :value="baseLedId"
+ placeholder="绀轰緥:188" @confirm="ledIdConfirm"></uni-popup-dialog>
+ </uni-popup>
+ </view>
+ <view>
+ <!-- 杈撳叆port -->
+ <uni-popup ref="port" type="dialog">
+ <uni-popup-dialog ref="inputClose" mode="input" title="閰嶇疆绔彛鍙�" :value="basePort"
+ placeholder="绀轰緥:9090" @confirm="portConfirm"></uni-popup-dialog>
+ </uni-popup>
+ </view>
+ </view>
+</template>
+
+<script>
+ import ycqdata from '@/pages/index/data.json';
+ import demodata from '@/mockdata/demodata.json';
+ export default {
+ data() {
+ return {
+ show: true,
+ modeClass: 'fade',
+ styles: {},
+ baseUrl:'10.10.0.200',
+ baseLedId:'',
+ basePort:'',
+ value: '',
+ xDistance: 0,
+ yDistance:0,
+ xDuration:0,
+ yDuration:0,
+ used:317,
+ usedPr: 90,
+ stockCount:0,
+ emptyCount:0,
+ noneCount:0,
+ chartsData: {
+ "Line": {
+ "categories": [],
+ "series": []
+ },
+ "Pie": {
+ "series": [{
+ "data": []
+ }]
+ },
+ },
+ chartsDataLine1: {},
+ chartsDataPie2: {},
+ ringOpts:{},
+ year:2022,
+ month:4,
+ day:14,
+ hours:13,
+ minutes:38,
+ seconds:13,
+ week:'鏄熸湡鍥�',
+ ani:'',
+ // move: 'upMove 1.5s 1;',
+ move:true,
+ topMove:'topUp',
+ floorMove:'',
+ version:'',
+ // newspaper:'鎷ｆ枡鍑哄簱锛�4426)\n婧愬簱浣嶏細1200101\n鐩爣绔欙細186\n1101842-10000-22047518517\n\n',
+ newspaper:'',
+ errorPaper:'',
+ title:'',
+ staNo:'',
+ errorShow:'',
+ pakinShow:'',
+ pakinGun:'',
+ orderShow:false,
+ orderNo:null,
+ swiper:'swiper-here',
+ autoplay:true, // 鑷姩寰幆
+ interval:1000, // 璋冪敤鏃堕暱
+ duration:6000, // 绉诲姩閫熷害
+ matList:[], // 璁㈠崟鍒楄〃
+ }
+ },
+ mounted() {
+ let that = this
+ const BaseUrl = uni.getStorageSync('BaseUrl');
+ const BaseLedId = uni.getStorageSync('BaseLedId');
+ const BasePort = uni.getStorageSync('BasePort');
+ if (BaseUrl && BaseLedId) {
+ that.baseUrl = BaseUrl
+ that.baseLedId = BaseLedId
+ that.basePort = BasePort
+ } else {
+ that.baseUrl = ''
+ that.baseLedId = ''
+ }
+ },
+ onReady() {
+ setTimeout(() => {
+ // this.initlineChart();
+ // this.initPieChart();
+
+ }, 0);
+ setTimeout(() => {
+ // this.getServerData();
+ // this.getOther();
+ // this.getPakin();
+ }, 1000);
+ setInterval(() => {
+ this.getDate();
+ // this.getPakin();
+ // this.getError();
+ this.getYYY();
+ this.getEEE();
+ this.animation();
+ },1000)
+ },
+ methods: {
+ getEEE() {
+ var result = ycqdata.dataEEE
+ let that = this
+ let res = result.data
+ if (res.data && res.data !== "") {
+ that.matList = []
+ that.orderNo = null
+ that.matList.push(res.data)
+ that.swiper = 'swiper-here-error'
+ that.title = ''
+ that.staNo = ''
+ that.pakinShow = false
+ that.errorShow = true
+ that.move = false // 鏄剧ず
+ } else {
+ that.errorPaper = ''
+ that.errorShow = false
+ if (that.pakinShow) {
+ return;
+ } else {
+ that.move = true // 闅愯棌
+ }
+ }
+ },
+ getYYY() {
+ var result = ycqdata.dataYYY
+ let that = this
+ that.matList = [] // 娓呯┖鏉＄爜鍒楄〃
+ var newsData = ''
+ var str = ''
+ let res = result.data
+ if(res.data && res.data !== null) {
+ if (res.data[0].matDtos.length > 0) {
+ that.pakinShow = true
+ that.pakinGun = true
+ if (res.data[0].ioType === 101) {
+ that.title = '鍏ㄦ澘鍑哄簱'
+ } else if(res.data[0].ioType === 103) {
+ that.title = '妫�鏂欏嚭搴�'
+ }
+ if (res.data[0].orderNo) {
+ that.orderNo = "璁㈠崟鍙凤細" + res.data[0].orderNo
+ that.swiper = 'swiper-here-oN'
+ that.orderShow = true
+ } else {
+ that.orderNo = null;
+ that.swiper = 'swiper-here'
+ that.orderShow = false
+ }
+ that.staNo = '鐩爣绔�' + res.data[0].staNo
+ for (var i = 0; i < res.data[0].matDtos.length; i++) {
+ var matnr = res.data[0].matDtos[i].matnr + ' - ' + res.data[0].matDtos[i].batch
+ that.matList.push(matnr)
+ }
+ if (that.errorShow) {
+ // that.pakinShow = false
+ return;
+ } else {
+ that.newspaper = newsData
+ that.move = false
+ }
+ if (res.data[0].matDtos.length <= 8) {
+ that.errorShow = true
+ that.pakinShow = true
+ that.pakinGun = false
+ }
+ } else {
+ that.move = true
+ }
+ } else {
+ that.move = true
+ }
+
+ },
+ getError() {
+ let that = this
+ uni.request({
+ url: "http://" + that.baseUrl + ":" + that.basePort + "/jkwcs/monitor/led/error",
+ data: {
+ ledId:that.baseLedId
+ },
+ method:'GET',
+ success(result) {
+ let res = result.data
+ if (res.data && res.data !== "") {
+ that.title = ''
+ that.staNo = ''
+ that.pakinShow = false
+ that.errorShow = true
+ that.errorPaper = res.data
+ that.move = false // 鏄剧ず
+ } else {
+ that.errorPaper = ''
+ that.errorShow = false
+ if (that.pakinShow) {
+ return;
+ } else {
+ that.move = true // 闅愯棌
+ }
+ }
+ }
+ });
+ },
+ getPakin () {
+ let that = this
+ uni.request({
+ url: "http://" + that.baseUrl + ":" + that.basePort + "/jkwcs/monitor/led",
+ data: {
+ ledId:that.baseLedId
+ },
+ method:'GET',
+ success(result) {
+ var newsData = ''
+ var str = ''
+ let res = result.data
+ if(res.data && res.data !== null) {
+ if (res.data[0].matDtos.length > 0) {
+ that.pakinShow = true
+ that.pakinGun = true
+ if (res.data[0].ioType === 101) {
+ that.title = '鍏ㄦ澘鍑哄簱'
+ } else if(res.data[0].ioType === 103) {
+ that.title = '妫�鏂欏嚭搴�'
+ }
+ if (res.data[0].orderNo) {
+ that.orderShow = true
+ } else {
+ that.orderShow = false
+ }
+ that.staNo = '鐩爣绔�' + res.data[0].staNo
+ for (var i = 0; i < res.data[0].matDtos.length; i++) {
+ str = res.data[0].matDtos[i].matnr + ' - ' + res.data[0].matDtos[i].batch + '\n'
+ newsData = newsData + str
+ }
+ if (that.errorShow) {
+ return;
+ } else {
+ that.newspaper = newsData
+ that.move = false
+ }
+ if (res.data[0].matDtos.length <= 8) {
+ that.errorShow = true
+ that.pakinShow = true
+ that.pakinGun = false
+ }
+ } else {
+ that.move = true
+ }
+ } else {
+ that.move = true
+ }
+ }
+ })
+ },
+ animation() {
+ if (this.move) {
+ // 涓婂眰鍚戜笂 / 涓嬪眰鍚戜笂
+ this.topMove = 'topUp'
+ this.floorMove = 'floorUp'
+ } else {
+ // 涓婂眰鍚戜笅 / 涓嬪眰鍚戜笅
+ this.topMove = 'topDown'
+ this.floorMove = 'floorDown'
+ }
+ },
+ getDateFormat(value) {
+ var date = new Date();// 鑾峰彇褰撳墠鏃堕棿
+ date.setDate(date.getDate() + value);// 璁剧疆澶╂暟 -1 澶�
+ var m = date.getMonth() + 1
+ var d = date.getDate()
+ var newDate = m + '-' + d
+ return newDate
+ },
+/*************** 鎶樼嚎鍥� *****************************************************************************************************/
+ initlineChart() {
+ let that = this
+ uni.request({
+ url: "http://10.10.0.222:9090/jswcs/monitor/line/charts",
+ method:'GET',
+ success(result) {
+ var res = result.data
+ if (res.code === 200) {
+ that.chartsData.Line.categories = [that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
+ that.chartsData.Line.series = res.data.rows
+ }
+ }
+ })
+ },
+/*************** 楗煎浘 *****************************************************************************************************/
+ initPieChart() {
+ let that = this
+ uni.request({
+ url: "http://10.10.0.222:9090/jswcs/monitor/loc/rep",
+ method:'GET',
+ success(result) {
+ var res = result.data
+ if (res.code === 200) {
+ that.chartsData.Pie.series[0].data = res.data.pie
+ that.stockCount = res.data.stockCount
+ that.emptyCount = res.data.emptyCount
+ that.noneCount = res.data.noneCount
+ that.used = res.data.used
+ that.usedPr = res.data.usedPr
+ }
+ }
+ })
+ },
+ getOther() {
+ let that = this
+ uni.request({
+ // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
+ url: "http://" + that.baseUrl + ":9090/jswcs/monitor/other",
+ data: {
+ crnId: 1,
+ ledId: this.baseLedId,
+ },
+ success(result) {
+ var res = result.data
+ if (res.code === 200) {
+ that.xDistance = res.data.xDistance
+ that.yDistance = res.data.yDistance
+ that.xDuration = res.data.xDuration
+ that.yDuration = res.data.yDuration
+ console.log(res)
+ } else if (res.code === 403) {
+
+ } else {
+
+ }
+ }
+ })
+ },
+ port() {
+ this.$refs.port.open()
+ },
+ url() {
+ this.$refs.url.open()
+ },
+ ledId() {
+ this.$refs.ledId.open()
+ },
+ baseUrlConfirm(val) {
+ this.baseUrl = val
+ uni.setStorageSync('BaseUrl', this.baseUrl);
+ },
+ ledIdConfirm(val) {
+ this.baseLedId = val
+ uni.setStorageSync('BaseLedId', this.baseLedId);
+ },
+ portConfirm(val) {
+ this.basePort = val
+ uni.setStorageSync('BasePort',this.basePort);
+ },
+ getServerData() {
+ this.chartsDataLine1=JSON.parse(JSON.stringify(this.chartsData.Line))
+ this.chartsDataPie2=JSON.parse(JSON.stringify(this.chartsData.Pie))
+ },
+ complete(e) {
+ console.log("娓叉煋瀹屾垚浜嬩欢",e);
+ },
+ getDate() {
+ var dt = new Date();
+ this.year = dt.getFullYear();
+ this.month = (dt.getMonth()+1) < 10 ? '0'+ (dt.getMonth()+1) : (dt.getMonth()+1);
+ this.day = dt.getDate() < 10 ? '0'+dt.getDate() : dt.getDate();
+ this.hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
+ this.minutes = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
+ this.seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds();
+ this.weeks = dt.getDay();
+ switch (this.weeks) {
+ case 0: this.week = "鏄熸湡鏃�"; break;
+ case 1: this.week = "鏄熸湡涓�"; break;
+ case 2: this.week = "鏄熸湡浜�"; break;
+ case 3: this.week = "鏄熸湡涓�"; break;
+ case 4: this.week = "鏄熸湡鍥�"; break;
+ case 5: this.week = "鏄熸湡浜�"; break;
+ default : this.week = "鏄熸湡鍏�";
+ }
+ },
+ }
+ }
+</script>
+
+<style>
+ /* 褰撳墠椤甸潰鏃� orderNo */
+ .swiper-here {
+ display: inline-block;
+ margin: 0 auto;
+ width: 100%;
+ height: 100%;
+ }
+ /* 褰撳墠椤甸潰鏈� orderNo */
+ .swiper-here-oN{
+ display: inline-block;
+ /* background-color: #063A7B; */
+ margin: 0 auto;
+ width: 100%;
+ height: 90%;
+ }
+ /* 褰撳墠椤甸潰鏈� error鎻愮ず */
+ .swiper-here-error {
+ display: inline-block;
+ /* background-color: #063A7B; */
+ /* margin: 0 auto; */
+ margin-top: 20%;
+ width: 100%;
+ height: 100%;
+ }
+ .animate {
+ display: inline-block;
+ /* white-space: nowrap; */
+ animation: 25s wordsLoop linear infinite normal;
+ }
+
+ @keyframes wordsLoop {
+ 0% {
+ transform: translateY(100px);
+ -webkit-transform: translateY(100px);
+ }
+ 100% {
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ }
+ }
+
+ @-webkit-keyframes wordsLoop {
+ 0% {
+ transform: translateY(100px);
+ -webkit-transform: translateY(100px);
+ }
+ 100% {
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ }
+ }
+ /* animation:upMove 1.5s 1; */
+ /* downMove */
+ /* 涓婂眰鍚戜笂 */
+ .topUp {
+ animation: topUp 1.5s 1;
+ animation-fill-mode: both;
+ }
+ @keyframes topUp {
+ from {
+ opacity: 0.5;
+ /* background-color:blue; */
+ top:-1080px
+ }
+ to {
+ opacity: 1;
+ /* background-color:red; */
+ top: 0;
+ }
+ }
+ /* 涓婂眰鍚戜笅 */
+ .topDown {
+ animation: topDown 1.5s 1;
+ animation-fill-mode: both;
+ }
+ @keyframes topDown
+ {
+ from {
+ opacity: 1;
+ /* background-color:red; */
+ top: 0;
+ }
+ to {
+ opacity: 0.5;
+ /* background-color:blue; */
+ top:-1080px
+ }
+ }
+ /* 涓嬪眰鍚戜笂 */
+ .floorUp {
+ animation: floorUp 1.5s 1;
+ animation-fill-mode: both;
+ }
+ @keyframes floorUp {
+ from {
+ opacity: 0.5;
+ /* background-color:blue; */
+ top: 0px;
+ }
+ to {
+ opacity: 1;
+ /* background-color:red; */
+ top: 1080px;
+ }
+ }
+ /* 涓嬪眰鍚戜笅 */
+ .floorDown {
+ animation: floorDown 1.5s 1;
+ animation-fill-mode: both;
+ }
+ @keyframes floorDown {
+ from {
+ opacity: 0.5;
+ /* background-color:blue; */
+ top: 1080px;
+ }
+ to {
+ opacity: 1;
+ /* background-color:red; */
+ top: -0px;
+ }
+ }
+ .top-screen {
+ position: fixed;
+ width: 1920px;
+ height: 1080px;
+ /* top: -1000px; */
+ background-image: url(../../static/background.png);
+ /* background:red; */
+ /* animation:upMove 1.5s 1; */
+ z-index: 999;
+ }
+ .floor-screen {
+ width: 1920px;
+ height: 1080px;
+ position: relative;
+ color: #FFFFFF;
+ text-align: center;
+ font-size: 200rpx;
+ letter-spacing: 5rpx;
+ background-image: url(../../static/background.png);
+ }
+ .container {
+ width: 1920px;
+ height: 1080px;
+
+ position: relative;
+ /* background: #000428;
+ background: -webkit-linear-gradient(to right, #004e92, #000428);
+ background: linear-gradient(to right, #004e92, #000428); */
+ }
+ .head {
+ /* background-color: #55aaff; */
+ width: 100%;
+ height: 10%;
+ text-align: center;
+ line-height: 110px;
+ color: #FFFFFF;
+ font-size: 40px;
+ font-weight: 700;
+ letter-spacing: 5px;
+ }
+ .head text {
+ transform: scale(1,0.9);
+ }
+ .time-tools {
+ height: 5%;
+ /* background-color: #007AFF; */
+ position: absolute;
+ top: 0;
+ float: right;
+ right: 50px;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 70px;
+ letter-spacing: 1px;
+ }
+ .button-left {
+ position: absolute;
+ background-image: url(../../static/right.png);
+ background-size: 100% 100%;
+ top: 1.8%;
+ left: 21.3%;
+ width: 13.5%;
+ height: 8.5%;
+ transform: scaleX(-1);
+ }
+ .button-right {
+ position: absolute;
+ background-image: url(../../static/right.png);
+ background-size: 100% 100%;
+ top: 1.8%;
+ left: 65%;
+ width: 13.5%;
+ height: 8.5%;
+ }
+ .main {
+ /* background-color: #3F536E; */
+ position: relative;
+ width: 100%;
+ height: 90%;
+ }
+ .main-sides {
+ /* background-color: #004E92; */
+ position: relative;
+ display: inline-block;
+ float: left;
+ width: 50%;
+ height: 100%;
+ /* margin: 2% auto 0 3.2%;
+ border: 1px solid rgba(20, 80, 136, 1); */
+ }
+ .box {
+ position: relative;
+ /* background-color: #ffffff; */
+ margin: 3% 2% 0 2%;
+ width: 96%;
+ height: 30%;
+ border: 1px solid rgba(20, 80, 136, 1);
+ overflow: hidden;
+ }
+ .box-lg {
+ height: 94%;
+ }
+ .box-border {
+ position: absolute;
+ /* background-color: #4CD964; */
+ width: 10px;
+ height: 10px;
+ }
+ .box-border1 {
+ top: 0;
+ left: 0;
+ border-left: 2px solid #31c4c4;
+ border-top: 2px solid #31c4c4;
+ }
+ .box-border2 {
+ top: 0;
+ right: 0;
+ border-right: 2px solid #31c4c4;
+ border-top: 2px solid #31c4c4;
+ }
+ .box-border3 {
+ bottom: 0;
+ left: 0;
+ border-bottom: 2px solid #31c4c4;
+ border-left: 2px solid #31c4c4;
+ }
+ .box-border4 {
+ bottom: 0;
+ right: 0;
+ border-right: 2px solid #31c4c4;
+ border-bottom: 2px solid #31c4c4;
+ }
+ .content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
+ .charts-box {
+ width: 80%;
+ height: 230px;
+ margin-left: 10%;
+ /* background-color: #fff; */
+ }
+ .ring {
+ display: inline-block;
+ float: left;
+ width: 60%;
+ height: 300px;
+ margin-left: -10%;
+ }
+ .box-item {
+ /* background-color: #2C405A; */
+ width: 92%;
+ height: 20%;
+ margin-left: 4%;
+ padding-top: 1em;
+ color: #FFFFFF;
+ }
+ .introduce {
+ height: 30%;
+ }
+ .introduce h2 {
+ letter-spacing: 5px;
+
+ }
+ .english {
+ font-size: 14px;
+ }
+ .introduce-content {
+ font-size: 20px;
+ padding-top: 2em;
+ text-indent: 2em;
+ line-height: 2em;
+ }
+ .charge-info {
+ /* background-color: #2C405A; */
+ height: 45%;
+ }
+ .charge-info-item {
+ /* background-color: #EE6666; */
+ display: inline-block;
+ width: 50%;
+ height: 40%;
+ }
+ .charge-info-item image {
+ display: inline-block;
+ float: left;
+ /* background-color: #4CD964; */
+ height: 100%;
+ width: 20%;
+ }
+ .charge-info-item view {
+ display: inline-block;
+ position: relative;
+ margin-left: 10%;
+ width: 70%;
+ height: 49%;
+ /* background-color: #1890FF; */
+ }
+ .charge-info-item .count, .charge-info-item .unit{
+ position: absolute;
+ display: inline-block;
+ font-size: 32px;
+ bottom: 0;
+ padding-left: 5%;
+ }
+ .charge-info-item .unit {
+ font-size: 16px;
+ float: right;
+ right: 20%;
+ }
+ .footer {
+ position: absolute;
+ border: 1px solid rgba(20, 80, 136, 1);
+ height: 15%;
+ }
+ .use-info {
+ /* background-color: #007AFF; */
+ }
+ .use-left {
+ display: inline-block;
+ /* background-color: #2C405A; */
+ width: 40%;
+ }
+ .use-right {
+ display: inline-block;
+ /* background-color: #2C405A; */
+ float: right;
+ width: 20%;
+ }
+ .use-main {
+ width: 100%;
+ height: 75%;
+ /* background-color: #4CD964; */
+ }
+ .use-main .left {
+ /* background-color: #ffaa7f; */
+ display: inline-block;
+ float: left;
+ height: 100%;
+ width: 70%;
+ line-height: 20px;
+ }
+ .left .progressBar {
+ /* margin-left: ; */
+ margin-top: 9%;
+ width: 100%;
+ height: 20%;
+ background-color: #233751;
+ border-radius: 20px;
+ }
+ .left .progress {
+ /* width: 90%; */
+ height: 100%;
+ background-color: #FF5722;
+ border-radius: 20px;
+ }
+ .left progress {
+ margin-left: 10%;
+ margin-top: 10%;
+ display: block;
+ }
+ .use-main .right {
+ /* background-color: #ffaaff; */
+ display: inline-block;
+ float: right;
+ height: 100%;
+ width: 20%;
+ font-size: 40px;
+ color: #FF5722;
+ line-height: 130px;
+ }
+ .box-tp {
+ height: 30%;
+ }
+ .box-tp .sub-main {
+ /* background-color: #FFFFFF; */
+ }
+ .box-md {
+ height: 43%;
+ }
+ .box-md .sub-main {
+ }
+ .sub-main-right {
+ display: inline-block;
+ height: 100%;
+ width: 50%;
+ }
+ .sub-info {
+ width: 100%;
+ height: 33%;
+ }
+ .sub-info image {
+ display: inline-block;
+ float: left;
+ height: 100%;
+ width: 15%;
+ }
+ .sub-info text {
+ display: inline-block;
+ width: 40%;
+ height: 100%;
+ text-align: center;
+ line-height: 120px;
+ font-size: 20px;
+ }
+ .box-bt {
+ background-color: #063A7B;
+ border: none;
+ height: 15%;
+ color: #FFFFFF;
+ }
+ .box-bt image {
+ position: absolute;
+ float: right;
+ right: 0;
+ top: 0;
+ width: 20%;
+ height: 100%;
+ }
+ .box-bt {
+ font-size: 36px;
+ line-height: 140px;
+ text-indent: 5em;
+ }
+ .right-item {
+ height: 94%;
+ }
+ .sub-left {
+ display: inline-block;
+ float: left;
+ width: 40%;
+ }
+ .sub-right {
+ display: inline-block;
+ float: right;
+ width: 20%;
+ }
+ .sub-main {
+ position: absolute;
+ /* background-color: #31C4C4; */
+ width: 92%;
+ height: 80%;
+ bottom: 0;
+ }
+</style>
--
Gitblit v1.9.1