first commit
This commit is contained in:
commit
c230afe1e5
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,415 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
||||
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/element-uiV2.15.13.js"></script>
|
||||
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
||||
<link rel="stylesheet" href="./styles/element-uiV2.15.13.css" />
|
||||
<title id="titname">demo</title>
|
||||
<style type="text/css" media="screen">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font: 14px Microsoft YaHei;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* background: url(./assets/images/login.png) no-repeat; */
|
||||
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
||||
background-size: 100% 100%;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.content .list-table {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.preDealtail .label {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
/* 竖向滚动条宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 0px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 4px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table__fixed-right-patch {
|
||||
width: 5px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed-right {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
height: 7px !important;
|
||||
}
|
||||
|
||||
.el-table--fluid-height .el-table__fixed {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* //注意:hover */
|
||||
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
|
||||
/* // 滚动条的滑块 */
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
background-color: rgb(239, 243, 246);
|
||||
border-color: rgb(64, 158, 255);
|
||||
color: rgb(64, 158, 255);
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.my-dialog .el-dialog__wrapper .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-descriptions__header {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 10px 20px 10px;
|
||||
}
|
||||
|
||||
.el-descriptions-item__label:not(.is-bordered-label) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.el-descriptions-item__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.electricityDetails .el-descriptions-item__label:not(.is-bordered-label){
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content" id="app">
|
||||
<div>
|
||||
<el-form :inline="true" :model="formInfo" class="demo-form-inline">
|
||||
<el-form-item label="账单类型:">
|
||||
<el-select v-model="formInfo.billType" placeholder="选择账单类型" clearable
|
||||
>
|
||||
<el-option :label="item.label" :value="item.value" v-for="(item,index) in billOptions"
|
||||
:key="index"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表名称:">
|
||||
<el-input v-model="formInfo.tableName" placeholder="请输入表名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间:">
|
||||
<el-radio-group v-model="formInfo.time" @change="handleChange">
|
||||
<el-radio label="年">按年</el-radio>
|
||||
<el-radio label="月">按月</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="formInfo.year" v-if="formInfo.time=='年'" type="year" placeholder="选择年"
|
||||
value-format="yyyy" key="year">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="formInfo.month" v-if="formInfo.time=='月'" type="month" placeholder="选择月"
|
||||
value-format="yyyy-MM" key="month">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<!-- <el-button type="primary" @click="onSubmit">重置</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="list-table">
|
||||
<el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
|
||||
style="width: 100%; margin-top: 20px" max-height="600" min-height="500" height="800"
|
||||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||||
:cell-style="{textAlign:'center'}">
|
||||
<el-table-column type="index" width="180" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="bill_type" label="账单类型">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="表名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="bill_month" label="账单月份">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total_usage" label="总用量（kW·h）">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total_price" label="总费用（元）">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="billingDetails(scope.row)">账单详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-pagination background layout="total,sizes,prev, pager, next, jumper" :page-sizes="[5, 10, 15, 20]"
|
||||
:page-size="pagesize" :total="tableData.length" @current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange">
|
||||
</el-pagination>
|
||||
<el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
custom-class="my-dialog" width="60%">
|
||||
<!-- 电弹窗-->
|
||||
<el-descriptions :title="childTitle" :column="3" v-show="electricityShow">
|
||||
<el-descriptions-item label="用电时间">{{childFrom.electricity_time}}</el-descriptions-item>
|
||||
<el-descriptions-item label="总电量">{{childFrom.total_usage}}</el-descriptions-item>
|
||||
<el-descriptions-item label="总电费">{{childFrom.total_price}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions direction="vertical" :colon="false" v-show="electricityShow"
|
||||
class="electricityDetails">
|
||||
<el-descriptions-item label="电费详情">
|
||||
<el-table :data="childFrom.data" style="width: 100%"
|
||||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||||
:cell-style="{textAlign:'center'}">
|
||||
<el-table-column prop="type_name" label="示数类型">
|
||||
</el-table-column>
|
||||
<el-table-column prop="last_month_reading" label="电表上次读数">
|
||||
</el-table-column>
|
||||
<el-table-column prop="this_month_reading" label="电表本次读数">
|
||||
</el-table-column>
|
||||
<el-table-column prop="transformer_magn" label="电流倍率">
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltage_transformer" label="电压倍率">
|
||||
</el-table-column>
|
||||
<el-table-column prop="measure" label="表计电量">
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="电度用电价格">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 水弹窗-->
|
||||
<el-descriptions :title="childTitle" :column="3" v-show="!electricityShow">
|
||||
<el-descriptions-item label="账单时间">{{childFrom.electricity_time}}</el-descriptions-item>
|
||||
<el-descriptions-item label="总水量">{{childFrom.total_usage}}</el-descriptions-item>
|
||||
<el-descriptions-item label="总水费">{{childFrom.total_price}}</el-descriptions-item>
|
||||
<el-descriptions-item label="当月水量">{{waterVolume}}</el-descriptions-item>
|
||||
<el-descriptions-item label="水价" :span="4">{{price}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions direction="vertical" :colon="false" v-show="!electricityShow">
|
||||
<el-descriptions-item label="水费详情">
|
||||
<el-table :data="childFrom.data" style="width: 100%"
|
||||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||||
:cell-style="{textAlign:'center'}">
|
||||
<el-table-column prop="type_name" label="水表名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="last_month_reading" label="上月水码">
|
||||
</el-table-column>
|
||||
<el-table-column prop="this_month_reading" label="本月水码">
|
||||
</el-table-column>
|
||||
<el-table-column prop="measure" label="当月水量(吨)">
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="当月水费">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
|
||||
formInfo: {
|
||||
tableName: '', //用户名
|
||||
billType: '', //账单类型
|
||||
year: moment().format('YYYY'), //年单选
|
||||
month: '', //月单选
|
||||
time: '年'
|
||||
},
|
||||
childFrom: {}, //弹窗数据
|
||||
waterVolume:'', //当月水量
|
||||
price:'', //水价
|
||||
childTitle: '',
|
||||
//账单选项
|
||||
billOptions: [{
|
||||
value: '电',
|
||||
label: '电'
|
||||
}, {
|
||||
value: '水',
|
||||
label: '水'
|
||||
}],
|
||||
tableData: [], //表格数据
|
||||
//分页
|
||||
pagesize: 10,
|
||||
currentPage: 1,
|
||||
//详情弹窗
|
||||
dialogTableVisible: false,
|
||||
//公安弹窗
|
||||
electricityShow: true,
|
||||
//接口地址
|
||||
apiURL: 'http://172.16.1.253:8084/',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
methods: {
|
||||
//类型清空事件
|
||||
// setValueNull(){
|
||||
// this.onSubmit()
|
||||
// },
|
||||
//单选年/月
|
||||
handleChange() {
|
||||
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
let dataList = {
|
||||
bill_type: '',
|
||||
type: '',
|
||||
name: '',
|
||||
date: ''
|
||||
}
|
||||
if (this.formInfo.time == '年') {
|
||||
dataList.bill_type = this.formInfo.billType
|
||||
dataList.type = this.formInfo.time
|
||||
dataList.name = this.formInfo.tableName
|
||||
dataList.date = this.formInfo.year
|
||||
} else {
|
||||
dataList.bill_type = this.formInfo.billType
|
||||
dataList.type = this.formInfo.time
|
||||
dataList.name = this.formInfo.tableName
|
||||
dataList.date = this.formInfo.month
|
||||
}
|
||||
axios({
|
||||
method: "POST",
|
||||
url: this.apiURL + "Vue/Bill.aspx/getBillList",
|
||||
data: dataList,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
}).then((res) => {
|
||||
this.tableData = res.data.d
|
||||
})
|
||||
},
|
||||
//分页
|
||||
handleCurrentChange(cpage) {
|
||||
this.currentPage = cpage;
|
||||
},
|
||||
handleSizeChange(psize) {
|
||||
this.pagesize = psize;
|
||||
},
|
||||
//打开账单详情弹窗
|
||||
billingDetails(row) {
|
||||
console.log(row,'wwwwwwwwwwwwwww');
|
||||
this.dialogTableVisible = true
|
||||
this.electricityShow = row.bill_type == '电' ? true : false
|
||||
this.childFrom = row
|
||||
this.childTitle = row.bill_type == '电' ? this.childTitle = row.bill_month + '电费账单' : this.childTitle = row.bill_month + '水费账单'
|
||||
// waterVolume:'', //当月水量
|
||||
// price:'', //水价
|
||||
this.waterVolume = this.childFrom.data[0].measure
|
||||
this.price = this.childFrom.data[0].price
|
||||
}
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],t):t(e.dataTool={},e.echarts)}(this,function(e,t){"use strict";var i=Array.prototype.map;function l(e,t,r){if(e&&t){if(e.map&&e.map===i)return e.map(t,r);for(var a=[],o=0,n=e.length;o<n;o++)a.push(t.call(r,e[o],o,e));return a}}function v(e,t){return e.getAttribute(t)}function d(e,t){for(var r=e.firstChild;r;){if(1===r.nodeType&&r.nodeName.toLowerCase()===t.toLowerCase())return r;r=r.nextSibling}return null}function g(e,t){for(var r=e.firstChild,a=[];r;)r.nodeName.toLowerCase()===t.toLowerCase()&&a.push(r),r=r.nextSibling;return a}var r=(Object.freeze||Object)({parse:function(e){var t;if(!(t="string"==typeof e?(new DOMParser).parseFromString(e,"text/xml"):e)||t.getElementsByTagName("parsererror").length)return null;var r=d(t,"gexf");if(!r)return null;for(var a=d(r,"graph"),o=function(e){return e?l(g(e,"attribute"),function(e){return{id:v(e,"id"),title:v(e,"title"),type:v(e,"type")}}):[]}(d(a,"attributes")),n={},i=0;i<o.length;i++)n[o[i].id]=o[i];return{nodes:function(e,p){return e?l(g(e,"node"),function(e){var t={id:v(e,"id"),name:v(e,"label"),itemStyle:{normal:{}}},r=d(e,"viz:size"),a=d(e,"viz:position"),o=d(e,"viz:color"),n=d(e,"attvalues");if(r&&(t.symbolSize=parseFloat(v(r,"value"))),a&&(t.x=parseFloat(v(a,"x")),t.y=parseFloat(v(a,"y"))),o&&(t.itemStyle.normal.color="rgb("+[0|v(o,"r"),0|v(o,"g"),0|v(o,"b")].join(",")+")"),n){var i=g(n,"attvalue");t.attributes={};for(var l=0;l<i.length;l++){var u=i[l],s=v(u,"for"),f=v(u,"value"),c=p[s];if(c){switch(c.type){case"integer":case"long":f=parseInt(f,10);break;case"float":case"double":f=parseFloat(f);break;case"boolean":f="true"===f.toLowerCase()}t.attributes[s]=f}}}return t}):[]}(d(a,"nodes"),n),links:function(e){return e?l(g(e,"edge"),function(e){var t={id:v(e,"id"),name:v(e,"label"),source:v(e,"source"),target:v(e,"target"),lineStyle:{normal:{}}},r=t.lineStyle.normal,a=d(e,"viz:thickness"),o=d(e,"viz:color");return a&&(r.width=parseFloat(a.getAttribute("value"))),o&&(r.color="rgb("+[0|v(o,"r"),0|v(o,"g"),0|v(o,"b")].join(",")+")"),t}):[]}(d(a,"edges"))}}});function w(e,t){var r=(e.length-1)*t+1,a=Math.floor(r),o=+e[a-1],n=r-a;return n?o+n*(e[a]-o):o}function a(e,t){for(var r,a=[],o=[],n=[],i=(t=t||[]).boundIQR,l="none"===i||0===i,u=0;u<e.length;u++){n.push(u+"");var s=((r=e[u].slice()).sort(function(e,t){return e-t}),r),f=w(s,.25),c=w(s,.5),p=w(s,.75),v=s[0],d=s[s.length-1],g=(null==i?1.5:i)*(p-f),h=l?v:Math.max(v,f-g),b=l?d:Math.min(d,p+g);a.push([h,f,c,p,b]);for(var m=0;m<s.length;m++){var y=s[m];if(y<h||b<y){var x=[u,y];"vertical"===t.layout&&x.reverse(),o.push(x)}}}return{boxData:a,outliers:o,axisData:n}}var o="1.0.0";t.dataTool&&(t.dataTool.version=o,t.dataTool.gexf=r,t.dataTool.prepareBoxplotData=a),e.version=o,e.gexf=r,e.prepareBoxplotData=a});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,256 @@
|
|||
/**
|
||||
* pagination.js 1.5.1
|
||||
* A jQuery plugin to provide simple yet fully customisable pagination.
|
||||
* @version 1.5.1
|
||||
* @author mss
|
||||
* @url https://github.com/Maxiaoxiang/jQuery-plugins
|
||||
*
|
||||
* @调用方法
|
||||
* $(selector).pagination(option, callback);
|
||||
* -此处callback是初始化调用，option里的callback是点击页码后调用
|
||||
*
|
||||
* -- example --
|
||||
* $(selector).pagination({
|
||||
* ... // 配置参数
|
||||
* callback: function(api) {
|
||||
* console.log('点击页码调用该回调'); //切换页码时执行一次回调
|
||||
* }
|
||||
* }, function(){
|
||||
* console.log('初始化'); //插件初始化时调用该方法，比如请求第一次接口来初始化分页配置
|
||||
* });
|
||||
*/
|
||||
;
|
||||
(function (factory) {
|
||||
if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
|
||||
// AMD或CMD
|
||||
define(["jquery"], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = function (root, jQuery) {
|
||||
if (jQuery === undefined) {
|
||||
if (typeof window !== 'undefined') {
|
||||
jQuery = require('jquery');
|
||||
} else {
|
||||
jQuery = require('jquery')(root);
|
||||
}
|
||||
}
|
||||
factory(jQuery);
|
||||
return jQuery;
|
||||
};
|
||||
} else {
|
||||
//Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
//配置参数
|
||||
var defaults = {
|
||||
totalData: 0, //数据总条数
|
||||
showData: 0, //每页显示的条数
|
||||
pageCount: 9, //总页数,默认为9
|
||||
current: 1, //当前第几页
|
||||
prevCls: 'prev', //上一页class
|
||||
nextCls: 'next', //下一页class
|
||||
prevContent: '<', //上一页内容
|
||||
nextContent: '>', //下一页内容
|
||||
activeCls: 'active', //当前页选中状态
|
||||
coping: false, //首页和尾页
|
||||
isHide: false, //当前页数为0页或者1页时不显示分页
|
||||
homePage: '', //首页节点内容
|
||||
endPage: '', //尾页节点内容
|
||||
keepShowPN: false, //是否一直显示上一页下一页
|
||||
mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量
|
||||
count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数
|
||||
jump: false, //跳转到指定页数
|
||||
jumpIptCls: 'jump-ipt', //文本框内容
|
||||
jumpBtnCls: 'jump-btn', //跳转按钮
|
||||
jumpBtn: '跳转', //跳转按钮文本
|
||||
callback: function () {} //回调
|
||||
};
|
||||
|
||||
var Pagination = function (element, options) {
|
||||
//全局变量
|
||||
var opts = options, //配置
|
||||
current, //当前页
|
||||
$document = $(document),
|
||||
$obj = $(element); //容器
|
||||
|
||||
/**
|
||||
* 设置总页数
|
||||
* @param {int} page 页码
|
||||
* @return opts.pageCount 总页数配置
|
||||
*/
|
||||
this.setPageCount = function (page) {
|
||||
return opts.pageCount = page;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取总页数
|
||||
* 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
|
||||
* @return {int} 总页数
|
||||
*/
|
||||
this.getPageCount = function () {
|
||||
return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前页
|
||||
* @return {int} 当前页码
|
||||
*/
|
||||
this.getCurrent = function () {
|
||||
return current;
|
||||
};
|
||||
|
||||
/**
|
||||
* 填充数据
|
||||
* @param {int} 页码
|
||||
*/
|
||||
this.filling = function (index) {
|
||||
var html = '';
|
||||
current = parseInt(index) || parseInt(opts.current); //当前页码
|
||||
var pageCount = this.getPageCount(); //获取的总页数
|
||||
switch (opts.mode) { //配置模式
|
||||
case 'fixed': //固定按钮模式
|
||||
html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
|
||||
if (opts.coping) {
|
||||
var home = opts.coping && opts.homePage ? opts.homePage : '1';
|
||||
html += '<a href="javascript:;" data-page="1">' + home + '</a>';
|
||||
}
|
||||
var start = current > opts.count - 1 ? current + opts.count - 1 > pageCount ? current - (opts.count - (pageCount - current)) : current - 2 : 1;
|
||||
var end = current + opts.count - 1 > pageCount ? pageCount : start + opts.count;
|
||||
for (; start <= end; start++) {
|
||||
if (start != current) {
|
||||
html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
|
||||
} else {
|
||||
html += '<span class="' + opts.activeCls + '">' + start + '</span>';
|
||||
}
|
||||
}
|
||||
if (opts.coping) {
|
||||
var _end = opts.coping && opts.endPage ? opts.endPage : pageCount;
|
||||
html += '<a href="javascript:;" data-page="' + pageCount + '">' + _end + '</a>';
|
||||
}
|
||||
html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
|
||||
break;
|
||||
case 'unfixed': //不固定按钮模式
|
||||
if (opts.keepShowPN || current > 1) { //上一页
|
||||
html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
|
||||
} else {
|
||||
if (opts.keepShowPN == false) {
|
||||
$obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
|
||||
}
|
||||
}
|
||||
if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
|
||||
var home = opts.coping && opts.homePage ? opts.homePage : '1';
|
||||
html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><span>...</span>' : '';
|
||||
}
|
||||
var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
|
||||
var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
|
||||
for (; start <= end; start++) {
|
||||
if (start <= pageCount && start >= 1) {
|
||||
if (start != current) {
|
||||
html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
|
||||
} else {
|
||||
html += '<span class="' + opts.activeCls + '">' + start + '</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
|
||||
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
|
||||
html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
|
||||
}
|
||||
if (opts.keepShowPN || current < pageCount) { //下一页
|
||||
html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
|
||||
} else {
|
||||
if (opts.keepShowPN == false) {
|
||||
$obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'easy': //简单模式
|
||||
break;
|
||||
default:
|
||||
}
|
||||
html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
|
||||
$obj.empty().html(html);
|
||||
};
|
||||
|
||||
//绑定事件
|
||||
this.eventBind = function () {
|
||||
var that = this;
|
||||
var pageCount = that.getPageCount(); //总页数
|
||||
var index = 1;
|
||||
$obj.off().on('click', 'a', function () {
|
||||
if ($(this).hasClass(opts.nextCls)) {
|
||||
if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
|
||||
$(this).addClass('disabled');
|
||||
return false;
|
||||
} else {
|
||||
index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
|
||||
}
|
||||
} else if ($(this).hasClass(opts.prevCls)) {
|
||||
if ($obj.find('.' + opts.activeCls).text() <= 1) {
|
||||
$(this).addClass('disabled');
|
||||
return false;
|
||||
} else {
|
||||
index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
|
||||
}
|
||||
} else if ($(this).hasClass(opts.jumpBtnCls)) {
|
||||
if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
|
||||
index = parseInt($obj.find('.' + opts.jumpIptCls).val());
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
index = parseInt($(this).data('page'));
|
||||
}
|
||||
that.filling(index);
|
||||
typeof opts.callback === 'function' && opts.callback(that);
|
||||
});
|
||||
//输入跳转的页码
|
||||
$obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
|
||||
var $this = $(this);
|
||||
var val = $this.val();
|
||||
var reg = /[^\d]/g;
|
||||
if (reg.test(val)) $this.val(val.replace(reg, ''));
|
||||
(parseInt(val) > pageCount) && $this.val(pageCount);
|
||||
if (parseInt(val) === 0) $this.val(1); //最小值为1
|
||||
});
|
||||
//回车跳转指定页码
|
||||
$document.keydown(function (e) {
|
||||
if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
|
||||
var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
|
||||
that.filling(index);
|
||||
typeof opts.callback === 'function' && opts.callback(that);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//初始化
|
||||
this.init = function () {
|
||||
this.filling(opts.current);
|
||||
this.eventBind();
|
||||
if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') {
|
||||
$obj.hide();
|
||||
} else {
|
||||
$obj.show();
|
||||
}
|
||||
};
|
||||
this.init();
|
||||
};
|
||||
|
||||
$.fn.pagination = function (parameter, callback) {
|
||||
if (typeof parameter == 'function') { //重载
|
||||
callback = parameter;
|
||||
parameter = {};
|
||||
} else {
|
||||
parameter = parameter || {};
|
||||
callback = callback || function () {};
|
||||
}
|
||||
var options = $.extend({}, defaults, parameter);
|
||||
return this.each(function () {
|
||||
var pagination = new Pagination(this, options);
|
||||
callback(pagination);
|
||||
});
|
||||
};
|
||||
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,317 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
||||
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/element-uiV2.15.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
||||
<link rel="stylesheet" href="./styles/element-uiV2.15.1.css" />
|
||||
<title id="titname">demo</title>
|
||||
<style type="text/css" media="screen">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font: 14px Microsoft YaHei;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* background: url(./assets/images/login.png) no-repeat; */
|
||||
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
||||
background-size: 100% 100%;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.content .list-table {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.preDealtail .label {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
/* 竖向滚动条宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 0px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 4px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table__fixed-right-patch {
|
||||
width: 5px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed .el-table__fixed-body-wrapper {
|
||||
height: 503px !important;
|
||||
bottom: 0px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed-right {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
height: 7px !important;
|
||||
}
|
||||
|
||||
.el-table--fluid-height .el-table__fixed {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* //注意:hover */
|
||||
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
|
||||
/* // 滚动条的滑块 */
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: 510px !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar {
|
||||
width: 6PX !important;
|
||||
height: 6PX !important;
|
||||
}
|
||||
|
||||
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right {
|
||||
height: calc(100% - 6PX) !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
|
||||
height: 100% !important;
|
||||
bottom: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 6PX !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
|
||||
right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div > -->
|
||||
|
||||
<div class="content" id="app">
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="开始时间：">
|
||||
<div>
|
||||
<el-date-picker v-model="addForm.date_range_start" type="date" placeholder="开始日期"
|
||||
:picker-options="pickerOptions0" key="day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间：">
|
||||
<div>
|
||||
<el-date-picker v-model="addForm.date_range_end" type="date" placeholder="结束日期"
|
||||
:picker-options="pickerOptions1" key="day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="list-table">
|
||||
<span>数据列表：</span>
|
||||
<el-table :data="tableData" ref="table" border style="width: 100%; margin-top: 20px" max-height="700"
|
||||
min-height="500" height="600"
|
||||
:header-cell-style="{'text-align':'center','background':'rgb(235,235,235)'}"
|
||||
:cell-style="{'text-align':'center'}">
|
||||
<el-table-column prop="device_id" label="能量表编号" fixed width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="place" label="能量表位置" fixed width="173">
|
||||
</el-table-column>
|
||||
<el-table-column prop="supply_water_temperature" label="供水温度(℃)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="return_water_temperature" label="回水温度(℃)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="instantaneous_delivery" label="瞬时流量(m³/h)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="instant_heat" label="瞬时热量(GJ/h)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="positive_cumulative_heat" label="正累计热量(GJ/h)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="negative_cumulative_heat" label="负累计热量(GJ/h)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="net_cumulative_heat" label="净累计热量(GJ/h)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="positive_total_flow" label="正累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="negative_total_flow" label="负累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cumulative_traffic" label="净累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="accumulated_traffic_day" label="今天累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="accumulated_traffic_month" label="本月累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="accumulated_traffic_year" label="今年累积流量(m³)" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="acquisition_time" label="采集时间" width="200">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
form: {
|
||||
},
|
||||
addForm: {
|
||||
date_range_end: moment().format("YYYY-MM-DD"),
|
||||
date_range_start: moment().subtract(7, 'days').format("YYYY-MM-DD"),
|
||||
},
|
||||
pickerOptions0: { //结束时间不能大于开始时间
|
||||
disabledDate: (time) => {
|
||||
if (app.addForm.date_range_end) {
|
||||
return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerOptions1: {
|
||||
disabledDate: (time) => {
|
||||
if (app.addForm.date_range_start) {
|
||||
return time.getTime() < new Date(app.addForm.date_range_start).getTime() - 1 *
|
||||
24 * 60 * 60 * 1000; //可以选择同一天
|
||||
}
|
||||
}
|
||||
},
|
||||
tableData: [],
|
||||
},
|
||||
mounted() {
|
||||
let timeData = {
|
||||
start_date: moment(this.addForm.date_range_start).format("YYYY-MM-DD"),
|
||||
end_date: moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
||||
}
|
||||
this.getTabel(timeData)
|
||||
},
|
||||
methods: {
|
||||
//获取表格数据
|
||||
getTabel(date) {
|
||||
let timeData = date
|
||||
axios({
|
||||
method: "POST",
|
||||
url: "http://172.16.1.253:8087/Vue/Energy.aspx/getEnergyList",
|
||||
data: timeData,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
}).then((res) => {
|
||||
this.tableData = res.data.d
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
this.tableData[i].create_time = this.formatStringDate(this.tableData[i].create_time)
|
||||
this.tableData[i].acquisition_time = this.formatStringDate(this.tableData[i].acquisition_time)
|
||||
}
|
||||
})
|
||||
},
|
||||
//通过筛选时间查询
|
||||
onSubmit() {
|
||||
let timeData = {
|
||||
start_date: moment(this.addForm.date_range_start).format("YYYY-MM-DD"),
|
||||
end_date: moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
||||
}
|
||||
this.getTabel(timeData)
|
||||
},
|
||||
//时间戳转化方法
|
||||
formatStringDate(jsondate) {
|
||||
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
|
||||
if (jsondate.indexOf("+") > 0) {
|
||||
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
|
||||
}
|
||||
else if (jsondate.indexOf("-") > 0) {
|
||||
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
|
||||
}
|
||||
var date = new Date(parseInt(jsondate, 10));
|
||||
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||||
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*重载iview*/
|
||||
.ivu-table{
|
||||
color:black;background: #FFFFFF;/* background: #FFFFFF */
|
||||
}
|
||||
.ivu-table-header,.ivu-table-body{
|
||||
background: #0E2039;
|
||||
}
|
||||
|
||||
.ivu-table td, .ivu-table th{height: 35px;}
|
||||
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td{
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.ivu-table th{
|
||||
color: #000000;
|
||||
border: none;
|
||||
cursor: auto;
|
||||
background-color: #FFFFFF;/* background: #0E2039 */
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
.ivu-table-wrapper{
|
||||
border: 0;
|
||||
}
|
||||
.ivu-table::before,.ivu-table::after{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.ivu-message{color:#333;font-size: 12px;}
|
||||
.ivu-date-picker .ivu-select-dropdown{color:#000000;}
|
||||
.ivu-date-picker-cells span em{color:#000000;}
|
||||
.ivu-date-picker-cells-cell-range em{color:#333;}
|
||||
.ivu-checkbox-wrapper{font-family: Microsoft YaHei;font-size: 14px; color: #000000;}
|
||||
.ivu-checkbox-inner{background: rgba(0,0,0,0)}
|
||||
.ivu-select-dropdown{background-color: rgba(250,250,250,0.80);}/* background-color: rgba(19,40,69,0.80) */
|
||||
.ivu-dropdown-menu{overflow-y:auto;max-height: 500px;}
|
||||
.ivu-dropdown-item,.ivu-dropdown a{color:#000000;height: 30px;line-height: 30px;}
|
||||
.ivu-dropdown-item:hover{background: #FFFFFF;}
|
||||
.ivu-input{background:#FFFFFF;color:#000000;font-size: 14px;height: 24px;border:none;border-radius:0;}
|
||||
.ivu-input-icon-normal+.ivu-input{padding-right: 0;}
|
||||
.ivu-btn{border-radius: 0;}
|
||||
.ivu-select-selection{background: rgba(255,255,255,0.80);border-radius: 0;color:#000000;}/* background: rgba(31,35,39,0.80) */
|
||||
.ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td {background-color: #F0F0F0;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper-checked{background:#FAFAFA;box-shadow: 0px 0 0 0 red;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper{background:#FAFAFA;border:none;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper:last-child{border-radius:0;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper:first-child{border-radius:0;border:none;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper:after, .ivu-radio-group-button .ivu-radio-wrapper:before{width:0px;display:none;}
|
||||
.ivu-modal-content{background: #1F2327;;}
|
||||
.ivu-modal-header-inner{color:white;}
|
||||
.ivu-modal-body{background:#FFFFFF;}
|
||||
.ivu-form .ivu-form-item-label{color:#000000;}
|
||||
.ivu-modal-header,.ivu-modal-footer{border:none;}
|
||||
.ivu-input-number{border: none;border-radius: 0;color:#000000;}
|
||||
.ivu-input-number-input{background: #FAFAFA;border-radius: 0;color:#000000;}
|
||||
.ivu-page-next, .ivu-page-prev {background-color: rgba(0,0,0,0);}
|
||||
.ivu-page-item-jump-next, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev{border: none;}
|
||||
.ivu-page-options-elevator input{background: #FFFFFF;border: none;padding:0;border-radius: 0;color:#000000;text-align: center;}
|
||||
.ivu-page-item{background-color: #FFFFFF;border-radius: 0;border: none;color:#000000;}
|
||||
.ivu-page-item-active a, .ivu-page-item-active:hover a{color:black;}
|
||||
.ivu-input[disabled], fieldset[disabled] .ivu-input {background-color: #222324;color: #000000;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper-checked{color: #000000;}
|
||||
.ivu-select-item-selected, .ivu-select-item-selected:hover {color: #000000;}
|
||||
.ivu-select-item-focus {background: #E6F7FF;}
|
||||
.ivu-select-item:hover {background: #CCCCCC;}
|
||||
.ivu-radio-group-button .ivu-radio-wrapper-checked:hover {color: #000000;}
|
||||
.ivu-btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1890FF;
|
||||
/* border-color: #1890FF; */
|
||||
border:none;
|
||||
}
|
||||
.ivu-btn-primary:hover{
|
||||
color: #fff;
|
||||
background-color: #1890FF;
|
||||
border-color: #1890FF;
|
||||
}
|
||||
.ivu-checkbox-checked .ivu-checkbox-inner {
|
||||
border-color: #1890FF;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.ivu-select-visible .ivu-select-selection {border-color: #1890FF;box-shadow: 0 0 0 0 }
|
||||
/* .ivu-radio-button .ivu-radio-wrapper-checked .ivu-radio-focus{
|
||||
box-shadow:-1px 0 0 0 #2d8cf0,0 0 0 1px rgb(45,140,240);
|
||||
transition:all .2s ease-in-out;
|
||||
} */
|
||||
/*自定义*/
|
||||
body{margin: 0;height: 100%;width: 100%;font: 14px Microsoft YaHei;color:black;background: #F7F7F7;;-webkit-user-select: none;}/* background: #051935; */
|
||||
*{-webkit-box-sizing:unset;box-sizing:unset;}
|
||||
#app{height: 100%;width: 100%;}
|
||||
.shadow{box-shadow:1px 1px 5px rgb(22, 22, 22);}
|
||||
.menu-icon{width: 26px;height: 26px;}
|
||||
.section-title{font-size:16px;height: 22px;line-height: 22px;background: #F9F9F9;padding: 10px;font-family: Microsoft YaHei;border-bottom: 1px solid #f0f0f0;}/* background: #FFFFFF;*/
|
||||
.section-title:before{content: "";display: inline-block;width:2px;height: 20px;margin: 0 10px 0 0px; background-color: #1890FF;vertical-align: top;}
|
||||
.detail-brief-line{font-size:14px;border: 1px solid #F0F0F0;border-bottom: none;border-left: none;height: 40px;line-height: 40px;margin: 0 10px;}
|
||||
.detail-brief-line-lable{float: left;width:70px;color: black;border-left:1px solid #F0F0F0; padding-left: 10px;}
|
||||
.detail-brief-line-value{float: left;width:156px;padding-left: 0px;}
|
||||
.spin-icon-load{animation: ani-demo-spin 1s linear infinite;}
|
||||
|
|
@ -0,0 +1,694 @@
|
|||
@import "./dark/index.css";
|
||||
@import "./dark/time.css";
|
||||
@import "./dark/statistics.css";
|
||||
@import "./dark/structural.css";
|
||||
@import "./dark/scenario.css";
|
||||
@import "./dark/warning.css";
|
||||
@import "./dark/system.css";
|
||||
@import "./dark/configure.css";
|
||||
/*深色皮肤*/
|
||||
body{
|
||||
/* background-color:#0A061E; */
|
||||
font-size: 14px;
|
||||
color:white}
|
||||
.daterangepicker {
|
||||
color:#4a4a4a !important;
|
||||
position: absolute;
|
||||
}
|
||||
.page-controller{
|
||||
/*display: block;*/
|
||||
visibility: visible;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-header{
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #161630;
|
||||
}
|
||||
.page-header .logo{
|
||||
/* width:650px; */
|
||||
height: 50px;
|
||||
line-height: 52px;
|
||||
padding-left:48px;
|
||||
float:left;
|
||||
font-size:16px;
|
||||
color:white;
|
||||
background:url(../assets/images/logo-01.png) no-repeat 10px center / 30px 30px;
|
||||
}
|
||||
.page-header .briName{
|
||||
height: 50px;
|
||||
line-height: 52px;
|
||||
float:left;
|
||||
font-size:16px;
|
||||
color:white;
|
||||
}
|
||||
.page-header .user{
|
||||
width:calc(100% - 650px);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float:right;
|
||||
font-size:14px;
|
||||
color:white;
|
||||
text-align: right;
|
||||
padding:0 10px;
|
||||
}
|
||||
.page-header .user .themes-picker{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.page-header .user .themes-picker:hover ul{
|
||||
display: block;
|
||||
}
|
||||
.page-header .user .themes-picker > img{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.page-header .user .themes-picker ul {
|
||||
border: 1px solid rgba(80,80,99,0.49);
|
||||
padding: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:18px;
|
||||
left: 0;
|
||||
background: #142845;
|
||||
z-index: 9999;
|
||||
width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-header .user .themes-picker ul li{
|
||||
width: calc((100% - 5px) / 2);
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-header .user .themes-picker ul li + li{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.page-header .user .themes-picker ul li.active{
|
||||
border:1px red solid;
|
||||
}
|
||||
.page-header .user .themes-picker ul li img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/* 管理员 */
|
||||
.page-header .user .userinfo:hover ul{
|
||||
display: block;
|
||||
}
|
||||
.page-header .user .userinfo > img{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.page-header .user .userinfo ul {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
z-index: 101;
|
||||
display: none;
|
||||
}
|
||||
.page-header .user .userinfo ul li{
|
||||
width: calc(100% - 0px);
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
background: #111029;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.page-header .user .userinfo ul li:hover{
|
||||
background: #252540;
|
||||
}
|
||||
.page-header .user .userinfo ul li span{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/*.page-header .user .themes-picker li{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border:2px transparent solid;
|
||||
cursor:pointer;
|
||||
}*/
|
||||
/*.page-header .user .themes-picker li[data-theme='normal']{
|
||||
background: white;
|
||||
}
|
||||
.page-header .user .themes-picker li[data-theme='dark']{
|
||||
background: black;
|
||||
}
|
||||
.page-header .user .themes-picker li.active{
|
||||
border-color:#364C94;
|
||||
}*/
|
||||
.page-header .user .datetimer{
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-header .user .userinfo{
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-header .user .userinfo img{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
top:10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-nav{
|
||||
width: 72px;
|
||||
height: 100%;
|
||||
background: #161630;
|
||||
position: relative;
|
||||
}
|
||||
.page-nav .themes-picker{
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
bottom:50px;
|
||||
width: 52px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background: #2D2D44;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-nav .themes-picker .dot{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #81818E;
|
||||
margin: 2px
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .dot{
|
||||
float: right;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .dot{
|
||||
float: left;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .label{
|
||||
left:6px;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .label::before{
|
||||
content: '浅色'
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .label{
|
||||
left:22px;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .label::before{
|
||||
content: '深色'
|
||||
}
|
||||
.page-nav .themes-picker .label{
|
||||
color:#717181;
|
||||
position: absolute;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
top:0;
|
||||
}
|
||||
.page-nav > ul{
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
.page-nav > ul > li{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
color:white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(1){
|
||||
background-image: url(../assets/images/nav_1.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(2){
|
||||
background-image: url(../assets/images/nav_2.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(3){
|
||||
background-image: url(../assets/images/nav_3.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(4){
|
||||
background-image: url(../assets/images/nav_4.png);
|
||||
}
|
||||
.page-nav > ul > li:nth-child(5){
|
||||
background-image: url(../assets/images/nav_5.png);
|
||||
height:92px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(6){
|
||||
background-image: url(../assets/images/nav_6.png);
|
||||
height:92px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(7){
|
||||
background-image: url(../assets/images/nav_7.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(8){
|
||||
background-image: url(../assets/images/nav_8.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(9){
|
||||
background-image: url(../assets/images/nav_9.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(10){
|
||||
background-image: url(../assets/images/nav_10.png)
|
||||
}
|
||||
.page-nav > ul > li.active{
|
||||
background-color: #364C94;
|
||||
}
|
||||
.page-nav > ul > li:hover{
|
||||
background-color: rgba(54,76,148,.2);
|
||||
}
|
||||
.page-nav > ul > li > ul{
|
||||
display: none;
|
||||
position: absolute;
|
||||
left:70px;
|
||||
top:10px;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
z-index:99;
|
||||
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-nav > ul > li > ul > li{
|
||||
display: table-row;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
color:#6c6c6c;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.page-nav > ul > li > ul > li > span{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.page-nav > ul > li > ul > li:hover{
|
||||
background-color: #5985F9;
|
||||
color:white;
|
||||
}
|
||||
.page-nav > ul > li:hover ul{
|
||||
display: table;
|
||||
}
|
||||
|
||||
.page-body{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.page-body .page-box{
|
||||
position: absolute;
|
||||
/* background: #111029; */
|
||||
}
|
||||
.page-body .page-Box{
|
||||
position: absolute;
|
||||
/* background: #111029; */
|
||||
}
|
||||
.page-body .page-box .title{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #191934;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page-body .page-Box .title{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #191934;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* .page-body .page-Box .content .videoAdress{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #191934;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
} */
|
||||
.page-body .page-box .title-right {
|
||||
color: #75798a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.page-body .page-box .title-right:hover .title-right-tip {
|
||||
display: block;
|
||||
}
|
||||
.page-body .page-box .title-right-tip {
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
background: #171732;
|
||||
line-height: 22px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
.page-body .page-box .title ul{
|
||||
display: inline-block;
|
||||
}
|
||||
.page-body .page-box .title li{
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
padding: 0 20px;
|
||||
border-bottom: 4px transparent solid;
|
||||
}
|
||||
.page-body .page-box .title li.active{
|
||||
border-color:#5C89FF;
|
||||
}
|
||||
.page-body .page-Box .title span{
|
||||
color:white;
|
||||
line-height: 40px;
|
||||
}
|
||||
.page-body .page-box .title span{
|
||||
color:white;
|
||||
line-height: 40px;
|
||||
}
|
||||
.page-body .page-box .content{
|
||||
width: 100%;
|
||||
height:calc(100% - 40px);
|
||||
/* height:100%; */
|
||||
}
|
||||
.page-body .page-Box .videoBox .content{
|
||||
width: 100%;
|
||||
height:calc(100% - 40px);
|
||||
position: relative;
|
||||
/* height:100%; */
|
||||
}
|
||||
|
||||
.content .videoAdressAA{
|
||||
/* width: 100px; */
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
background: rgba(10, 6, 30, 0.35);
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.content .videoAdressAA img{
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
}
|
||||
.content .videoAdressAA span{
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.page-body .dynamicNotice .page-box .title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
margin-left: 10px;
|
||||
line-height: 32px;
|
||||
color: #75798a;
|
||||
background: #191934;
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
/* 报表管理分页器样式 */
|
||||
.bottom_pagination /deep/ .el-pagination__total{
|
||||
color: #fff;
|
||||
}
|
||||
.bottom_pagination /deep/ .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
/* 视频弹框 */
|
||||
.video-popup {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 500px;
|
||||
width: 650px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
z-index: 110;
|
||||
background: #111029;
|
||||
display: none;
|
||||
}
|
||||
.video-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.video-popup .video-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
z-index: 120;
|
||||
}
|
||||
.video-popup .video-box .content {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.video-popup .video-box .content video {
|
||||
height: 100%;
|
||||
width: 72%;
|
||||
}
|
||||
.video-popup .video-box .content .video-content {
|
||||
height: 100%;
|
||||
width: 72%;
|
||||
position: relative;
|
||||
}
|
||||
.video-popup .video-box .content iframe {
|
||||
/* height: calc(100% - 30px); */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-popup .video-box .content .videoName {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: rgba(10, 6, 30, 0.48);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.video-control {
|
||||
/* height: calc(100% - 0px); */
|
||||
/* height: 250px; */
|
||||
width: 146px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.video-control-top {
|
||||
width: calc(100% - 20px);
|
||||
height: calc(50% - 20px);
|
||||
/* padding: 10px; */
|
||||
margin: 10px 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-control-top .img-box {
|
||||
width: calc(70% - 12px);
|
||||
height: 70%;
|
||||
background: url(../assets/images/yuanbg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 0.3;
|
||||
/* transform: rotate(45deg); */
|
||||
}
|
||||
.img-box img {
|
||||
width: calc(100% / 4 - 2px);
|
||||
height: calc(100% / 6 - 0px);
|
||||
margin: 4px 2px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.img-box img:nth-child(1) {
|
||||
transform: rotate(-45deg);
|
||||
visibility: hidden;
|
||||
}
|
||||
.img-box img:nth-child(2) {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.img-box img:nth-child(3) {
|
||||
transform: rotate(45deg);
|
||||
visibility: hidden;
|
||||
}
|
||||
.img-box img:nth-child(4) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.img-box img:nth-child(5) {
|
||||
/* margin-left: 15px; */
|
||||
/* margin-right: 15px; */
|
||||
}
|
||||
.img-box img:nth-child(6) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.img-box img:nth-child(7) {
|
||||
transform: rotate(-135deg);
|
||||
visibility: hidden;
|
||||
}
|
||||
.img-box img:nth-child(8) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.img-box img:nth-child(9) {
|
||||
transform: rotate(135deg);
|
||||
visibility: hidden;
|
||||
}
|
||||
.video-control-top ul {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
background: url(../assets/images/yuanbg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.video-control-bottom {
|
||||
width: calc(100% - 2px);
|
||||
/* padding-top: 10px;
|
||||
margin-top: 10px; */
|
||||
height: calc(50% + 20px);
|
||||
padding-left: 2px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-content: space-around;
|
||||
}
|
||||
.video-control-bottom span {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 5px 0 0 5px;
|
||||
/* margin-left: 5px; */
|
||||
word-break: break-all;
|
||||
}
|
||||
.video-control-bottom span p {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: #97b8da;
|
||||
float: left;
|
||||
}
|
||||
.video-control-bottom span .tit {
|
||||
width: calc(100% - 58px);
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
/* 刷新动画 */
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.refresh {
|
||||
/* animation: "rotation 1s ease-out 1"; */
|
||||
transform: rotate(360deg);
|
||||
transition: all 1s;
|
||||
}
|
||||
.norefresh {
|
||||
/* animation: ""; */
|
||||
transform: rotate(0deg);
|
||||
transition: all 0s;
|
||||
}
|
||||
/* 视频右上角位置信息 */
|
||||
.videoAdress{
|
||||
/* width: 100px; */
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
background: rgba(10, 6, 30, 0.35);
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.videoAdress img{
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
}
|
||||
.videoAdress span{
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,502 @@
|
|||
.system1 {
|
||||
padding: 10px;
|
||||
}
|
||||
.system1 .page-box:first-child {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
height: 130px;
|
||||
}
|
||||
.system1 .page-box:first-child .content {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.system1 .page-box:first-child ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.system1 .page-box:first-child ul li label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 14px;
|
||||
color: #98b9d9;
|
||||
}
|
||||
.system1 .page-box:first-child ul li select,
|
||||
.system1 .page-box:first-child ul li input {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
background: #191934;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system1 .page-box .title button {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
/* text-align: right; */
|
||||
/* padding-right: 5px; */
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button:first-child {
|
||||
background: #191934;
|
||||
color: #97b8da;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button:last-child {
|
||||
background: #5c89ff;
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .page-box:nth-child(2) {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
height: calc(100% - 160px);
|
||||
}
|
||||
.preDealtail .preDealtail-content {
|
||||
width: 103%;
|
||||
height: 568px;
|
||||
}
|
||||
.monitorPointstyle .conf-label:first-child {
|
||||
margin: 0px 0 20px 0px;
|
||||
}
|
||||
.monitorPointstyle .conf-label:last-child {
|
||||
margin: 20px 0 0px 0px;
|
||||
}
|
||||
.conf-label {
|
||||
color: #97b8da;
|
||||
line-height: 26px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.conf-label .points {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: RGB(25, 25, 52);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.monitor-type a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.monitor-type a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.conf-label .label-tit {
|
||||
width: 112px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
.unloadbox {
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
border: 1px dashed #97b8da;
|
||||
/* border-radius: 5px; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unloadbox i {
|
||||
/* width: 100%; */
|
||||
color: #fff;
|
||||
}
|
||||
.unloadbox span {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
/* display: inline-block; */
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.system2 {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*.system2 .system2-left {
|
||||
width: 318px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}*/
|
||||
.system2 .system2-left-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
height: 243px;
|
||||
}
|
||||
.system2 .system2-left-bottom {
|
||||
left: 10px;
|
||||
top: 263px;
|
||||
width: 300px;
|
||||
height: calc(100% - 283px);
|
||||
}
|
||||
.system2 .system2-left-bottom ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li:first-child {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:first-child {
|
||||
font-size: 14px;
|
||||
color: #75798a;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:last-child {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom .chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.system2-right {
|
||||
left: 320px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.system3-top {
|
||||
width: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: red;
|
||||
}
|
||||
.system3-top ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system3-top li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
padding: 40px 40px 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 29, 49, 0.6);
|
||||
float: left;
|
||||
height: 190px;
|
||||
}
|
||||
.system3-top li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system3-top li:first-child {
|
||||
/* background-image: linear-gradient(38deg, #2AD0FF 0%, #0063FA 100%); */
|
||||
background: url(../../assets/images/system3-1.png) no-repeat center
|
||||
center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(2) {
|
||||
/* background-image: linear-gradient(198deg, #0098DA 0%, #41E0CB 100%); */
|
||||
background: url(../../assets/images/system3-2.png) no-repeat center
|
||||
center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(3) {
|
||||
/* background-image: linear-gradient(42deg, #FAD961 0%, #F76B1C 100%); */
|
||||
background: url(../../assets/images/system3-3.png) no-repeat center
|
||||
center/cover;
|
||||
}
|
||||
.system3-top li:last-child {
|
||||
/* background-image: linear-gradient(225deg, #FF4B4F 0%, #FB7173 100%); */
|
||||
background: url(../../assets/images/system3-4.png) no-repeat center
|
||||
center/cover;
|
||||
margin-right: 0;
|
||||
}
|
||||
.system3-top li span:first-child {
|
||||
font-size: 18px;
|
||||
}
|
||||
.system3-top li span:last-child {
|
||||
font-size: 32px;
|
||||
}
|
||||
.system3-bottom {
|
||||
left: 10px;
|
||||
top: 210px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.system1 .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 72px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system2-right .list-table,
|
||||
.system3-bottom .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system1 .list-table ul,
|
||||
.system2-right .list-table ul,
|
||||
.system3-bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system1 .list-table li {
|
||||
width: calc(100% / 8);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system1 .list-table li:nth-child(1) {
|
||||
width: calc(100% / 9);
|
||||
}
|
||||
.system1 .list-table li:nth-child(2) {
|
||||
width: calc(100% / 10);
|
||||
}
|
||||
.system1 .list-table li:nth-child(3) {
|
||||
width: calc(100% / 5);
|
||||
}
|
||||
.system1 .list-table li:nth-child(4) {
|
||||
width: calc(100% / 6);
|
||||
}
|
||||
.system1 .list-table li:nth-child(5) {
|
||||
width: calc(100% / 10);
|
||||
}
|
||||
.system1 .list-table li:nth-child(6) {
|
||||
width: calc(100% / 10);
|
||||
}
|
||||
.system1 .list-table li:nth-child(7) {
|
||||
width: calc(100% / 10);
|
||||
}
|
||||
.system1 .list-table li:nth-child(8) {
|
||||
width: calc(100% / 10);
|
||||
}
|
||||
.system1 .list-table li:nth-child(8) a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.system2-right .list-table li {
|
||||
width: calc(100% / 4);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.system3-bottom .list-table li {
|
||||
width: calc(100% / 5);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system1 .list-table li.rd,
|
||||
.system2-right .list-table li.rd,
|
||||
.system3-bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.system1 .list-table li.gd,
|
||||
.system2-right .list-table li.gd,
|
||||
.system3-bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.system1 .list-table li.do,
|
||||
.system2-right .list-table li.do,
|
||||
.system3-bottom .list-table li.do {
|
||||
color: #55566a;
|
||||
}
|
||||
.system1 .list-table li.do a,
|
||||
.system2-right .list-table li.do a,
|
||||
.system3-bottom .list-table li.do a {
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system1 .list-table li.do a:hover,
|
||||
.system2-right .list-table li.do a:hover,
|
||||
.system3-bottom .list-table li.do a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .list-table .tb-hd,
|
||||
.system2-right .list-table .tb-hd,
|
||||
.system3-bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.system1 .list-table .tb-bd,
|
||||
.system2-right .list-table .tb-bd,
|
||||
.system3-bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.system1 .list-table .tb-hd ul,
|
||||
.system2-right .list-table .tb-hd ul,
|
||||
.system3-bottom .list-table .tb-hd ul {
|
||||
color: #98b9d9;
|
||||
}
|
||||
.system1 .list-table .tb-bd ul:nth-child(odd),
|
||||
.system2-right .list-table .tb-bd ul:nth-child(odd),
|
||||
.system3-bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #191937;
|
||||
}
|
||||
.system2-right .content .header,
|
||||
.system3-bottom .content .header {
|
||||
margin-top: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.system2-right .content .header-left,
|
||||
.system3-bottom .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.system2-right .content .header-left li,
|
||||
.system3-bottom .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system2-right .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover,
|
||||
.system3-bottom .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-left li:first-child,
|
||||
.system3-bottom .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.system2-right .content .header-left li:last-child,
|
||||
.system3-bottom .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.system2-right .content .header-right,
|
||||
.system3-bottom .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.system2-right .content .header-right select,
|
||||
.system3-bottom .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right input,
|
||||
.system3-bottom .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right button,
|
||||
.system3-bottom .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system2-right .content .header-right .search,
|
||||
.system3-bottom .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-right .export,
|
||||
.system3-bottom .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.system2-right .content .header-right .created,
|
||||
.system3-bottom .content .header-right .created {
|
||||
width: 100px;
|
||||
background: #2ecb5d;
|
||||
}
|
||||
.system2-right .content .header-right button img,
|
||||
.system3-bottom .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 报表管理 */
|
||||
.waring2-hide .page-box .content .preDealtail .label select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 16px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b button {
|
||||
background: RGB(92, 137, 255);
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b .btn_1 {
|
||||
background: #111029;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
}
|
||||
.waring2-hide .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 32px;
|
||||
margin-right: -10px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,465 @@
|
|||
.left {
|
||||
/* left: 10px;
|
||||
top: 10px;
|
||||
width: 21%;
|
||||
bottom: 10px;
|
||||
height: 37%; */
|
||||
left: 10px;
|
||||
top: 69%;
|
||||
width: 27%;
|
||||
bottom: 10px;
|
||||
height: 30%;
|
||||
}
|
||||
.left .info {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* padding: 10px 10px 20px; */
|
||||
padding: 10px 10px 10px;
|
||||
}
|
||||
.left .info ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid rgba(80, 80, 99, 0.49);
|
||||
border-bottom: 1px solid rgba(80, 80, 99, 0.49);
|
||||
}
|
||||
.left .info ul li {
|
||||
/* width: 100%;
|
||||
|
||||
line-height: 34px;
|
||||
border-left: 1px solid rgba(80, 80, 99, 0.49);
|
||||
border-top: 1px solid rgba(80, 80, 99, 0.49);
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; */
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
border-left: 1px solid rgba(80, 80, 99, 0.49);
|
||||
border-top: 1px solid rgba(80, 80, 99, 0.49);
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.left .info ul li span {
|
||||
color: #97b8da;
|
||||
}
|
||||
.left .info ul li span + span {
|
||||
color: white;
|
||||
}
|
||||
.left .info ul li a {
|
||||
font-size: 12px;
|
||||
color: #3698fd;
|
||||
}
|
||||
.left .imgbox {
|
||||
width: 100%;
|
||||
/* height: calc((100% - 355px) / 2); */
|
||||
height: calc((100% - 335px) / 2);
|
||||
padding: 0 10px;
|
||||
}
|
||||
.left .imgbox + .imgbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* .left .imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
.right {
|
||||
/* left: calc(100% - 79% + 20px);
|
||||
right: 10px;
|
||||
height: calc(100% - 31% - 20px);
|
||||
top: 10px; */
|
||||
left: calc(100% - 100% + 11px);
|
||||
/* right: 10px; */
|
||||
height: calc(100% - 31% - 20px);
|
||||
/* top: 10px; */
|
||||
}
|
||||
|
||||
.right .check-box {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
z-index: 98;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.right .check-box p {
|
||||
display: inline-block;
|
||||
}
|
||||
.right .check-box p + p {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.right .check-box img {
|
||||
width: 12px;
|
||||
height: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
/* left: calc(100% - 79% + 20px);
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
height: 30%; */
|
||||
left: calc(100% - 73% + 20px);
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
height: 30%;
|
||||
}
|
||||
.bottom ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* .bottom ul li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
height: 100%;
|
||||
float: left;
|
||||
box-sizing: content-box;
|
||||
} */
|
||||
/* .bottom ul li:last-child {
|
||||
width: calc((100% - 30px) / 4);
|
||||
height: 100%;
|
||||
float: left;
|
||||
box-sizing: content-box;
|
||||
} */
|
||||
.bottom ul li:nth-child(1) {
|
||||
/* width: calc(100% - 77%); */
|
||||
width: calc(100% - 76%);
|
||||
height: 100%;
|
||||
float: left;
|
||||
/* box-sizing: content-box; */
|
||||
}
|
||||
.bottom ul li:nth-child(2) {
|
||||
/* width: calc(100% - 77%); */
|
||||
width: calc(100% - 76%);
|
||||
height: 100%;
|
||||
float: left;
|
||||
/* box-sizing: content-box; */
|
||||
}
|
||||
.bottom ul li:nth-child(3) {
|
||||
/* width: calc(100% - 76%); */
|
||||
width: calc(100% - 76%);
|
||||
height: 100%;
|
||||
float: left;
|
||||
/* box-sizing: content-box; */
|
||||
}
|
||||
|
||||
|
||||
.bottom ul li:last-child {
|
||||
/* width: calc(100% - 70% ); */
|
||||
width: calc(100% - 72% );
|
||||
height: 100%;
|
||||
float: left;
|
||||
/* box-sizing: content-box; */
|
||||
}
|
||||
.bottom ul li + li {
|
||||
border-left: 10px #0a061e solid;
|
||||
}
|
||||
.bottom ul li + li + li {
|
||||
border-left: 10px #0a061e solid;
|
||||
}
|
||||
.bottom .content4 {
|
||||
padding: 20px;
|
||||
}
|
||||
.bottom .location {
|
||||
line-height: 24px;
|
||||
}
|
||||
.bottom .location .city {
|
||||
font-size: 16px;
|
||||
}
|
||||
.bottom .location .update-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.bottom .base-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.bottom .base-info .base-info-left {
|
||||
font-size: 30px;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.bottom .base-info .base-info-center span:first-of-type {
|
||||
font-size: 18px;
|
||||
}
|
||||
.bottom .base-info .base-info-right {
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background: #4ece9e;
|
||||
}
|
||||
.bottom .content4-types {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.qlmsg div {
|
||||
margin: 5px 0;
|
||||
}
|
||||
/* 气象信息 */
|
||||
.bottom .broadcast {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
background: #1f1e36;
|
||||
/* margin-top: 40px; */
|
||||
margin-left: 15px;
|
||||
}
|
||||
.bottom .broadcast img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.tip-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 90px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tip-box .tip-item {
|
||||
display: block;
|
||||
float: left;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.tip-box .tip-item i {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
left: 3px;
|
||||
top: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tip-box .tip-item + .tip-item {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tip-box .tip-item i.red {
|
||||
background: red;
|
||||
}
|
||||
.tip-box .tip-item i.green {
|
||||
background: green;
|
||||
}
|
||||
.tip-box .tip-item i.white {
|
||||
background: yellow;
|
||||
}
|
||||
.tip-box .tip-item i.grey {
|
||||
background: #575757;
|
||||
}
|
||||
.unity-popup {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
background: #111029;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup .lable {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup .lable span {
|
||||
color: #97b8da;
|
||||
}
|
||||
.unity-popup .lable .lable_text {
|
||||
color: #fff;
|
||||
}
|
||||
.unity-popup .box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid #5c89ff;
|
||||
color: #5c89ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup2 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 450px;
|
||||
width: 350px;
|
||||
height: 234px;
|
||||
background: #111029;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup2 .lable {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup2 .lable span {
|
||||
color: #97b8da;
|
||||
}
|
||||
.unity-popup2 .lable .lable_text {
|
||||
color: #fff;
|
||||
}
|
||||
.unity-popup2 .box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid #5c89ff;
|
||||
color: #5c89ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.unity-popup2 i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.tip-check {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
left: 12px;
|
||||
z-index: 98;
|
||||
cursor: pointer;
|
||||
}
|
||||
.custom-checkbox {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.custom-checkbox span {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0073bf;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"]:checked + span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"]:checked + span:after {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
background: #0073bf;
|
||||
border: #fff solid 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.custom-txt {
|
||||
margin-left: 29px;
|
||||
padding-top: 1px;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-Info {
|
||||
position: absolute !important;
|
||||
right: -94px;
|
||||
top: 73px;
|
||||
}
|
||||
|
||||
|
||||
/* 图表曲线 */
|
||||
.unity-popup3 {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
right: 30px;
|
||||
width: 360px;
|
||||
/* height: 244px; */
|
||||
/* background: #111029; */
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
/* padding: 16px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup3 .lable {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup3 .lable span {
|
||||
color: #97b8da;
|
||||
}
|
||||
.unity-popup3 .lable .lable_text {
|
||||
color: #fff;
|
||||
}
|
||||
.unity-popup3 .box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid #5c89ff;
|
||||
color: #5c89ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup3 i {
|
||||
/* width: 30px;
|
||||
height: 30px; */
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 9px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
.time-bottom .page-box .content .legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.time-bottom .page-box .content .legend li {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.time-bottom .page-box .content .legend li::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.time-bottom .page-box .content .legend1 li:first-child::before {
|
||||
border-top: 2px solid #5c89ff;
|
||||
}
|
||||
.time-bottom .page-box .content .legend1 li:last-child::before {
|
||||
border-top: 2px dotted #00c853;
|
||||
}
|
||||
.time-bottom .page-box .content .legend2 li:first-child::before {
|
||||
border-top: 2px solid #5c89ff;
|
||||
}
|
||||
.time-bottom .page-box .content .legend2 li:last-child::before {
|
||||
border-top: 2px solid #c95ff2;
|
||||
}
|
||||
.time-bottom .page-box .content .legend22 li:first-child::before {
|
||||
border-top: 2px solid #2eca5c;
|
||||
}
|
||||
.time-bottom .page-box .content .legend22 li:last-child::before {
|
||||
border-top: 2px solid #ff9744;
|
||||
}
|
||||
.time-bottom .page-box .content .legend3 li:first-child::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #5b8ff9;
|
||||
}
|
||||
.time-bottom .page-box .content .legend3 li:last-child::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #5ad8a6;
|
||||
}
|
||||
.time-bottom .page-box .content .legend4 li:first-child::before {
|
||||
border-top: 2px solid #5c89ff;
|
||||
}
|
||||
.time-bottom .page-box .content .legend4 li:last-child::before {
|
||||
border-top: 2px dotted #c95ff2;
|
||||
}
|
||||
.time-bottom .page-box .content .legend5 li:first-child::before {
|
||||
border-top: 2px solid #fb9225;
|
||||
}
|
||||
.time-bottom .page-box .content .legend5 li:last-child::before {
|
||||
border-top: 2px dotted #727180;
|
||||
}
|
||||
.unity-popup-dm {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 450px;
|
||||
width: 170px;
|
||||
height: 190px;
|
||||
background: #111029;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.unity-popup-dm .content-dm {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.unity-popup-dm .content-dm .btn {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
/* padding-top: 8px; */
|
||||
background: #191934;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup-dm i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
/* position: absolute;
|
||||
right: 5px;
|
||||
top: 5px; */
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.unity-popup-dm .tit {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #191934;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.unity-popup-dm .content-dm .activeblue{
|
||||
background: #5C89FF;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.statistics-bottom .page-box .content {
|
||||
padding: 20px 0 10px;
|
||||
}
|
||||
.statistics-bottom .page-box .content .header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.statistics-bottom .two-page-box {
|
||||
display: flex;
|
||||
}
|
||||
.statistics-bottom .two-page-box .page-box {
|
||||
flex: 1;
|
||||
width: 49%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.statistics-bottom .two-page-box .page-box:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.statistics-bottom .page-box .content .chart-wrap .chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cloudRelative{
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
.structural2-top .content ul li {
|
||||
height: calc((100% - 40px) / 5);
|
||||
}
|
||||
|
||||
.structural4-top .content ul li {
|
||||
height: calc((100% - 40px) / 4);
|
||||
}
|
||||
|
||||
.structural4-top .sel1 {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97B8DA;
|
||||
border: 0;
|
||||
/* margin-left: 10px; */
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
/* margin-top: 5px; */
|
||||
position: absolute;
|
||||
border:none;
|
||||
/* top: 50px; */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.structureAlys{
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.structureleft{
|
||||
width: 50%;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.structureright{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.structureleft .header{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
.system1 {
|
||||
padding: 10px;
|
||||
}
|
||||
.system1 .page-box:first-child {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
.system1 .page-box:first-child .content {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.system1 .page-box:first-child ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.system1 .page-box:first-child ul li label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.system1 .page-box:first-child ul li select,
|
||||
.system1 .page-box:first-child ul li input {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
background: #191934;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button:first-child {
|
||||
background: #191934;
|
||||
color: #97b8da;
|
||||
}
|
||||
/* .system1 .page-box:first-child .buttons button:last-child {
|
||||
background: #5c89ff;
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .page-box:last-child {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
height: calc(100% - 230px);
|
||||
} */
|
||||
.system2 {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*.system2 .system2-left {
|
||||
width: 318px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}*/
|
||||
.system2 .system2-left-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
height: 243px;
|
||||
}
|
||||
.system2 .system2-left-bottom {
|
||||
left: 10px;
|
||||
top: 263px;
|
||||
width: 300px;
|
||||
height: calc(100% - 283px);
|
||||
}
|
||||
.system2 .system2-left-bottom ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li:first-child {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:first-child {
|
||||
font-size: 14px;
|
||||
color: #75798a;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:last-child {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom .chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.system2-right {
|
||||
left: 320px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.system3-top {
|
||||
width: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: red;
|
||||
}
|
||||
.system3-top ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system3-top li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
padding: 40px 40px 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 29, 49, 0.6);
|
||||
float: left;
|
||||
height: 190px;
|
||||
}
|
||||
.system3-top li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system3-top li:first-child {
|
||||
/* background-image: linear-gradient(38deg, #2AD0FF 0%, #0063FA 100%); */
|
||||
background: url(../../assets/images/system3-1.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(2) {
|
||||
/* background-image: linear-gradient(198deg, #0098DA 0%, #41E0CB 100%); */
|
||||
background: url(../../assets/images/system3-2.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(3) {
|
||||
/* background-image: linear-gradient(42deg, #FAD961 0%, #F76B1C 100%); */
|
||||
background: url(../../assets/images/system3-3.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:last-child {
|
||||
/* background-image: linear-gradient(225deg, #FF4B4F 0%, #FB7173 100%); */
|
||||
background: url(../../assets/images/system3-4.png) no-repeat center center/cover;
|
||||
margin-right: 0;
|
||||
}
|
||||
.system3-top li span:first-child {
|
||||
font-size: 18px;
|
||||
}
|
||||
.system3-top li span:last-child {
|
||||
font-size: 32px;
|
||||
}
|
||||
.system3-bottom {
|
||||
left: 10px;
|
||||
top: 210px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.system1 .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 72px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system2-right .list-table,
|
||||
.system3-bottom .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system1 .list-table ul,
|
||||
.system2-right .list-table ul,
|
||||
.system3-bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system1 .list-table li {
|
||||
width: calc(100% / 6);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system2-right .list-table li {
|
||||
width: calc(100% / 4);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.system3-bottom .list-table li {
|
||||
width: calc(100% / 5);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system1 .list-table li.rd,
|
||||
.system2-right .list-table li.rd,
|
||||
.system3-bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.system1 .list-table li.gd,
|
||||
.system2-right .list-table li.gd,
|
||||
.system3-bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.system1 .list-table li.do,
|
||||
.system2-right .list-table li.do,
|
||||
.system3-bottom .list-table li.do {
|
||||
color: #55566a;
|
||||
}
|
||||
.system1 .list-table li.do a,
|
||||
.system2-right .list-table li.do a,
|
||||
.system3-bottom .list-table li.do a {
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system1 .list-table li.do a:hover,
|
||||
.system2-right .list-table li.do a:hover,
|
||||
.system3-bottom .list-table li.do a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .list-table .tb-hd,
|
||||
.system2-right .list-table .tb-hd,
|
||||
.system3-bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.system1 .list-table .tb-bd,
|
||||
.system2-right .list-table .tb-bd,
|
||||
.system3-bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.system1 .list-table .tb-hd ul,
|
||||
.system2-right .list-table .tb-hd ul,
|
||||
.system3-bottom .list-table .tb-hd ul {
|
||||
color: #98b9d9;
|
||||
}
|
||||
.system1 .list-table .tb-bd ul:nth-child(odd),
|
||||
.system2-right .list-table .tb-bd ul:nth-child(odd),
|
||||
.system3-bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #191937;
|
||||
}
|
||||
.system2-right .content .header,
|
||||
.system3-bottom .content .header {
|
||||
margin-top: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.system2-right .content .header-left,
|
||||
.system3-bottom .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.system2-right .content .header-left li,
|
||||
.system3-bottom .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system2-right .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover,
|
||||
.system3-bottom .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-left li:first-child,
|
||||
.system3-bottom .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.system2-right .content .header-left li:last-child,
|
||||
.system3-bottom .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.system2-right .content .header-right,
|
||||
.system3-bottom .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.system2-right .content .header-right select,
|
||||
.system3-bottom .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right input,
|
||||
.system3-bottom .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right button,
|
||||
.system3-bottom .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system2-right .content .header-right .search,
|
||||
.system3-bottom .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-right .export,
|
||||
.system3-bottom .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.system2-right .content .header-right .created,
|
||||
.system3-bottom .content .header-right .created {
|
||||
width: 100px;
|
||||
background: #2ecb5d;
|
||||
}
|
||||
.system2-right .content .header-right button img,
|
||||
.system3-bottom .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 报表管理 */
|
||||
.waring2-hide .page-box .content .preDealtail .label select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 16px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b button {
|
||||
background: RGB(92, 137, 255);
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b .btn_1 {
|
||||
background: #111029;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
}
|
||||
.waring2-hide .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 32px;
|
||||
margin-right: -10px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,672 @@
|
|||
.time-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: calc(100% - 396px);
|
||||
}
|
||||
.time-top .content {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-top .content .check-box {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
/* font-size: 16px; */
|
||||
}
|
||||
.time-top .content .check-box p {
|
||||
display: inline-block;
|
||||
}
|
||||
.time-top .content .check-box p + p {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-top .content .check-box img {
|
||||
width: 12px;
|
||||
height: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.time-top .content ul {
|
||||
width: 300px;
|
||||
}
|
||||
.time-top .content ul li {
|
||||
float: left;
|
||||
width: 140px;
|
||||
height: calc((100% - 50px) / 6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 10px 10px 0;
|
||||
background: #191934;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-top .content ul li:hover,
|
||||
.time-top .content ul li.active {
|
||||
background: #5985f9;
|
||||
}
|
||||
.time-top .content .imgbox {
|
||||
flex: 1;
|
||||
}
|
||||
.time-top .content .imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.time-bottom {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
height: 310px;
|
||||
/* display: flex;
|
||||
flex-flow:row wrap; */
|
||||
}
|
||||
.time-bottom .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
/* width: 49%; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom .page-box.bottom {
|
||||
position: absolute !important;
|
||||
margin-bottom: 0 !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 420px;
|
||||
height: calc(100% - 430px);
|
||||
/*height: 410px;
|
||||
margin-bottom: 10px;*/
|
||||
}
|
||||
.time-bottom .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
/* cursor: pointer; */
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li.active,
|
||||
.time-bottom .page-box .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .laneSelect {
|
||||
/*width: 94px;*/
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .laneSelect > .el-input {
|
||||
height: 32px;
|
||||
}
|
||||
.time-bottom
|
||||
.page-box
|
||||
.content
|
||||
.header-right
|
||||
.laneSelect
|
||||
> .el-input
|
||||
.el-input__inner {
|
||||
height: 32px !important;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .update span {
|
||||
color: #3698fd;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right select,
|
||||
.time-bottom .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .del {
|
||||
background: #d43939;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .upload {
|
||||
background: #66f572;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .legendView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 50px;
|
||||
width: 50px;
|
||||
height: 80px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .legendView li {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .legendView .legendLabel {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .chart {
|
||||
width: calc(100% - 43px);
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox span {
|
||||
color: #acb3be;
|
||||
}
|
||||
|
||||
.time3top {
|
||||
left: 15px;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
/* height: 408px; */
|
||||
}
|
||||
.time3top .imgbox {
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.time3top .imgbox + .imgbox + .imgbox{
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.time3top .imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.time3bottom {
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
.time3bottom .page-box {
|
||||
height: 98%;
|
||||
}
|
||||
|
||||
.time3bottom .list-table {
|
||||
width: 100%;
|
||||
/* height: calc(100% - 84px); */
|
||||
margin-top: 20px;
|
||||
}
|
||||
.time3bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time3bottom .list-table li {
|
||||
width: calc(100% / 14);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.time3bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.time3bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.time3bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.time3bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.time3bottom .list-table .tb-hd ul {
|
||||
color: #98b9d9;
|
||||
}
|
||||
.time3bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #191937;
|
||||
}
|
||||
|
||||
|
||||
/* 统计数据-1，echarts两个合成一行 */
|
||||
.time-bottom_1 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
height: 310px;
|
||||
/* display: flex;
|
||||
flex-flow:row wrap; */
|
||||
}
|
||||
.time-bottom_1 .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
/* width: 49%; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box.bottom_1 {
|
||||
position: absolute !important;
|
||||
margin-bottom: 0 !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 420px;
|
||||
height: calc(100% - 430px);
|
||||
/*height: 410px;
|
||||
margin-bottom: 10px;*/
|
||||
}
|
||||
.time-bottom_1 .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li.active,
|
||||
.time-bottom_1 .page-box .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .laneSelect {
|
||||
/*width: 94px;*/
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .laneSelect > .el-input {
|
||||
height: 32px;
|
||||
}
|
||||
.time-bottom_1
|
||||
.page-box
|
||||
.content
|
||||
.header-right
|
||||
.laneSelect
|
||||
> .el-input
|
||||
.el-input__inner {
|
||||
height: 32px !important;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .update span {
|
||||
color: #3698fd;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right select,
|
||||
.time-bottom_1 .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right button {
|
||||
width: 56px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .legendView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 50px;
|
||||
width: 50px;
|
||||
height: 80px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .legendView li {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .legendView .legendLabel {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .chart {
|
||||
width: 1380px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox span {
|
||||
color: #acb3be;
|
||||
}
|
||||
/* 时程数据-1，样式单独修改 */
|
||||
.time-bottom_2 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
height: 310px;
|
||||
/* display: flex;
|
||||
flex-flow:row wrap; */
|
||||
}
|
||||
.time-bottom_2 .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
/* width: 49%; */
|
||||
margin-bottom: 10px;
|
||||
display: none;
|
||||
}
|
||||
.time-bottom_2 .page-box.bottom_2 {
|
||||
position: absolute !important;
|
||||
margin-bottom: 0 !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 420px;
|
||||
height: calc(100% - 430px);
|
||||
/*height: 410px;
|
||||
margin-bottom: 10px;*/
|
||||
}
|
||||
.time-bottom_2 .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li.active,
|
||||
.time-bottom_2 .page-box .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .laneSelect {
|
||||
/*width: 94px;*/
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .laneSelect > .el-input {
|
||||
height: 32px;
|
||||
}
|
||||
.time-bottom_2
|
||||
.page-box
|
||||
.content
|
||||
.header-right
|
||||
.laneSelect
|
||||
> .el-input
|
||||
.el-input__inner {
|
||||
height: 32px !important;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .update span {
|
||||
color: #3698fd;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right select,
|
||||
.time-bottom_2 .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .del {
|
||||
background: #d43939;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .upload {
|
||||
background: #66f572;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .legendView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 50px;
|
||||
width: 50px;
|
||||
height: 80px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .legendView li {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .legendView .legendLabel {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .chart {
|
||||
/* width: 1380px; */
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
width: 376px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox span {
|
||||
color: #fff;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
left: 22%;
|
||||
top: 217px;
|
||||
}
|
||||
|
||||
.time-bottom .legendView li{
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.time-bottom .legendView .legendLabel{
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
|
||||
.chart-wrap .chartTips{
|
||||
/* right: 66px !important;
|
||||
bottom: 60px !important;
|
||||
width: 140px !important;
|
||||
height: 90px !important; */
|
||||
right: 83px !important;
|
||||
bottom: -126px !important;
|
||||
width: 170px !important;
|
||||
height: 90px !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
background: #191934;
|
||||
border-color: #e9e9eb;
|
||||
color: #909399;
|
||||
}
|
||||
/* 修改element下拉选框样式 */
|
||||
|
|
@ -0,0 +1,639 @@
|
|||
|
||||
|
||||
.waring1 .waring1-top .page-box {
|
||||
height: 358px;
|
||||
}
|
||||
.waring2 {
|
||||
display: flex;
|
||||
}
|
||||
.waring2 .waring2-left {
|
||||
width: 49%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
top: 480px;
|
||||
height: 410px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:nth-child(-n+2) {
|
||||
width: 100%;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:nth-child(3) {
|
||||
width: 100%;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 25px 0 30px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li span:first-of-type {
|
||||
font-size: 14px;
|
||||
color: #75798A;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li span:last-of-type {
|
||||
color: #fff;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .img-box {
|
||||
flex: 1;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .img-box img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-right {
|
||||
/* width: calc(40% - 30px); */
|
||||
width:49%;
|
||||
position: absolute;
|
||||
top: 480px;
|
||||
right: 10px;
|
||||
height: 410px;
|
||||
}
|
||||
.waring2 .waring2-right .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.waring2 .waring2-right .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97B8DA;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right .search {
|
||||
background: #5C89FF;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right .export {
|
||||
background: #FCB333;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.waring2 .list-table {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
.waring2 .list-table ul{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .list-table li{
|
||||
width: 13%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.waring2 .list-table li + li{
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.waring2 .list-table li + li + li{
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
.waring2 .list-table li + li + li + li{
|
||||
width: 13%;
|
||||
}
|
||||
/* .waring2 .list-table li + li + li + li+ li{
|
||||
width: 15%;
|
||||
}
|
||||
.waring2 .list-table li + li + li + li+ li{
|
||||
width: 10%;
|
||||
} */
|
||||
.waring2 .list-table li + li + li + li+ li{
|
||||
width: 12%;
|
||||
}
|
||||
.waring2 .list-table li.lv1{
|
||||
background: url(../../assets/images/level1.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.lv2{
|
||||
background: url(../../assets/images/level2.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.lv3{
|
||||
background: url(../../assets/images/level3.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.gd{
|
||||
color:#39c160
|
||||
}
|
||||
.waring2 .list-table li.rd{
|
||||
color:#fd4f54
|
||||
}
|
||||
|
||||
|
||||
.waring2 .list-table .tb-hd{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.waring2 .list-table .tb-bd{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.waring2 .list-table .tb-hd ul{
|
||||
color:#98b9d9;
|
||||
}
|
||||
|
||||
.waring2 .list-table .tb-bd ul:nth-child(odd){
|
||||
background: #191937;
|
||||
}
|
||||
|
||||
.warning1bottom{
|
||||
left:0;
|
||||
top:368px;
|
||||
right:0;
|
||||
height: 500px;
|
||||
}
|
||||
.warning1bottom .page-box{
|
||||
height: 100%;
|
||||
}
|
||||
.warning1bottom .list-table{
|
||||
width: 100%;
|
||||
height: calc(100% - 86px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.warning1bottom .list-table ul{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.warning1bottom .list-table li{
|
||||
width: calc(100% / 7);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.warning1bottom .list-table li img{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.warning1bottom .list-table li.rd{
|
||||
color:#fd4f54;
|
||||
}
|
||||
.warning1bottom .list-table li.gd{
|
||||
color:#39c160;
|
||||
}
|
||||
.warning1bottom .list-table .tb-hd{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.warning1bottom .list-table .tb-bd{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.warning1bottom .list-table .tb-hd ul{
|
||||
color:#98b9d9;
|
||||
}
|
||||
.warning1bottom .list-table .tb-bd ul:nth-child(odd){
|
||||
background: #191937;
|
||||
}
|
||||
.warning1bottom .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97B8DA;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(10,6,30,0.70);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.warning-detail {
|
||||
width: 500px;
|
||||
height: 80%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #111029;
|
||||
display: none;
|
||||
}
|
||||
.warning-detail .title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
background: #191934;
|
||||
}
|
||||
.warning-detail .detail {
|
||||
flex: 1;
|
||||
padding: 20px 10px 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.warning-detail .detail .base-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.warning-detail .detail .base-info label {
|
||||
line-height: 30px;
|
||||
color: #97B8DA;
|
||||
}
|
||||
.warning-detail .detail .base-info img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.warning-detail .detail .base-info p {
|
||||
padding: 5px 10px;
|
||||
line-height: 22px;
|
||||
background: #191934;
|
||||
}
|
||||
.warning-detail .detail .btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.warning-detail .detail .btns button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #5C89FF;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.warning-detail .detail .base-info .pdf {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.warning-detail .detail .base-info .pdf .operate {
|
||||
color: #1890FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-bottom {
|
||||
position: absolute;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 440px);
|
||||
top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .waring2-bottom .page-box{
|
||||
height: 100%!important;
|
||||
}
|
||||
.waring2 .waring2-bottom .content{
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.waring2 .waring2-bottom .check-box {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.waring2 .waring2-bottom img{
|
||||
width: 100%;
|
||||
height:100%
|
||||
}
|
||||
|
||||
.waring2 .waring2-hide{
|
||||
position: absolute;
|
||||
/* top: 64px; */
|
||||
top: 20px;
|
||||
left:30%;
|
||||
background: #111029 !important;
|
||||
width: 42%;
|
||||
/* height: calc(100% - 205px); */
|
||||
height: calc(100% - 36px);
|
||||
transition: right .3s linear 0s;
|
||||
|
||||
}
|
||||
.waring2 .waring2-hide .page-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .title i{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top:5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-hide .page-box .content .top-box{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding:10px 20px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box ul{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li{
|
||||
float: left;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li:nth-child(3n - 2){
|
||||
width: 58%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li:nth-child(5){
|
||||
width: 60%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li label{
|
||||
display: block;
|
||||
width: 70px;
|
||||
color:#97b8da;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span{
|
||||
flex: 1;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span.gd{
|
||||
color:#39c160
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span.rd{
|
||||
color:#fd4f54
|
||||
}
|
||||
.waring2 .waring2-hide.show{
|
||||
/* right:10px; */
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
left: 50%;
|
||||
margin-left: -21%;
|
||||
background: #111029 !important;
|
||||
width: 42%;
|
||||
/* margin: 0 auto; */
|
||||
height: calc(100% - 140px);
|
||||
transition: right .3s linear 0s;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table{
|
||||
border: 1px #2f2f45 solid;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
/* height: 120px; */
|
||||
height:203px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table .tb-hd ul li{
|
||||
width: calc(100% / 7)
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table .tb-bd ul li{
|
||||
width: calc(100% / 7)
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-header{
|
||||
width: calc(100% - 40px)!important;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
text-align: right;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-header select{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97B8DA;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-wrap{
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
height: 160px;
|
||||
/* height: calc(100% - 546px); */
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-wrap .chart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .bt-button{
|
||||
border: 1px #5c89ff solid;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color:#5c89ff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-popup{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:470px;
|
||||
right:45%;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
transition: right .3s linear 0s;
|
||||
}
|
||||
.waring2 .waring2-popup.show{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.waring2 .waring2-popup .page-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.waring2 .waring2-popup .page-box .content img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.waring2 .waring2-popup .page-box .title i{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top:5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-table .tb-bd > ul{
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-table .tb-bd > ul.active{
|
||||
background: rgba(61, 26, 189, 0.6)!important;
|
||||
}
|
||||
|
||||
.scorce{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
.page-box::-webkit-scrollbar{
|
||||
|
||||
display:none;
|
||||
|
||||
}
|
||||
|
||||
.filterChart{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97B8DA;
|
||||
/* border: 0; */
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.timesDuring{
|
||||
width:20%;
|
||||
}
|
||||
|
||||
.time-bottom .page-box .content .chart-wrap #chart2,.time-bottom .page-box .content .chart-wrap #chart1 {
|
||||
/* width: 800px; */
|
||||
height: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.show{
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* .waring2-hide{
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.label{
|
||||
color: #97b8da;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.content .showInfo{
|
||||
/* width: 97%;
|
||||
margin: 0 auto;
|
||||
background: RGB(25,25,52);
|
||||
line-height: 24px; */
|
||||
}
|
||||
|
||||
.preDealtail{
|
||||
width: 100%;
|
||||
padding: 0 20px 10px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.save{
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
|
||||
.save button{
|
||||
background: RGB(92,137,255);
|
||||
width: 66px;
|
||||
height: 22px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inputClass{
|
||||
background: RGB(25,25,52);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.showInfo textarea{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.preOpara{
|
||||
color: rgb(24,144,255);
|
||||
cursor: pointer;
|
||||
}
|
||||
.preOpara:hover{
|
||||
color: white;
|
||||
}
|
||||
.preOparal{
|
||||
color:#55566a;
|
||||
}
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
.system1 {
|
||||
padding: 10px;
|
||||
}
|
||||
.system1 .page-box:first-child {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
.system1 .page-box:first-child .content {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.system1 .page-box:first-child ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
}
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.system1 .page-box:first-child ul li label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.system1 .page-box:first-child ul li select,
|
||||
.system1 .page-box:first-child ul li input {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
background: #191934;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system1 .page-box:first-child .buttons button:first-child {
|
||||
background: #191934;
|
||||
color: #97b8da;
|
||||
}
|
||||
/* .system1 .page-box:first-child .buttons button:last-child {
|
||||
background: #5c89ff;
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .page-box:last-child {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
height: calc(100% - 230px);
|
||||
} */
|
||||
.system2 {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*.system2 .system2-left {
|
||||
width: 318px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}*/
|
||||
.system2 .system2-left-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
height: 243px;
|
||||
}
|
||||
.system2 .system2-left-bottom {
|
||||
left: 10px;
|
||||
top: 263px;
|
||||
width: 300px;
|
||||
height: calc(100% - 283px);
|
||||
}
|
||||
.system2 .system2-left-bottom ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li:first-child {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:first-child {
|
||||
font-size: 14px;
|
||||
color: #75798a;
|
||||
}
|
||||
.system2 .system2-left-bottom ul li span:last-child {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.system2 .system2-left-bottom .chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.system2-right {
|
||||
left: 320px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.system3-top {
|
||||
width: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: red;
|
||||
}
|
||||
.system3-top ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system3-top li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
padding: 40px 40px 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 29, 49, 0.6);
|
||||
float: left;
|
||||
height: 190px;
|
||||
}
|
||||
.system3-top li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system3-top li:first-child {
|
||||
/* background-image: linear-gradient(38deg, #2AD0FF 0%, #0063FA 100%); */
|
||||
background: url(../../assets/images/system3-1.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(2) {
|
||||
/* background-image: linear-gradient(198deg, #0098DA 0%, #41E0CB 100%); */
|
||||
background: url(../../assets/images/system3-2.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:nth-child(3) {
|
||||
/* background-image: linear-gradient(42deg, #FAD961 0%, #F76B1C 100%); */
|
||||
background: url(../../assets/images/system3-3.png) no-repeat center center/cover;
|
||||
}
|
||||
.system3-top li:last-child {
|
||||
/* background-image: linear-gradient(225deg, #FF4B4F 0%, #FB7173 100%); */
|
||||
background: url(../../assets/images/system3-4.png) no-repeat center center/cover;
|
||||
margin-right: 0;
|
||||
}
|
||||
.system3-top li span:first-child {
|
||||
font-size: 18px;
|
||||
}
|
||||
.system3-top li span:last-child {
|
||||
font-size: 32px;
|
||||
}
|
||||
.system3-bottom {
|
||||
left: 10px;
|
||||
top: 210px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.system1 .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 72px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system2-right .list-table,
|
||||
.system3-bottom .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.system1 .list-table ul,
|
||||
.system2-right .list-table ul,
|
||||
.system3-bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.system1 .list-table li {
|
||||
width: calc(100% / 6);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system2-right .list-table li {
|
||||
width: calc(100% / 4);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.system3-bottom .list-table li {
|
||||
width: calc(100% / 5);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.system1 .list-table li.rd,
|
||||
.system2-right .list-table li.rd,
|
||||
.system3-bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.system1 .list-table li.gd,
|
||||
.system2-right .list-table li.gd,
|
||||
.system3-bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.system1 .list-table li.do,
|
||||
.system2-right .list-table li.do,
|
||||
.system3-bottom .list-table li.do {
|
||||
color: #55566a;
|
||||
}
|
||||
.system1 .list-table li.do a,
|
||||
.system2-right .list-table li.do a,
|
||||
.system3-bottom .list-table li.do a {
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system1 .list-table li.do a:hover,
|
||||
.system2-right .list-table li.do a:hover,
|
||||
.system3-bottom .list-table li.do a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.system1 .list-table .tb-hd,
|
||||
.system2-right .list-table .tb-hd,
|
||||
.system3-bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.system1 .list-table .tb-bd,
|
||||
.system2-right .list-table .tb-bd,
|
||||
.system3-bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.system1 .list-table .tb-hd ul,
|
||||
.system2-right .list-table .tb-hd ul,
|
||||
.system3-bottom .list-table .tb-hd ul {
|
||||
color: #98b9d9;
|
||||
}
|
||||
.system1 .list-table .tb-bd ul:nth-child(odd),
|
||||
.system2-right .list-table .tb-bd ul:nth-child(odd),
|
||||
.system3-bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #191937;
|
||||
}
|
||||
.system2-right .content .header,
|
||||
.system3-bottom .content .header {
|
||||
margin-top: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.system2-right .content .header-left,
|
||||
.system3-bottom .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.system2-right .content .header-left li,
|
||||
.system3-bottom .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system2-right .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover,
|
||||
.system3-bottom .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-left li:first-child,
|
||||
.system3-bottom .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.system2-right .content .header-left li:last-child,
|
||||
.system3-bottom .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.system2-right .content .header-right,
|
||||
.system3-bottom .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.system2-right .content .header-right select,
|
||||
.system3-bottom .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right input,
|
||||
.system3-bottom .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.system2-right .content .header-right button,
|
||||
.system3-bottom .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.system2-right .content .header-right .search,
|
||||
.system3-bottom .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.system2-right .content .header-right .export,
|
||||
.system3-bottom .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.system2-right .content .header-right .created,
|
||||
.system3-bottom .content .header-right .created {
|
||||
width: 100px;
|
||||
background: #2ecb5d;
|
||||
}
|
||||
.system2-right .content .header-right button img,
|
||||
.system3-bottom .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 报表管理 */
|
||||
.waring2-hide .page-box .content .preDealtail .label select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #191934;
|
||||
font-size: 16px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b button {
|
||||
background: RGB(92, 137, 255);
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waring2-hide .page-box .content .preDealtail .save_b .btn_1 {
|
||||
background: #111029;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
}
|
||||
.waring2-hide .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 32px;
|
||||
margin-right: -10px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,410 @@
|
|||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
width: 278px;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin-top: 7px;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
z-index: 3001;
|
||||
display: none;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.daterangepicker:before, .daterangepicker:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.daterangepicker:before {
|
||||
top: -7px;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker:after {
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:before {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensleft:after {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.openscenter:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:before {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.daterangepicker.opensright:after {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:before {
|
||||
top: initial;
|
||||
bottom: -7px;
|
||||
border-bottom: initial;
|
||||
border-top: 7px solid #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker.drop-up:after {
|
||||
top: initial;
|
||||
bottom: -6px;
|
||||
border-bottom: initial;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
|
||||
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .drp-buttons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.daterangepicker.auto-apply .drp-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar {
|
||||
display: none;
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.single .calendar-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
|
||||
color: #fff;
|
||||
border: solid black;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .next span {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table .prev span {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-table table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
|
||||
background-color: #eee;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.daterangepicker td.week, .daterangepicker th.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range {
|
||||
background-color: #ebf4f8;
|
||||
border-color: transparent;
|
||||
color: #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.end-date {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.daterangepicker td.start-date.end-date {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.daterangepicker td.active, .daterangepicker td.active:hover {
|
||||
background-color: #357ebd;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.daterangepicker th.month {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker td.disabled, .daterangepicker option.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.daterangepicker select.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.daterangepicker select.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
background: #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
outline: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time {
|
||||
text-align: center;
|
||||
margin: 4px auto 0 auto;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.daterangepicker .calendar-time select.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: none;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-selected {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-buttons .btn {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.rtl .drp-calendar.right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker.show-ranges.ltr .drp-calendar.left {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: none;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.daterangepicker.show-calendar .ranges {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges li.active {
|
||||
background-color: #08c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@media (min-width: 564px) {
|
||||
.daterangepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges ul {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.daterangepicker.single .drp-calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.right .calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left .calendar-table {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges, .daterangepicker .drp-calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 730px) {
|
||||
.daterangepicker .ranges {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.daterangepicker .ranges {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.daterangepicker.rtl .ranges {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.daterangepicker .drp-calendar.left {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,522 @@
|
|||
/* @font-face {
|
||||
font-family: "myFontPF";
|
||||
src: url("./styles/PingFangSCRegular.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
} */
|
||||
|
||||
body {
|
||||
background-color: #0A061E;
|
||||
font-size: 14px;
|
||||
color: white
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
/* font-family: myFontPF, sans-serif; */
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: calc(100% - 70px); */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header_nav {
|
||||
width: 100%;
|
||||
position: static;
|
||||
background: #161630;
|
||||
/* height: 70px; */
|
||||
/* background: #fff; */
|
||||
/* font-size: 30px; */
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 1200px;
|
||||
height: 70px;
|
||||
/* border: 1px solid black; */
|
||||
background: #1f2327;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 311px;
|
||||
height: 100%;
|
||||
/* border:1px solid black; */
|
||||
background: #0a061e;
|
||||
/* 底色1 */
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.part-one {
|
||||
width: 300px;
|
||||
height: 248px;
|
||||
flex: 0.6;
|
||||
background: #111029;
|
||||
padding-top: 5px;
|
||||
/* margin-left: -15px; */
|
||||
}
|
||||
|
||||
.part-rightone {
|
||||
width: 100%;
|
||||
/* width: 300px; */
|
||||
/* height: 310px; */
|
||||
height: 350px;
|
||||
flex: 0.6;
|
||||
background: #111029;
|
||||
padding-top: 5px;
|
||||
/* margin-left: -15px; */
|
||||
}
|
||||
|
||||
.part-rightone,
|
||||
.part-two p {
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#structure_pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#structure canvas {
|
||||
font-family: myFontPF, sans-serif;
|
||||
}
|
||||
|
||||
.part-two {
|
||||
width: 300px;
|
||||
height: 248px;
|
||||
flex: 0.6;
|
||||
background: #111029;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.part-one,
|
||||
.part-two p {
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#warning_pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#warning_pie canvas {
|
||||
font-family: myFontPF, sans-serif;
|
||||
}
|
||||
|
||||
.part-three {
|
||||
width: 300px;
|
||||
/* height: 50%; */
|
||||
/* height:300px; */
|
||||
flex: 1.5;
|
||||
display: block;
|
||||
background: #111029;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.part-three p {
|
||||
font-size: 36px;
|
||||
line-height: 36px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.part-three ul {
|
||||
width: 100%;
|
||||
/* height: calc(100% - 94px); */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.part-three ul li {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.part-three>ul>li>span {
|
||||
/* width: 15%; */
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
/* float: left; */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* font-size: 16px; */
|
||||
/* font-weight: bold; */
|
||||
}
|
||||
|
||||
.part-three>ul>.golist {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.part-three>ul>.golist>span:first-child {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.part-three>ul>.golist>span:nth-child(2) {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
margin-left: -22px;
|
||||
}
|
||||
|
||||
.part-three>ul>.golist>span:last-child {
|
||||
width: 20%;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
|
||||
.part-three>ul>.lineName>span:first-child {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.part-three>ul>.lineName>span:first-child(2) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.part-three>ul>.lineName>span:first-child:last-child {
|
||||
width: 20%;
|
||||
}
|
||||
/* right */
|
||||
|
||||
.side-right {
|
||||
width: 425px;
|
||||
/* height: calc(100% - 50px); */
|
||||
height: calc(100% - 0px);
|
||||
padding: 5px;
|
||||
background-color: #0a061e;
|
||||
/* box-shadow: 0 5px 10px #0a061e; */
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
transition: right 0.3s linear 0s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.close {
|
||||
/* right: -382px; */
|
||||
right: -425px;
|
||||
}
|
||||
|
||||
.side-switch i {
|
||||
transform: translate(-55%, -45%);
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 1.5%;
|
||||
right: 17%;
|
||||
padding: 5px;
|
||||
z-index: 1006999999999999999;
|
||||
}
|
||||
|
||||
.side-switch {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #1890ff;
|
||||
position: absolute;
|
||||
left: -42px;
|
||||
bottom: 20px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-switch i {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 45%;
|
||||
transform: translate(-45%, -45%);
|
||||
}
|
||||
|
||||
.part-one {
|
||||
width: 100%;
|
||||
/* overflow: hidden; */
|
||||
/* margin-bottom: 10px; */
|
||||
}
|
||||
|
||||
.items-info {
|
||||
width: 97%;
|
||||
margin-left: 6px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.items-info .ivu-row {
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
/* border: 1px solid #dddddd; */
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
/* .el-col {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
padding: 0px 5px;
|
||||
|
||||
.el-col {
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
.el-row {
|
||||
border-top: none;
|
||||
} */
|
||||
}
|
||||
|
||||
.items-info .ivu-row .ivu-col {
|
||||
border: 1px solid rgba(80, 80, 99, 0.49);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.items-info>.ivu-row>.ivu-col>label {
|
||||
/* border: 1px solid #dddddd; */
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.part-three {
|
||||
width: 100%;
|
||||
/* height: calc((90% - 184px) / 2); */
|
||||
height: 248px;
|
||||
}
|
||||
|
||||
.rightpartthree {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
/* height: 257px; */
|
||||
height: calc((100% - 340px) / 2);
|
||||
padding: 0 5px 0 5px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rightpartthree {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
/* height: 257px; */
|
||||
height: calc((100% - 340px) / 2);
|
||||
padding: 0px 5px 10px 5px;
|
||||
/* margin-top: 10px; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 98%;
|
||||
background-color: #191934;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.titleImg .sideImg {
|
||||
width: 57px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
background-color: #191934;
|
||||
color: rgb(24, 144, 255);
|
||||
/* border:0px; */
|
||||
}
|
||||
|
||||
.titleVideo {
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
width: 100%;
|
||||
background-color: #191934;
|
||||
height: 35px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.titleVideo .sideImg {
|
||||
width: 57px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
background-color: #191934;
|
||||
color: rgb(24, 144, 255);
|
||||
/* border:0px; */
|
||||
}
|
||||
/* .rightpartthree div {
|
||||
width: 382px;
|
||||
height: 298px;
|
||||
border: 1px solid red;
|
||||
} */
|
||||
|
||||
p.title {
|
||||
width: calc(100% - 0px);
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
/* color: black; */
|
||||
/* font-weight: 600; */
|
||||
line-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -5px;
|
||||
padding-left: 5px;
|
||||
/* margin-left: 5px; */
|
||||
/* padding-top: 5px; */
|
||||
background: #191934;
|
||||
/* 底色2 */
|
||||
}
|
||||
|
||||
p.title1 {
|
||||
height: 10px;
|
||||
font-size: 6px;
|
||||
float: right;
|
||||
color: rgb(24, 144, 255);
|
||||
cursor: pointer;
|
||||
/* font-weight: 600; */
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.chartCont {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.line-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-box p {
|
||||
color: #535353;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* p.title:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
margin: 0 10px 0 0px;
|
||||
background-color: #1890ff;
|
||||
vertical-align: top;
|
||||
} */
|
||||
|
||||
#unityContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
video::-internal-media-controls-download-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-enclosure {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
video::-webkit-media-controls-panel {
|
||||
width: calc(100% + 30px);
|
||||
}
|
||||
|
||||
video /deep/ .xl-chrome-ext-bar {
|
||||
display: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.imgButton {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background: #191934;
|
||||
/* width: 70px; */
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
/* border: 0; */
|
||||
/* margin-left: 10px; */
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
margin-top: 4px;
|
||||
border-radius: 7%;
|
||||
}
|
||||
|
||||
.imgButtonPosition {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background: #191934;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
/* padding: 0 8px; */
|
||||
padding: 0 0px;
|
||||
margin-top: 4px;
|
||||
border-radius: 3%;
|
||||
width: 120px;
|
||||
}
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
@import "./normal/index.css";
|
||||
@import "./normal/time.css";
|
||||
@import "./normal/statistics.css";
|
||||
@import "./normal/structural.css";
|
||||
@import "./normal/scenario.css";
|
||||
@import "./normal/warning.css";
|
||||
@import "./normal/system.css";
|
||||
/*浅色皮肤*/
|
||||
body{background-color:#eef0f3;font-size: 14px;color:#4a4a4a;}
|
||||
.page-controller{
|
||||
/*display: block;*/
|
||||
visibility: visible;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-header{
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #161630;
|
||||
}
|
||||
.page-header .logo{
|
||||
width:400px;
|
||||
height: 50px;
|
||||
line-height: 52px;
|
||||
padding-left:48px;
|
||||
float:left;
|
||||
font-size:16px;
|
||||
color:white;
|
||||
background:url(../assets/images/logo-01.png) no-repeat 10px center / 30px 30px;
|
||||
}
|
||||
.page-header .user{
|
||||
width:calc(100% - 400px);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float:right;
|
||||
font-size:14px;
|
||||
color:white;
|
||||
text-align: right;
|
||||
padding:0 10px;
|
||||
}
|
||||
.page-header .user .themes-picker{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.page-header .user .themes-picker:hover ul{
|
||||
display: block;
|
||||
}
|
||||
.page-header .user .themes-picker > img{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.page-header .user .themes-picker ul {
|
||||
border: 1px solid rgba(80,80,99,0.49);
|
||||
padding: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:18px;
|
||||
left: 0;
|
||||
background: #142845;
|
||||
z-index: 9999;
|
||||
width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-header .user .themes-picker ul li{
|
||||
width: calc((100% - 5px) / 2);
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-header .user .themes-picker ul li + li{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.page-header .user .themes-picker ul li.active{
|
||||
border:1px red solid;
|
||||
}
|
||||
.page-header .user .themes-picker ul li img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/* 管理员 */
|
||||
.page-header .user .userinfo:hover ul{
|
||||
display: block;
|
||||
}
|
||||
.page-header .user .userinfo > img{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.page-header .user .userinfo ul {
|
||||
border: 1px solid rgba(80,80,99,0.49);
|
||||
/* padding: 5px; */
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:44px;
|
||||
left: 0;
|
||||
background: #161630;
|
||||
z-index: 9999;
|
||||
width: 60px;
|
||||
height:30px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
.page-header .user .userinfo ul li{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
/* overflow: hidden; */
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
background: #161630;
|
||||
}
|
||||
.page-header .user .userinfo ul li:hover{
|
||||
background: #252540;
|
||||
}
|
||||
.page-header .user .userinfo ul li span{
|
||||
width: 73%;
|
||||
height: 30px;
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
}
|
||||
/*.page-header .user .themes-picker{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-header .user .themes-picker li{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border:2px transparent solid;
|
||||
cursor:pointer;
|
||||
}
|
||||
.page-header .user .themes-picker li[data-theme='normal']{
|
||||
background: white;
|
||||
}
|
||||
.page-header .user .themes-picker li[data-theme='dark']{
|
||||
background: black;
|
||||
}
|
||||
.page-header .user .themes-picker li.active{
|
||||
border-color:#364C94;
|
||||
}*/
|
||||
.page-header .user .datetimer{
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-header .user .userinfo{
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-header .user .userinfo img{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
top:10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-nav{
|
||||
width: 72px;
|
||||
height: 100%;
|
||||
background: #161630;
|
||||
position: relative;
|
||||
}
|
||||
.page-nav .themes-picker{
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
bottom:50px;
|
||||
width: 52px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background: #2D2D44;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-nav .themes-picker .dot{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #81818E;
|
||||
margin: 2px
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .dot{
|
||||
float: right;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .dot{
|
||||
float: left;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .label{
|
||||
left:6px;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=normal] .label::before{
|
||||
content: '浅色'
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .label{
|
||||
left:22px;
|
||||
}
|
||||
.page-nav .themes-picker[data-theme=dark] .label::before{
|
||||
content: '深色'
|
||||
}
|
||||
.page-nav .themes-picker .label{
|
||||
color:#717181;
|
||||
position: absolute;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
top:0;
|
||||
}
|
||||
.page-nav > ul{
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
.page-nav > ul > li{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
color:white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(1){
|
||||
background-image: url(../assets/images/nav_1.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(2){
|
||||
background-image: url(../assets/images/nav_2.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(3){
|
||||
background-image: url(../assets/images/nav_3.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(4){
|
||||
background-image: url(../assets/images/nav_4.png);
|
||||
height:92px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(5){
|
||||
background-image: url(../assets/images/nav_5.png);
|
||||
height:92px;
|
||||
}
|
||||
.page-nav > ul > li:nth-child(6){
|
||||
background-image: url(../assets/images/nav_6.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(7){
|
||||
background-image: url(../assets/images/nav_8.png)
|
||||
}
|
||||
.page-nav > ul > li:nth-child(8){
|
||||
background-image: url(../assets/images/nav_7.png)
|
||||
}
|
||||
.page-nav > ul > li.active{
|
||||
background-color: #364C94;
|
||||
}
|
||||
.page-nav > ul > li:hover{
|
||||
background-color: rgba(54,76,148,.2);
|
||||
}
|
||||
.page-nav > ul > li > ul{
|
||||
display: none;
|
||||
position: absolute;
|
||||
left:70px;
|
||||
top:10px;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
z-index:99;
|
||||
box-shadow: 0 0 10px 10px rgba(0,0,0,.2);
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-nav > ul > li > ul > li{
|
||||
display: table-row;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
color:#6c6c6c;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.page-nav > ul > li > ul > li > span{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.page-nav > ul > li > ul > li:hover{
|
||||
background-color: #5985F9;
|
||||
color:white;
|
||||
}
|
||||
.page-nav > ul > li:hover ul{
|
||||
display: table;
|
||||
}
|
||||
|
||||
.page-body{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.page-body .page-box{
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
.page-body .page-box .title{
|
||||
width: 100%;
|
||||
height:40px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page-body .page-box .title-right {
|
||||
color: #75798a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.page-body .page-box .title-right:hover .title-right-tip {
|
||||
display: block;
|
||||
}
|
||||
.page-body .page-box .title-right-tip {
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
background: #f9f9f9;
|
||||
line-height: 22px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
.page-body .page-box .title ul{
|
||||
display: inline-block;
|
||||
}
|
||||
.page-body .page-box .title li{
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
padding: 0 20px;
|
||||
border-bottom: 4px transparent solid;
|
||||
}
|
||||
.page-body .page-box .title li.active{
|
||||
border-color:#5C89FF;
|
||||
}
|
||||
.page-body .page-box .title span{
|
||||
line-height: 40px;
|
||||
}
|
||||
.page-body .page-box .content{
|
||||
width: 100%;
|
||||
height:calc(100% - 40px);
|
||||
/* height:100%; */
|
||||
}
|
||||
.page-body .dynamicNotice .page-box .title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
margin-left: 10px;
|
||||
line-height: 32px;
|
||||
color: #75798a;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #c4c6cf;
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
.left {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 21%;
|
||||
bottom: 10px;
|
||||
}
|
||||
.left .info {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px 10px 20px;
|
||||
}
|
||||
.left .info ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #ebebeb;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
.left .info ul li {
|
||||
width: 100%;
|
||||
/* height: 42px;
|
||||
line-height: 42px; */
|
||||
line-height: 34px;
|
||||
border-left: 1px solid #ebebeb;
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.left .info ul li span {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
.left .info ul li span + span {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.left .info ul li a {
|
||||
font-size: 12px;
|
||||
color: #3698fd;
|
||||
}
|
||||
.left .imgbox {
|
||||
width: 100%;
|
||||
height: calc((100% - 355px) / 2);
|
||||
padding: 0 10px;
|
||||
}
|
||||
.left .imgbox + .imgbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.left .imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
left: calc(100% - 79% + 20px);
|
||||
right: 10px;
|
||||
height: calc(100% - 31% - 20px);
|
||||
top: 10px;
|
||||
}
|
||||
.right .check-box {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
z-index: 98;
|
||||
/* background: #142845; */
|
||||
}
|
||||
.right .check-box img {
|
||||
width: 12px;
|
||||
height: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
left: calc(100% - 79% + 20px);
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
height: 30%;
|
||||
}
|
||||
.bottom ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bottom ul li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.bottom ul li + li {
|
||||
border-left: 10px #eef0f3 solid;
|
||||
}
|
||||
.bottom ul li + li + li {
|
||||
border-left: 10px #eef0f3 solid;
|
||||
}
|
||||
.bottom .content4 {
|
||||
padding: 20px;
|
||||
}
|
||||
.bottom .location {
|
||||
line-height: 24px;
|
||||
}
|
||||
.bottom .location .city {
|
||||
font-size: 16px;
|
||||
}
|
||||
.bottom .location .update-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.bottom .base-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.bottom .base-info .base-info-left {
|
||||
font-size: 30px;
|
||||
color: #5c89ff;
|
||||
}
|
||||
.bottom .base-info .base-info-center span:first-of-type {
|
||||
font-size: 18px;
|
||||
}
|
||||
.bottom .base-info .base-info-right {
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background: #4ece9e;
|
||||
}
|
||||
.bottom .content4-types {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bottom .broadcast {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
background: #eee;
|
||||
}
|
||||
.bottom .broadcast img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.tip-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 90px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
.tip-box .tip-item {
|
||||
display: block;
|
||||
float: left;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.tip-box .tip-item i {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
left: 3px;
|
||||
top: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tip-box .tip-item + .tip-item {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tip-box .tip-item i.red {
|
||||
background: red;
|
||||
}
|
||||
.tip-box .tip-item i.green {
|
||||
background: green;
|
||||
}
|
||||
.tip-box .tip-item i.white {
|
||||
background: yellow;
|
||||
}
|
||||
.tip-box .tip-item i.grey {
|
||||
background: #575757;
|
||||
}
|
||||
.unity-popup {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup .lable{
|
||||
width: 100%;
|
||||
height:40px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup .lable span{
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.unity-popup .lable .lable_text{
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.unity-popup .box{
|
||||
width: 100%;
|
||||
height:40px;
|
||||
line-height: 30px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid #5C89FF;
|
||||
color: #5C89FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup2 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 450px;
|
||||
width: 350px;
|
||||
height: 234px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
z-index: 99;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup2 .lable{
|
||||
width: 100%;
|
||||
height:40px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unity-popup2 .lable span{
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.unity-popup2 .lable .lable_text{
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.unity-popup2 .box{
|
||||
width: 100%;
|
||||
height:40px;
|
||||
line-height: 30px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid #5C89FF;
|
||||
color: #5C89FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color:#000
|
||||
}
|
||||
.unity-popup2 i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color:#000
|
||||
}
|
||||
.tip-check {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
left: 12px;
|
||||
z-index: 98;
|
||||
cursor: pointer;
|
||||
}
|
||||
.custom-checkbox {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.custom-checkbox span {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0073bf;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"]:checked + span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-checkbox input[type="checkbox"]:checked + span:after {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
background: #0073bf;
|
||||
border: #fff solid 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.custom-txt {
|
||||
margin-left: 29px;
|
||||
padding-top: 1px;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.right .check-box {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
z-index: 98;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right .check-box p {
|
||||
display: inline-block;
|
||||
/* color: #6c6c6c; */
|
||||
color:#fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.title-Info {
|
||||
position: absolute !important;
|
||||
right: -94px;
|
||||
top: 73px;
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
.time-bottom .page-box .content .legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.time-bottom .page-box .content .legend li {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.time-bottom .page-box .content .legend li::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.time-bottom .page-box .content .legend1 li:first-child::before {
|
||||
border-top: 2px solid #5C89FF;
|
||||
}
|
||||
.time-bottom .page-box .content .legend1 li:last-child::before {
|
||||
border-top: 2px dotted #00C853;
|
||||
}
|
||||
.time-bottom .page-box .content .legend2 li:first-child::before {
|
||||
border-top: 2px solid #5C89FF;
|
||||
}
|
||||
.time-bottom .page-box .content .legend2 li:last-child::before {
|
||||
border-top: 2px solid #C95FF2;
|
||||
}
|
||||
.time-bottom .page-box .content .legend22 li:first-child::before {
|
||||
border-top: 2px solid #2ECA5C;
|
||||
}
|
||||
.time-bottom .page-box .content .legend22 li:last-child::before {
|
||||
border-top: 2px solid #FF9744;
|
||||
}
|
||||
.time-bottom .page-box .content .legend3 li:first-child::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #5B8FF9;
|
||||
}
|
||||
.time-bottom .page-box .content .legend3 li:last-child::before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #5AD8A6;
|
||||
}
|
||||
.time-bottom .page-box .content .legend4 li:first-child::before {
|
||||
border-top: 2px solid #5C89FF;
|
||||
}
|
||||
.time-bottom .page-box .content .legend4 li:last-child::before {
|
||||
border-top: 2px dotted #C95FF2;
|
||||
}
|
||||
.time-bottom .page-box .content .legend5 li:first-child::before {
|
||||
border-top: 2px solid #FB9225;
|
||||
}
|
||||
.time-bottom .page-box .content .legend5 li:last-child::before {
|
||||
border-top: 2px dotted #727180;
|
||||
}
|
||||
.unity-popup-dm {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 450px;
|
||||
width: 170px;
|
||||
height: 190px;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
color: #000;
|
||||
z-index: 99;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.unity-popup-dm .content-dm {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.unity-popup-dm .content-dm .btn {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
/* padding-top: 8px; */
|
||||
background: #F9F9F9;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unity-popup-dm i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
/* position: absolute;
|
||||
right: 5px;
|
||||
top: 5px; */
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
.unity-popup-dm .tit {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #F9F9F9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.unity-popup-dm .content-dm .activeblue{
|
||||
background: #5C89FF;
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.statistics-bottom .page-box .content {
|
||||
padding: 20px 0 10px;
|
||||
}
|
||||
.statistics-bottom .page-box .content .header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.statistics-bottom .two-page-box {
|
||||
display: flex;
|
||||
}
|
||||
.statistics-bottom .two-page-box .page-box {
|
||||
flex: 1;
|
||||
width: 49%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.statistics-bottom .two-page-box .page-box:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.statistics-bottom .page-box .content .chart-wrap .chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cloudRelative{
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
.structural4-top .sel1 {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 1px solid #c4c6cf;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
position: absolute;
|
||||
border:none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
.structural2-top .content ul li {
|
||||
height: calc((100% - 40px) / 5);
|
||||
}
|
||||
.structural4-top .content ul li {
|
||||
height: calc((100% - 40px) / 4);
|
||||
}
|
||||
|
|
@ -0,0 +1,464 @@
|
|||
.system1 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child .content {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child ul li label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child ul li select,
|
||||
.system1 .page-box:first-child ul li input {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid #c4c6cf;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child .buttons {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child .buttons button {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child .buttons button:first-child {
|
||||
background: transparent;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.system1 .page-box:first-child .buttons button:last-child {
|
||||
background: #5c89ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.system1 .page-box:last-child {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
height: calc(100% - 230px);
|
||||
}
|
||||
|
||||
.system2 {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*.system2 .system2-left {
|
||||
width: 318px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}*/
|
||||
.system2 .system2-left-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
height: 243px;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom {
|
||||
left: 10px;
|
||||
top: 263px;
|
||||
width: 300px;
|
||||
height: calc(100% - 283px);
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom ul li {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom ul li:first-child {
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom ul li span:first-child {
|
||||
font-size: 14px;
|
||||
color: #75798a;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom ul li span:last-child {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.system2 .system2-left-bottom .chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.system2-right {
|
||||
left: 320px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 20px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.system3-top {
|
||||
width: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.system3-top ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.system3-top li {
|
||||
width: calc((100% - 30px) / 4);
|
||||
padding: 40px 40px 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 29, 49, 0.6);
|
||||
float: left;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.system3-top li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.system3-top li:first-child {
|
||||
/* background-image: linear-gradient(38deg, #2AD0FF 0%, #0063FA 100%); */
|
||||
background: url(../../assets/images/system3-1.png) no-repeat center center/cover;
|
||||
}
|
||||
|
||||
.system3-top li:nth-child(2) {
|
||||
/* background-image: linear-gradient(198deg, #0098DA 0%, #41E0CB 100%); */
|
||||
background: url(../../assets/images/system3-2.png) no-repeat center center/cover;
|
||||
}
|
||||
|
||||
.system3-top li:nth-child(3) {
|
||||
/* background-image: linear-gradient(42deg, #FAD961 0%, #F76B1C 100%); */
|
||||
background: url(../../assets/images/system3-3.png) no-repeat center center/cover;
|
||||
}
|
||||
|
||||
.system3-top li:last-child {
|
||||
/* background-image: linear-gradient(225deg, #FF4B4F 0%, #FB7173 100%); */
|
||||
background: url(../../assets/images/system3-4.png) no-repeat center center/cover;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.system3-top li span:first-child {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.system3-top li span:last-child {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.system3-bottom {
|
||||
left: 10px;
|
||||
top: 210px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.system1 .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 72px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.system2-right .list-table,
|
||||
.system3-bottom .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.system1 .list-table ul,
|
||||
.system2-right .list-table ul,
|
||||
.system3-bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.system1 .list-table li {
|
||||
width: calc(100% / 6);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.system2-right .list-table li {
|
||||
width: calc(100% / 4);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.system3-bottom .list-table li {
|
||||
width: calc(100% / 5);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.system1 .list-table li.rd,
|
||||
.system2-right .list-table li.rd,
|
||||
.system3-bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
|
||||
.system1 .list-table li.gd,
|
||||
.system2-right .list-table li.gd,
|
||||
.system3-bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
|
||||
.system1 .list-table li.do,
|
||||
.system2-right .list-table li.do,
|
||||
.system3-bottom .list-table li.do {
|
||||
color: #55566a;
|
||||
}
|
||||
|
||||
.system1 .list-table li.do a,
|
||||
.system2-right .list-table li.do a,
|
||||
.system3-bottom .list-table li.do a {
|
||||
color: #5c89ff;
|
||||
}
|
||||
|
||||
.system1 .list-table li.do a:hover,
|
||||
.system2-right .list-table li.do a:hover,
|
||||
.system3-bottom .list-table li.do a:hover {
|
||||
color: rgb(29, 13, 75);
|
||||
}
|
||||
|
||||
.system1 .list-table .tb-hd,
|
||||
.system2-right .list-table .tb-hd,
|
||||
.system3-bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.system1 .list-table .tb-bd,
|
||||
.system2-right .list-table .tb-bd,
|
||||
.system3-bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.system1 .list-table .tb-hd ul,
|
||||
.system2-right .list-table .tb-hd ul,
|
||||
.system3-bottom .list-table .tb-hd ul {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.system1 .list-table .tb-bd ul:nth-child(odd),
|
||||
.system2-right .list-table .tb-bd ul:nth-child(odd),
|
||||
.system3-bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.system2-right .content .header,
|
||||
.system3-bottom .content .header {
|
||||
margin-top: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.system2-right .content .header-left,
|
||||
.system3-bottom .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.system2-right .content .header-left li,
|
||||
.system3-bottom .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #4c4b5e;
|
||||
color: #75798a;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.system2-right .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover,
|
||||
.system3-bottom .content .header-left li.active,
|
||||
.system2-right .content .header-left li:hover {
|
||||
border-color: #5c89ff;
|
||||
color: #5c89ff;
|
||||
}
|
||||
|
||||
.system2-right .content .header-left li:first-child,
|
||||
.system3-bottom .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.system2-right .content .header-left li:last-child,
|
||||
.system3-bottom .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right,
|
||||
.system3-bottom .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right select,
|
||||
.system3-bottom .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
/*border: 0;*/
|
||||
border-color: #c4c6cf;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right input,
|
||||
.system3-bottom .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 1px solid #c4c6cf;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right button,
|
||||
.system3-bottom .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right .search,
|
||||
.system3-bottom .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right .export,
|
||||
.system3-bottom .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right .created,
|
||||
.system3-bottom .content .header-right .created {
|
||||
width: 100px;
|
||||
background: #2ecb5d;
|
||||
}
|
||||
|
||||
.system2-right .content .header-right button img,
|
||||
.system3-bottom .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 报表管理 */
|
||||
.waring2-hide #drop .content .preDealtail .label select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 16px;
|
||||
/* color: #d9d9d9; */
|
||||
border: 1px solid #d9d9d9;
|
||||
/* border: 0; */
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.waring2-hide #drop .content .preDealtail .save_b button {
|
||||
background: RGB(92, 137, 255);
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waring2-hide #drop .content .preDealtail .save_b .btn_1 {
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #666666;
|
||||
}
|
||||
.waring2-hide .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 32px;
|
||||
margin-right: -10px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
.time-top {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: calc(100% - 396px);
|
||||
}
|
||||
.time-top .content {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
}
|
||||
.time-top .content .check-box {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
z-index:100;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
/* font-size: 16px; */
|
||||
}
|
||||
.time-top .content .check-box p{
|
||||
display: inline-block;
|
||||
}
|
||||
.time-top .content .check-box p + p{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-top .content .check-box img{
|
||||
width: 12px;
|
||||
height: auto;
|
||||
margin-left: 5px
|
||||
}
|
||||
.time-top .content ul {
|
||||
width: 300px;
|
||||
}
|
||||
.time-top .content ul li {
|
||||
float: left;
|
||||
width: 140px;
|
||||
height: calc((100% - 50px) / 6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 10px 10px 0;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-top .content ul li:hover, .time-top .content ul li.active {
|
||||
background: #5c89ff;
|
||||
color:white;
|
||||
}
|
||||
.time-top .content .imgbox {
|
||||
flex: 1;
|
||||
}
|
||||
.time-top .content .imgbox img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.time-bottom {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
height: 320px;
|
||||
}
|
||||
.time-bottom .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid #c4c6cf;
|
||||
color: #6c6c6c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li.active, .time-bottom .page-box .content .header-left li:hover {
|
||||
border-color: #5C89FF;
|
||||
color: #5C89FF;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .update span {
|
||||
color: #3698FD;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right select, .time-bottom .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 1px solid #c4c6cf;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .search {
|
||||
background: #5C89FF;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right .export {
|
||||
background: #FCB333;
|
||||
}
|
||||
.time-bottom .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .chart {
|
||||
width: calc(100% - 43px);
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom .page-box .content .chart-wrap .imgbox span {
|
||||
color: #ACB3BE;
|
||||
}
|
||||
|
||||
.time3top{
|
||||
left:15px;
|
||||
top:10px;
|
||||
right:15px;
|
||||
height: 348px;
|
||||
}
|
||||
.time3top .imgbox {
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.time3top .imgbox + .imgbox + .imgbox{
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.time3top .imgbox img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.time3bottom{
|
||||
left:15px;
|
||||
top:368px;
|
||||
right:15px;
|
||||
bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
.time3bottom .page-box{
|
||||
height: 100%;
|
||||
}
|
||||
.time3bottom .list-table{
|
||||
width: 100%;
|
||||
height: calc(100% - 84px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.time3bottom .list-table ul{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time3bottom .list-table li{
|
||||
width: calc(100% / 14);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
font-size:12px;
|
||||
text-align: center;
|
||||
}
|
||||
.time3bottom .list-table li.rd{
|
||||
color:#fc0000;
|
||||
}
|
||||
.time3bottom .list-table li.gd{
|
||||
color:#39c160;
|
||||
}
|
||||
.time3bottom .list-table .tb-hd{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.time3bottom .list-table .tb-bd{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.time3bottom .list-table .tb-hd ul{
|
||||
color:#000;
|
||||
}
|
||||
.time3bottom .list-table .tb-bd ul:nth-child(odd){
|
||||
background: #f9f9f9;
|
||||
}
|
||||
/* 统计数据-1，echarts两个合成一行 */
|
||||
.time-bottom_1 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
height: 320px;
|
||||
}
|
||||
.time-bottom_1 .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #c4c6cf;
|
||||
color: #6c6c6c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li.active, .time-bottom_1 .page-box .content .header-left li:hover {
|
||||
border-color: #5C89FF;
|
||||
color: #5C89FF;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .update span {
|
||||
color: #3698FD;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right select, .time-bottom_1 .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 1px solid #c4c6cf;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right button {
|
||||
width: 65px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .search {
|
||||
background: #5C89FF;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right .export {
|
||||
background: #FCB333;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .chart {
|
||||
width: 1380px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_1 .page-box .content .chart-wrap .imgbox span {
|
||||
color: #ACB3BE;
|
||||
}
|
||||
|
||||
/* 时程数据-1，样式单独修改 */
|
||||
.time-bottom_2 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
height: 320px;
|
||||
}
|
||||
.time-bottom_2 .page-box {
|
||||
position: static !important;
|
||||
height: 370px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content {
|
||||
padding: 20px 20px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left {
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #c4c6cf;
|
||||
color: #6c6c6c;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li.active, .time-bottom_2 .page-box .content .header-left li:hover {
|
||||
border-color: #5C89FF;
|
||||
color: #5C89FF;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-left li:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .update {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .update span {
|
||||
color: #3698FD;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right select, .time-bottom_2 .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 1px solid #c4c6cf;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .search {
|
||||
background: #5C89FF;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .export {
|
||||
background: #FCB333;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .del {
|
||||
background: #d43939;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right .upload {
|
||||
background: #66f572;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .chart {
|
||||
width: 1380px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* padding-top: 20px; */
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.time-bottom_2 .page-box .content .chart-wrap .imgbox span {
|
||||
color: #fff;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
left: 22%;
|
||||
top: 217px;
|
||||
}
|
||||
|
||||
.chart-wrap .chartTips{
|
||||
right: 83px !important;
|
||||
bottom: -126px !important;
|
||||
width: 184px !important;
|
||||
height: 90px !important;
|
||||
position: relative !important;
|
||||
border: 1px solid;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-bottom .page-box .content .chart-wrap .legendView .legendLabel {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
|
||||
.chartTips li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-tag.el-tag--info {
|
||||
background: white;
|
||||
border-color: #e9e9eb;
|
||||
color: #909399;
|
||||
}
|
||||
/* 修改element下拉选框样式 */
|
||||
|
|
@ -0,0 +1,624 @@
|
|||
.waring1 .waring1-top .page-box {
|
||||
height: 358px;
|
||||
}
|
||||
.waring2 {
|
||||
display: flex;
|
||||
}
|
||||
.waring2 .waring2-left {
|
||||
width: 49%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
top: 480px;
|
||||
height: 410px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:nth-child(-n + 2) {
|
||||
width: 100%;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:nth-child(3) {
|
||||
width: 100%;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 25px 0 30px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li span:first-of-type {
|
||||
font-size: 14px;
|
||||
color: #75798a;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child ul li span:last-of-type {
|
||||
color: #fff;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .img-box {
|
||||
flex: 1;
|
||||
}
|
||||
.waring2 .waring2-left .page-box:first-child .img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-right {
|
||||
/* width: calc(40% - 30px); */
|
||||
width: 49%;
|
||||
position: absolute;
|
||||
top: 480px;
|
||||
right: 10px;
|
||||
height: 410px;
|
||||
}
|
||||
.waring2 .waring2-right .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.waring2 .waring2-right .content .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right .search {
|
||||
background: #5c89ff;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right .export {
|
||||
background: #fcb333;
|
||||
}
|
||||
.waring2 .waring2-right .content .header-right button img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.waring2 .list-table {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
.waring2 .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .list-table li {
|
||||
width: 30%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
word-break:keep-all;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.waring2 .list-table li + li {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.waring2 .list-table li + li + li {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.waring2 .list-table li + li + li + li {
|
||||
width: 20%;
|
||||
}
|
||||
.waring2 .list-table li.lv1 {
|
||||
background: url(../../assets/images/level1.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.lv2 {
|
||||
background: url(../../assets/images/level2.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.lv3 {
|
||||
background: url(../../assets/images/level3.png) no-repeat center center;
|
||||
}
|
||||
.waring2 .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.waring2 .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
|
||||
.waring2 .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.waring2 .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.waring2 .list-table .tb-hd ul {
|
||||
color: #6c6c6c;
|
||||
}
|
||||
.waring2 .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.warning1bottom {
|
||||
left: 0;
|
||||
top: 368px;
|
||||
right: 0;
|
||||
height: 500px;
|
||||
}
|
||||
.warning1bottom .page-box {
|
||||
height: 100%;
|
||||
}
|
||||
.warning1bottom .list-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 86px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.warning1bottom .list-table ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.warning1bottom .list-table li {
|
||||
width: calc(100% / 6);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.warning1bottom .list-table li img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.warning1bottom .list-table li.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.warning1bottom .list-table li.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.warning1bottom .list-table .tb-hd {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.warning1bottom .list-table .tb-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.warning1bottom .list-table .tb-hd ul {
|
||||
color: #98b9d9;
|
||||
}
|
||||
.warning1bottom .list-table .tb-bd ul:nth-child(odd) {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.warning1bottom .page-box .content .header-right input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 1px #c4c6cf solid;
|
||||
margin-left: 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(10, 6, 30, 0.7);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.warning-detail {
|
||||
width: 500px;
|
||||
height: 80%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #111029;
|
||||
display: none;
|
||||
}
|
||||
.warning-detail .title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
background: #191934;
|
||||
}
|
||||
.warning-detail .detail {
|
||||
flex: 1;
|
||||
padding: 20px 10px 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.warning-detail .detail .base-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.warning-detail .detail .base-info label {
|
||||
line-height: 30px;
|
||||
color: #97b8da;
|
||||
}
|
||||
.warning-detail .detail .base-info img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.warning-detail .detail .base-info p {
|
||||
padding: 5px 10px;
|
||||
line-height: 22px;
|
||||
background: #191934;
|
||||
}
|
||||
.warning-detail .detail .btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.warning-detail .detail .btns button {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #5c89ff;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.warning-detail .detail .base-info .pdf {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.warning-detail .detail .base-info .pdf .operate {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-bottom {
|
||||
position: absolute;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 440px);
|
||||
top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .waring2-bottom .page-box {
|
||||
height: 100% !important;
|
||||
}
|
||||
.waring2 .waring2-bottom .content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.waring2 .waring2-bottom .check-box {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px 20px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.waring2 .waring2-bottom img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide {
|
||||
position: absolute;
|
||||
/* top: 84px; */
|
||||
top: 20px;
|
||||
left: 30%;
|
||||
background: #111029 !important;
|
||||
width: 42%;
|
||||
/* height: calc(100% - 205px); */
|
||||
height: calc(100% - 36px);
|
||||
transition: right 0.3s linear 0s;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-hide .page-box .content .top-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li {
|
||||
float: left;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li:nth-child(3n - 2) {
|
||||
width: 58%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li:nth-child(5) {
|
||||
width: 60%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li label {
|
||||
display: block;
|
||||
width: 70px;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span {
|
||||
flex: 1;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span.gd {
|
||||
color: #39c160;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .top-box li span.rd {
|
||||
color: #fd4f54;
|
||||
}
|
||||
.waring2 .waring2-hide.show {
|
||||
/* right:10px; */
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
left: 50%;
|
||||
margin-left: -21%;
|
||||
background: #111029 !important;
|
||||
width: 42%;
|
||||
/* margin: 0 auto; */
|
||||
height: calc(100% - 140px);
|
||||
transition: right 0.3s linear 0s;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table {
|
||||
border: 1px #2f2f45 solid;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
/* height: 120px; */
|
||||
height:203px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table .tb-hd ul li {
|
||||
width: calc(100% / 7);
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .list-table .tb-bd ul li {
|
||||
width: calc(100% / 7);
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-header {
|
||||
width: calc(100% - 40px) !important;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
text-align: right;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-header select {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #97b8da;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-wrap {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
height: 160px;
|
||||
/* height: calc(100% - 440px); */
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .chart-wrap .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-hide .page-box .content .bt-button {
|
||||
border: 1px #5c89ff solid;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #5c89ff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waring2 .waring2-popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 470px;
|
||||
right: 45%;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
transition: right 0.3s linear 0s;
|
||||
}
|
||||
.waring2 .waring2-popup.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.waring2 .waring2-popup .page-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.waring2 .waring2-popup .page-box .content img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.waring2 .waring2-popup .page-box .title i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-style: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-table .tb-bd > ul {
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-table .tb-bd > ul.active {
|
||||
background: rgba(131, 130, 136, 0.6) !important;
|
||||
}
|
||||
.scorce {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
.page-box::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filterChart {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
/* border: 0; */
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.timesDuring {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.time-bottom .page-box .content .chart-wrap #chart2,
|
||||
.time-bottom .page-box .content .chart-wrap #chart1 {
|
||||
/* width: 800px; */
|
||||
height: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
/* color: #97b8da; */
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.content .showInfo {
|
||||
/* width: 97%;
|
||||
margin: 0 auto;
|
||||
background: RGB(25,25,52);
|
||||
line-height: 24px; */
|
||||
}
|
||||
|
||||
.preDealtail {
|
||||
width: 100%;
|
||||
padding: 0 20px 10px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.save {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.save button {
|
||||
background: RGB(92, 137, 255);
|
||||
width: 66px;
|
||||
height: 22px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* .inputClass{
|
||||
background: RGB(25,25,52);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
} */
|
||||
|
||||
.showInfo textarea {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#time-selector2 {
|
||||
background: #fff !important;
|
||||
color: #6c6c6c !important;
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
border: 1px solid #c4c6cf;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.preOpara {
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
.preOpara:hover {
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
.preOparal {
|
||||
color: #55566a;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
@charset "UTF-8";
|
||||
.m-style {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
zoom: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.m-style:before,
|
||||
.m-style:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.m-style:after {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-style span {
|
||||
/* float: left; */
|
||||
margin: 0 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #bdbdbd;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.m-style .active {
|
||||
/* float: left; */
|
||||
margin: 0 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #5C89FF ;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border: 1px solid #5C89FF ;
|
||||
}
|
||||
|
||||
.m-style a {
|
||||
/* float: left; */
|
||||
margin: 0 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebebeb;
|
||||
color: #bdbdbd;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.m-style a:hover {
|
||||
color: #fff;
|
||||
background: #5C89FF ;
|
||||
}
|
||||
|
||||
.m-style .next,
|
||||
.m-style .prev {
|
||||
font-family: "Simsun";
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.m-style .now,
|
||||
.m-style .count {
|
||||
padding: 0 5px;
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.m-style .eg img {
|
||||
max-width: 800px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.m-style input {
|
||||
/* float: left; */
|
||||
margin: 0 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #ebebeb;
|
||||
outline: none;
|
||||
color: #bdbdbd;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
* {margin:0;padding:0;box-sizing: border-box;}
|
||||
html,body {width: 100%;height: 100%;}
|
||||
ol, ul, li{list-style: none;}
|
||||
a{text-decoration: none;}
|
||||
.page-controller{visibility: hidden;}
|
||||
.chart{width: 100%;height: 100%;}
|
||||
|
|
@ -0,0 +1,662 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
||||
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/element-uiV2.15.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
||||
<link rel="stylesheet" href="./styles/element-uiV2.15.1.css" />
|
||||
<title id="titname">demo</title>
|
||||
<style type="text/css" media="screen">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font: 14px Microsoft YaHei;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* background: url(./assets/images/login.png) no-repeat; */
|
||||
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
||||
background-size: 100% 100%;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.content .list-table {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.preDealtail .label {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
/* 竖向滚动条宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 0px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 4px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table__fixed-right-patch {
|
||||
width: 5px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed .el-table__fixed-body-wrapper {
|
||||
height: 503px !important;
|
||||
bottom: 0px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed-right {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
height: 7px !important;
|
||||
}
|
||||
|
||||
.el-table--fluid-height .el-table__fixed {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* //注意:hover */
|
||||
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
|
||||
/* // 滚动条的滑块 */
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: 510px !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar {
|
||||
width: 6PX !important;
|
||||
height: 6PX !important;
|
||||
}
|
||||
|
||||
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right {
|
||||
height: calc(100% - 6PX) !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
|
||||
height: 100% !important;
|
||||
bottom: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 6PX !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
|
||||
right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div > -->
|
||||
|
||||
<div class="content" id="app">
|
||||
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="电表名称：">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间：">
|
||||
<el-radio-group v-model="form.resource" @change="handleChange">
|
||||
<el-radio label="年">年</el-radio>
|
||||
<el-radio label="月">月</el-radio>
|
||||
<el-radio label="周">周</el-radio>
|
||||
<el-radio label="日">日</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="form.year" v-if="form.resource=='年'" type="year" placeholder="选择年"
|
||||
value-format="yyyy">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="form.month" v-if="form.resource=='月'" type="month" placeholder="选择月"
|
||||
value-format="yyyy-MM">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="form.week" v-if="form.resource=='周'" type="week" format="yyyy 第 WW 周"
|
||||
placeholder="选择周" @input="cc">
|
||||
</el-date-picker>
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"
|
||||
v-if="form.resource=='日'" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit(form)">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="list-table">
|
||||
<el-table :data="tableData" ref="table" :key="onlyKey" :span-method="objectSpanMethod"
|
||||
:summary-method="getSummaries" show-summary border style="width: 100%; margin-top: 20px"
|
||||
max-height="700" min-height="500" height="600">
|
||||
<!-- <el-table-column fixed width="50" label="序号" prop="newIndex">
|
||||
</el-table-column> -->
|
||||
<el-table-column type="index" label="序号" width="50" fixed>
|
||||
<template slot-scope="{ $index, row }">
|
||||
{{ getRealIndex($index) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" width="180" fixed label="电表名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" width="180" fixed label="类型">
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
|
||||
width="180">
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column prop="total_electricity_code" label="总电量起止码" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total_electricity_meter" label="总电量表计读数" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="total_electricity" label="总用电量（kW·h）" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="pointed_electricity_code" label="尖电量起止码" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="pointed_electricity_meter" label="尖电量表计读数" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="pointed_electricity" label="尖用电量（kW·h）" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="peak_electricity_code" label="峰电量起止码" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="peak_electricity_meter" label="峰电量表计读数" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="peak_electricity" label="峰用电量（kW·h）" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="flat_electricity_code" label="平电量起止码" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="flat_electricity_meter" label="平电量表计读数" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="flat_electricity" label="平用电量（kW·h）" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="valley_electricity_code" label="谷电量起止码" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="valley_electricity_meter" label="谷电量表计读数" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="valley_electricity" label="谷用电量（kW·h）" width="180">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="transformer_magn" label="电流互感器倍率" width="150">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltage_transformer" label="电压互感器倍率" width="150">
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
</div> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
let init = function () {
|
||||
|
||||
}
|
||||
function add0(m) {
|
||||
return m < 10 ? "0" + m : m;
|
||||
}
|
||||
//年月日级格式_/
|
||||
function formattime(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
var d = time.getDate();
|
||||
var h = time.getHours();
|
||||
var mm = time.getMinutes();
|
||||
var s = time.getSeconds();
|
||||
return y + "-" + add0(m) + "-" + add0(d);
|
||||
}
|
||||
function formattimeMoth(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
return y + "-" + add0(m)
|
||||
}
|
||||
function formattimeYear(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
|
||||
return y
|
||||
}
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
form: {
|
||||
name: '',
|
||||
|
||||
date1: formattime(new Date().getTime()),
|
||||
year: '',
|
||||
month: '',
|
||||
week: '',
|
||||
start: '',
|
||||
end: '',
|
||||
type: "",
|
||||
resource: '日',
|
||||
},
|
||||
tableData: [
|
||||
// {
|
||||
// name: '宿舍楼',
|
||||
// total_electricity_code: '53.88/53.91',
|
||||
// total_electricity_meter: '0.03',
|
||||
// total_electricity: '60',
|
||||
// pointed_electricity_code: '3.07/3.07',
|
||||
// pointed_electricity_meter: '0',
|
||||
// pointed_electricity: '0',
|
||||
// peak_electricity_code: '13.61/13.61',
|
||||
// peak_electricity_meter: "4.24",
|
||||
// peak_electricity: "8480",
|
||||
// flat_electricity_code: '13.96/19.48',
|
||||
// flat_electricity_meter: '5.62',
|
||||
// flat_electricity: '11240',
|
||||
// valley_electricity_code: '11.91/17.44',
|
||||
// valley_electricity_meter: '5.53',
|
||||
// valley_electricity: '11060',
|
||||
// transformer_magn: '2000',
|
||||
// voltage_transformer: '2000',
|
||||
// type: '正向有功'
|
||||
// },
|
||||
],
|
||||
position: 0,
|
||||
rowSpanArr: [],
|
||||
onlyKey: '',
|
||||
targetSum: 0,
|
||||
indexData: [],
|
||||
},
|
||||
mounted() {
|
||||
// this.objectSpanMethod()
|
||||
var newTime = formattime(new Date().getTime())
|
||||
this.getTableData(this.form.resource, newTime, '', this.form.name)
|
||||
|
||||
},
|
||||
methods: {
|
||||
getRealIndex(index, row) {
|
||||
// 在这里可以自定义序号的生成逻辑
|
||||
// 考虑合并单元格的情况
|
||||
// 返回实际的序号值
|
||||
// 假设有一个字段 mergedRows 记录需要合并的行的索引
|
||||
// 你的实际合并行索引数组
|
||||
// 如果当前行的索引在合并行的索引数组中，则返回一个空字符串
|
||||
if (app.indexData.includes(index)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
//计算实际的序号值
|
||||
return index - app.indexData.filter((mergedRow) => mergedRow < index).length + 1;
|
||||
},
|
||||
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '合计';
|
||||
return;
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]));
|
||||
if (index == 5 || index == 8 || index == 11 || index == 14 || index == 17) {
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
sums[index];
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return sums;
|
||||
},
|
||||
handleChange(val) {
|
||||
this.form.date1 = ''
|
||||
this.form.year = ''
|
||||
this.form.month = ''
|
||||
this.form.week = ''
|
||||
this.form.start = ''
|
||||
this.form.end = ''
|
||||
if (val == '周') {
|
||||
this.form.week = new Date().getTime()
|
||||
this.cc()
|
||||
// this.form.week = formattime(new Date().getTime())
|
||||
} else if (val == '月') {
|
||||
this.form.month = formattime(new Date().getTime())
|
||||
} else if (val == '日') {
|
||||
this.form.date1 = formattime(new Date())
|
||||
} else if (val == '年') {
|
||||
this.form.year = formattime(new Date().getTime())
|
||||
}
|
||||
},
|
||||
cc() {
|
||||
let weekOfday = moment(this.form.week).format("E");
|
||||
let Monday = moment(this.form.week).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||||
let Sunday = moment(this.form.week)
|
||||
.add(6 - weekOfday, "days")
|
||||
.format("YYYY-MM-DD"); //周日日期
|
||||
console.log(Monday, Sunday);
|
||||
this.form.start = Monday
|
||||
this.form.end = Sunday
|
||||
},
|
||||
// changeWeek(val) {
|
||||
// let weekOfday = moment(val).format("E");
|
||||
// let Monday = moment(val).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||||
// let Sunday = moment(val)
|
||||
// .add(7 - weekOfday, "days")
|
||||
// .format("YYYY-MM-DD"); //周日日期
|
||||
// console.log(Monday, Sunday);
|
||||
// this.form.start= Monday
|
||||
// this.form.end = Sunday
|
||||
// },
|
||||
getTableData(type, startdate, enddate, name) {
|
||||
//var electricity_data = [];
|
||||
if (type == '周' || type == '日') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: startdate,
|
||||
name: name,
|
||||
year: "",
|
||||
month: "",
|
||||
end_date: enddate
|
||||
}
|
||||
|
||||
} else if (type == '年') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: "",
|
||||
name: name,
|
||||
year: startdate,
|
||||
month: "",
|
||||
end_date: ""
|
||||
}
|
||||
} else if (type == '月') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: "",
|
||||
name: name,
|
||||
year: "",
|
||||
month: startdate,
|
||||
end_date: ""
|
||||
}
|
||||
}
|
||||
|
||||
axios({
|
||||
method: "POST",
|
||||
url: "http://172.16.1.253:8084/Vue/RealTimeElectricity.aspx/getElectricityList",
|
||||
data: JSON.stringify(data),
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
}).then(function (res) {
|
||||
app.tableData = res.data.d
|
||||
app.rowSpanArr = [];
|
||||
app.onlyKey = Math.random()
|
||||
app.tableData.forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
app.rowSpanArr.push(1);
|
||||
app.position = 0;
|
||||
} else {
|
||||
if (app.tableData[index].name == app.tableData[index - 1].name) {
|
||||
app.rowSpanArr[app.position] += 1; //项目名称相同，合并到同一个数组中
|
||||
app.rowSpanArr.push(0);
|
||||
app.tableData[index].name = app.tableData[index - 1].name;
|
||||
} else {
|
||||
app.rowSpanArr.push(1);
|
||||
app.position = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
// app.tableData = app.tableData.map((obj, index) => {
|
||||
// return { ...obj, newIndex: index + 1 };
|
||||
// });
|
||||
app.targetSum = app.tableData.length;
|
||||
app.indexData = [];
|
||||
for (let i = 1; i <= app.targetSum; i += 2) {
|
||||
app.indexData.push(i);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
onSubmit(form) {
|
||||
if (form.resource == '周') {
|
||||
|
||||
|
||||
if (form.start != '') {
|
||||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||||
} else {
|
||||
|
||||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||||
// var newTime = formattimeMoth(new Date().getTime())
|
||||
// this.getTableData(form.resource,newTime,"",form.name)
|
||||
}
|
||||
} else if (form.resource == '月') {
|
||||
if (form.month != '') {
|
||||
var newTime = formattimeMoth(form.month)
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
} else {
|
||||
var newTime = formattimeMoth(new Date().getTime())
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
}
|
||||
} else if (form.resource == '年') {
|
||||
if (form.year != '') {
|
||||
var newTime = formattimeYear(form.year)
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
} else {
|
||||
var newTime = formattimeYear(new Date().getTime())
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
}
|
||||
|
||||
} else if (form.resource == '日') {
|
||||
if (form.date1 != '') {
|
||||
var newTime = formattime(form.date1)
|
||||
this.getTableData(form.resource, newTime, '', form.name)
|
||||
} else {
|
||||
var newTime = formattime(new Date().getTime())
|
||||
this.getTableData(this.form.resource, newTime, '', this.form.name)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
if (columnIndex === 1) {
|
||||
// const _row = this.spanArr[rowIndex]; //合并行的行数，1代表独占一行，比1大代表合并若干行，0代表不显示
|
||||
// const _col = _row>0 ? 1 : 0; //行如果存在那么列就存在，行不存在那么列也就不存在
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
//想对每行的哪几列进行比较就写哪些列
|
||||
// if(columnIndex === 2){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 3){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 4){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 5){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 6){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 7){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 8){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 9){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,983 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
||||
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/element-uiV2.15.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
||||
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
||||
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
||||
<link rel="stylesheet" href="./styles/element-uiV2.15.1.css" />
|
||||
<title id="titname">demo</title>
|
||||
<style type="text/css" media="screen">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font: 14px Microsoft YaHei;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* background: url(./assets/images/login.png) no-repeat; */
|
||||
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
||||
background-size: 100% 100%;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.content .list-table {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.preDealtail .label {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
/* 竖向滚动条宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
right: 0px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 4px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table__fixed-right-patch {
|
||||
width: 5px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__fixed .el-table__fixed-body-wrapper {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
max-height: 100% !important
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed {
|
||||
height: auto !important;
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__fixed-right {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-y .el-table__fixed-right {
|
||||
right: 5px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
height: 7px !important;
|
||||
}
|
||||
|
||||
.el-table--fluid-height .el-table__fixed {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* //注意:hover */
|
||||
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
overflow: auto !important;
|
||||
position: relative;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
/* // 滚动条的滑块 */
|
||||
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.el-tag.el-tag--info {
|
||||
background-color: rgb(239, 243, 246);
|
||||
border-color: rgb(64, 158, 255);
|
||||
color: rgb(64, 158, 255);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div > -->
|
||||
|
||||
<div class="content" id="app">
|
||||
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<!-- <el-form-item label="类型：">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="名称：">
|
||||
<el-input v-model="form.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷名称：">
|
||||
<!-- <el-input v-model="form.name"></el-input> -->
|
||||
<el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
|
||||
:style="{color:'rgb(64,158,255)'}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围：">
|
||||
<el-radio-group v-model="form.resource" @change="handleChange">
|
||||
<el-radio label="日">按日</el-radio>
|
||||
<el-radio label="周">按周</el-radio>
|
||||
<el-radio label="月">按月</el-radio>
|
||||
<el-radio label="年">按年</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-date-picker v-model="form.year"
|
||||
v-if="form.resource=='年'"
|
||||
type="year"
|
||||
placeholder="选择年" value-format="yyyy">
|
||||
</el-date-picker> -->
|
||||
<div v-if="form.resource=='年'">
|
||||
<el-date-picker v-model="addForm.date_range_start" :picker-options="pickerOptionsYearStart"
|
||||
value-format="yyyy" type="year" placeholder="开始时间" ref="datePicker" key="year">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="addForm.date_range_end" value-format="yyyy"
|
||||
:picker-options="pickerOptionsYearEnd" type="year" placeholder="结束时间" ref="datePicker"
|
||||
key="year">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <el-date-picker v-model="form.month" type="monthrange" range-separator="~" start-placeholder="开始月份"
|
||||
v-if="form.resource=='月'" end-placeholder="结束月份">
|
||||
</el-date-picker> -->
|
||||
<div v-if="form.resource=='月'">
|
||||
<el-date-picker v-model="addForm.date_range_start" type="month" placeholder="开始日期"
|
||||
:picker-options="pickerOptionsMonthStart" key="month">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="addForm.date_range_end" type="month" placeholder="结束日期"
|
||||
:picker-options="pickerOptionsMonthEnd" key="month">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<!-- <el-date-picker v-model="form.week" v-if="form.resource=='周'" type="week" format="yyyy 第 WW 周"
|
||||
placeholder="选择周" @input="cc">
|
||||
</el-date-picker> -->
|
||||
<div v-if="form.resource=='周'">
|
||||
<el-date-picker v-model="form.week" type="week" placeholder="开始日期"
|
||||
:picker-options="pickerOptions0" key="week" :format="'yyyy 第 WW 周'">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="form.weekend" type="week" placeholder="结束日期"
|
||||
:picker-options="pickerOptions1" key="week" :format="'yyyy 第 WW 周'">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-if="form.resource=='日'">
|
||||
<el-date-picker v-model="addForm.date_range_start" type="date" placeholder="开始日期"
|
||||
:picker-options="pickerOptions0" key="day">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="addForm.date_range_end" type="date" placeholder="结束日期"
|
||||
:picker-options="pickerOptions1" key="day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<!-- <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;" v-if="form.resource=='日'" value-format="yyyy-MM-dd"></el-date-picker> -->
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-refresh" @click="onSubmit(form)">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="onSubmit(form)">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- <div class="list-table">
|
||||
|
||||
<el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%">
|
||||
|
||||
<template v-for="(col ,index) in cols">
|
||||
<el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"></el-table-column>
|
||||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
<br>数据:{{tableData}}
|
||||
|
||||
</div> -->
|
||||
<template>
|
||||
<div style="height:90%;overflow: auto">
|
||||
<el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%;"
|
||||
:header-cell-style="{background:'rgb(239,243,246)',textAlign:'center'}"
|
||||
:cell-style="{textAlign:'center'}">
|
||||
<el-table-column type="index" label="序号" fixed="left" width="150">
|
||||
</el-table-column>
|
||||
<!-- <template v-for="(col ,index) in cols">
|
||||
<el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label">
|
||||
</el-table-column>
|
||||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary">{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template> -->
|
||||
<el-table-column prop="name" label="名称" fixed="left" width="150"></el-table-column>
|
||||
<el-table-column label="负荷名称" fixed="left" width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="(item,index) in scope.row.load_name" style="margin-top: 10px">
|
||||
{{item}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(col ,index) in cols">
|
||||
<!-- <el-table-column v-if="col.type==='normal'" :prop="col.prop" :label="col.label"> -->
|
||||
<!-- </el-table-column> -->
|
||||
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label"
|
||||
width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="(item,key) in col.list" :key="key" style="
|
||||
display: flex;
|
||||
flex-direction: column">
|
||||
<!-- <el-tag type="primary"> -->
|
||||
<!-- {{ item }} -->
|
||||
<!-- </el-tag> -->
|
||||
<div v-for="(i,n) in item.value" :key="n">
|
||||
<div v-if="scope.row.index == key" style="
|
||||
display: flex;
|
||||
flex-direction: column;justify-content: space-between;margin-top:10px">
|
||||
{{i}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="合计" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="(item,index) in scope.row.total" style="margin-top: 10px">
|
||||
{{item}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <br>数据:{{tableData}} -->
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!--
|
||||
</div> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
let init = function () {
|
||||
|
||||
}
|
||||
|
||||
function add0(m) {
|
||||
return m < 10 ? "0" + m : m;
|
||||
}
|
||||
//年月日级格式_/
|
||||
function formattime(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
var d = time.getDate();
|
||||
var h = time.getHours();
|
||||
var mm = time.getMinutes();
|
||||
var s = time.getSeconds();
|
||||
return y + "-" + add0(m) + "-" + add0(d);
|
||||
}
|
||||
|
||||
function formattimeMoth(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
return y + "-" + add0(m)
|
||||
}
|
||||
|
||||
function formattimeYear(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = new Date(shijianchuo);
|
||||
var y = time.getFullYear();
|
||||
|
||||
return y
|
||||
}
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
form: {
|
||||
name: '',
|
||||
date1: '',
|
||||
yearStart: '',
|
||||
yearEnd: '',
|
||||
month: '',
|
||||
week: '',
|
||||
weekend: '',
|
||||
start: '',
|
||||
end: '',
|
||||
type: "",
|
||||
resource: '月',
|
||||
},
|
||||
options1: [{
|
||||
value: '正向有功电量',
|
||||
label: '正向有功电量'
|
||||
}, {
|
||||
value: '反向有功电量',
|
||||
label: '反向有功电量'
|
||||
}, {
|
||||
value: '正向有功尖电量',
|
||||
label: '正向有功尖电量'
|
||||
}, {
|
||||
value: '正向有功峰电量',
|
||||
label: '正向有功峰电量'
|
||||
}, {
|
||||
value: '正向有功平电量',
|
||||
label: '正向有功平电量'
|
||||
}, {
|
||||
value: '正向有功谷电量',
|
||||
label: '正向有功谷电量'
|
||||
}],
|
||||
value: '',
|
||||
options: [{
|
||||
value: '正向有功电量',
|
||||
label: '正向有功电量'
|
||||
}, {
|
||||
value: '反向有功电量',
|
||||
label: '反向有功电量'
|
||||
}, {
|
||||
value: '正向有功尖电量',
|
||||
label: '正向有功尖电量'
|
||||
}, {
|
||||
value: '正向有功峰电量',
|
||||
label: '正向有功峰电量'
|
||||
}, {
|
||||
value: '正向有功平电量',
|
||||
label: '正向有功平电量'
|
||||
}, {
|
||||
value: '正向有功谷电量',
|
||||
label: '正向有功谷电量'
|
||||
}],
|
||||
value1: [],
|
||||
value2: ['正向有功电量', '反向有功电量', '正向有功尖电量', '正向有功峰电量', '正向有功平电量', '正向有功谷电量'],
|
||||
addForm: {
|
||||
date_range_end: moment().format('YYYY') + '-' + moment().format('MM'),
|
||||
date_range_start: moment().format('YYYY') + '-' + moment().format('MM'),
|
||||
},
|
||||
pickerOptions0: { //结束时间不能大于开始时间
|
||||
disabledDate: (time) => {
|
||||
if (app.addForm.date_range_end) {
|
||||
return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
pickerOptions1: {
|
||||
disabledDate: (time) => {
|
||||
if (app.addForm.date_range_start) {
|
||||
return time.getTime() < new Date(app.addForm.date_range_start).getTime() - 1 *
|
||||
24 * 60 * 60 * 1000; //可以选择同一天
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerOptionsYearStart: {
|
||||
disabledDate: (time) => {
|
||||
let fixedTime = new Date(time)
|
||||
if (app.addForm.date_range_end != '') {
|
||||
return fixedTime.getFullYear() > app.addForm.date_range_end
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerOptionsYearEnd: {
|
||||
disabledDate(time) {
|
||||
let fixedTime = new Date(time)
|
||||
return fixedTime.getFullYear() < app.addForm.date_range_start
|
||||
}
|
||||
},
|
||||
pickerOptionsMonthStart: {
|
||||
disabledDate(time) {
|
||||
// if (!app.addForm.date_range_end) {
|
||||
// return false;
|
||||
// }
|
||||
// return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
||||
return false
|
||||
}
|
||||
},
|
||||
pickerOptionsMonthEnd: {
|
||||
disabledDate(time) {
|
||||
if (!app.addForm.date_range_start) {
|
||||
return false;
|
||||
}
|
||||
return time.getTime() < new Date(app.addForm.date_range_start).getTime();
|
||||
}
|
||||
},
|
||||
// tableData: [
|
||||
|
||||
// ],
|
||||
cols: [
|
||||
// {
|
||||
// label: "名称",
|
||||
// prop: "node",
|
||||
// type: "normal"
|
||||
// },
|
||||
// {
|
||||
// label: "负荷名称",
|
||||
// prop: "name",
|
||||
// type: "normal"
|
||||
// },
|
||||
// {
|
||||
// label: "2023",
|
||||
// prop: "type",
|
||||
// type: "sort"
|
||||
// },
|
||||
// {
|
||||
// label: "合计",
|
||||
// prop: "coordinate",
|
||||
// type: "normal"
|
||||
// }
|
||||
],
|
||||
tableData: [
|
||||
// {
|
||||
// node: "0051",
|
||||
// name: " 机库顶",
|
||||
// type: "UWB",
|
||||
// status: "正常",
|
||||
// coordinate: "12.21,34.45,34.6"
|
||||
// },
|
||||
// {
|
||||
// node: "0061",
|
||||
// name: "机库门",
|
||||
// type: "GPS",
|
||||
// status: "低电",
|
||||
// coordinate: "45.41,67.45,78.6"
|
||||
// }
|
||||
],
|
||||
position: 0,
|
||||
rowSpanArr: [],
|
||||
onlyKey: '',
|
||||
apiURL: 'http://172.16.1.253:8084/',
|
||||
searchType: '月',
|
||||
},
|
||||
mounted() {
|
||||
// this.objectSpanMethod()
|
||||
// var newTime = formattime(new Date().getTime())
|
||||
// this.getTableData(this.form.resource,newTime,'',this.form.name)
|
||||
this.search()
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
search() {
|
||||
if (this.value2.length > 0 && ((this.form.week != '' && this.form.weekend != '') || (this
|
||||
.addForm.date_range_start != '' && this.addForm.date_range_end != ''))) {
|
||||
this.tableData = [];
|
||||
this.cols = [];
|
||||
let dataList = {
|
||||
type: '',
|
||||
load_name: '',
|
||||
name: '',
|
||||
start_date: '',
|
||||
end_date: ''
|
||||
}
|
||||
if (this.searchType == '周') {
|
||||
dataList.type = this.searchType,
|
||||
dataList.load_name = this.value2,
|
||||
dataList.name = this.form.name,
|
||||
dataList.start_date = moment(this.form.week).subtract(1, 'days').format(
|
||||
"YYYY-MM-DD"),
|
||||
dataList.end_date = moment(this.form.weekend).add(5, 'days').format(
|
||||
"YYYY-MM-DD")
|
||||
} else if (this.searchType == '年') {
|
||||
dataList.type = this.searchType,
|
||||
dataList.load_name = this.value2,
|
||||
dataList.name = this.form.name,
|
||||
dataList.start_date = this.addForm.date_range_start,
|
||||
dataList.end_date = this.addForm.date_range_end
|
||||
} else if (this.searchType == '月') {
|
||||
dataList.type = this.searchType,
|
||||
dataList.load_name = this.value2,
|
||||
dataList.name = this.form.name,
|
||||
dataList.start_date = moment(this.addForm.date_range_start).format("YYYY-MM"),
|
||||
dataList.end_date = moment(this.addForm.date_range_end).format("YYYY-MM")
|
||||
} else if (this.searchType == '日') {
|
||||
dataList.type = this.searchType,
|
||||
dataList.load_name = this.value2,
|
||||
dataList.name = this.form.name,
|
||||
dataList.start_date = moment(this.addForm.date_range_start).format(
|
||||
"YYYY-MM-DD"),
|
||||
dataList.end_date = moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
||||
}
|
||||
|
||||
console.log(dataList, 'dataList');
|
||||
axios({
|
||||
method: "POST",
|
||||
url: this.apiURL + "Vue/ElectricityReportForms.aspx/getElectricityList",
|
||||
data: dataList,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
}).then((res) => {
|
||||
this.tableData = res.data.d
|
||||
this.tableData = this.tableData.map((item, index) => ({
|
||||
...item,
|
||||
index: (index).toString()
|
||||
}));
|
||||
this.tableData.forEach((item, index) => {
|
||||
for (let i = 0; i < item.list.length; i++) {
|
||||
this.cols.push({
|
||||
label: item.list[i].time,
|
||||
prop: "type",
|
||||
type: "sort",
|
||||
value: item.list[i].values,
|
||||
name: item.name,
|
||||
load_name: item.load_name,
|
||||
total: item.total
|
||||
})
|
||||
}
|
||||
});
|
||||
let uniqueNames = []
|
||||
// this.cols = this.cols.filter(obj => {
|
||||
// if (!uniqueNames.includes(obj.label)) {
|
||||
// uniqueNames.push(obj.label);
|
||||
// return true;
|
||||
// }
|
||||
// return false;
|
||||
// });
|
||||
this.cols = this.cols.reduce((result, item) => {
|
||||
// 检查结果数组中是否已存在相同 label 的项
|
||||
let existingItem = result.find((el) => el.label === item.label);
|
||||
|
||||
// 如果存在，将当前项的 value 和 age 添加到该项的 list 中
|
||||
if (existingItem) {
|
||||
existingItem.list.push({
|
||||
prop: item.prop,
|
||||
type: item.type,
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
load_name: item.load_name,
|
||||
total: item.total
|
||||
});
|
||||
} else {
|
||||
// 如果不存在，创建一个新的项并添加到结果数组中
|
||||
result.push({
|
||||
label: item.label,
|
||||
prop: "type",
|
||||
type: "sort",
|
||||
list: [{
|
||||
prop: item.prop,
|
||||
type: item.type,
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
load_name: item.load_name,
|
||||
total: item.total
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, []);
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请输入输入查询信息')
|
||||
}
|
||||
|
||||
},
|
||||
//获取两个年之间的所有年
|
||||
getAllYears(startYear, endYear) {
|
||||
const years = [];
|
||||
for (let year = startYear; year <= endYear; year++) {
|
||||
years.push(year);
|
||||
}
|
||||
return years;
|
||||
},
|
||||
//获取两个日期之间的所有时间段
|
||||
getAllDates(startDate, endDate) {
|
||||
const dates = [];
|
||||
let currentDate = new Date(startDate);
|
||||
let currentEndDate = new Date(endDate);
|
||||
while (currentDate <= currentEndDate) {
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const date = currentDate.getDate();
|
||||
const dateStr =
|
||||
`${year}-${month < 10 ? '0' : ''}${month}-${date < 10 ? '0' : ''}${date}`;
|
||||
dates.push(dateStr);
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
return dates;
|
||||
},
|
||||
getdisabled(date) {
|
||||
|
||||
this.pickerOptions = Object.assign({}, this.pickerOptions, {
|
||||
|
||||
disabledDate(time) {
|
||||
|
||||
return time.getTime() <
|
||||
date; //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
handleCurrentChange(row, event, column) {
|
||||
console.log(row, event, column, event.currentTarget);
|
||||
},
|
||||
handleEdit(index, row) {
|
||||
console.log(index, row);
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
console.log(index, row);
|
||||
},
|
||||
getSummaries(param) {
|
||||
const {
|
||||
columns,
|
||||
data
|
||||
} = param;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '合计';
|
||||
return;
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]));
|
||||
if (index == 5 || index == 8 || index == 11 || index == 14 || index == 17) {
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
console.log("prev", prev)
|
||||
console.log("curr", curr)
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
sums[index];
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return sums;
|
||||
},
|
||||
handleChange(val) {
|
||||
this.addForm = {
|
||||
date_range_end: '',
|
||||
date_range_start: ''
|
||||
}
|
||||
this.searchType = val
|
||||
this.form.date1 = ''
|
||||
this.form.year = ''
|
||||
this.form.month = ''
|
||||
this.form.week = ''
|
||||
this.form.start = ''
|
||||
this.form.end = ''
|
||||
if (val == '周') {
|
||||
this.form.week = new Date().getTime()
|
||||
this.form.weekend = new Date().getTime()
|
||||
this.cc()
|
||||
// this.form.week = formattime(new Date().getTime())
|
||||
} else if (val == '月') {
|
||||
this.form.month = formattime(new Date().getTime())
|
||||
} else if (val == '日') {
|
||||
this.form.date1 = formattime(new Date())
|
||||
} else if (val == '年') {
|
||||
this.form.year = formattime(new Date().getTime())
|
||||
}
|
||||
},
|
||||
cc() {
|
||||
let weekOfday = moment(this.form.week).format("E");
|
||||
let Monday = moment(this.form.week).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||||
let Sunday = moment(this.form.week)
|
||||
.add(6 - weekOfday, "days")
|
||||
.format("YYYY-MM-DD"); //周日日期
|
||||
this.form.start = Monday
|
||||
this.form.end = Sunday
|
||||
},
|
||||
// changeWeek(val) {
|
||||
// let weekOfday = moment(val).format("E");
|
||||
// let Monday = moment(val).subtract(weekOfday, "days").format("YYYY-MM-DD"); //周一日期
|
||||
// let Sunday = moment(val)
|
||||
// .add(7 - weekOfday, "days")
|
||||
// .format("YYYY-MM-DD"); //周日日期
|
||||
// console.log(Monday, Sunday);
|
||||
// this.form.start= Monday
|
||||
// this.form.end = Sunday
|
||||
// },
|
||||
getTableData(type, startdate, enddate, name) {
|
||||
console.log("startdate", startdate)
|
||||
console.log("enddate", enddate)
|
||||
//var electricity_data = [];
|
||||
if (type == '周' || type == '日') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: startdate,
|
||||
name: name,
|
||||
year: "",
|
||||
month: "",
|
||||
end_date: enddate
|
||||
}
|
||||
|
||||
} else if (type == '年') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: "",
|
||||
name: name,
|
||||
year: startdate,
|
||||
month: "",
|
||||
end_date: ""
|
||||
}
|
||||
} else if (type == '月') {
|
||||
var data = {
|
||||
type: type,
|
||||
start_date: "",
|
||||
name: name,
|
||||
year: "",
|
||||
month: startdate,
|
||||
end_date: ""
|
||||
}
|
||||
}
|
||||
|
||||
axios({
|
||||
method: "POST",
|
||||
url: "http://172.16.1.253:8084/Vue/RealTimeElectricity.aspx/getElectricityList",
|
||||
data: JSON.stringify(data),
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
}).then(function (res) {
|
||||
app.tableData = res.data.d
|
||||
app.rowSpanArr = [];
|
||||
app.onlyKey = Math.random()
|
||||
app.tableData.forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
app.rowSpanArr.push(1);
|
||||
app.position = 0;
|
||||
} else {
|
||||
if (app.tableData[index].name == app.tableData[index - 1]
|
||||
.name) {
|
||||
app.rowSpanArr[app.position] += 1; //项目名称相同，合并到同一个数组中
|
||||
app.rowSpanArr.push(0);
|
||||
app.tableData[index].name = app.tableData[index - 1].name;
|
||||
} else {
|
||||
app.rowSpanArr.push(1);
|
||||
app.position = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
onSubmit(form) {
|
||||
console.log("form", form)
|
||||
if (form.resource == '周') {
|
||||
|
||||
|
||||
if (form.start != '') {
|
||||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||||
} else {
|
||||
|
||||
this.getTableData(form.resource, form.start, form.end, form.name)
|
||||
// var newTime = formattimeMoth(new Date().getTime())
|
||||
// this.getTableData(form.resource,newTime,"",form.name)
|
||||
}
|
||||
} else if (form.resource == '月') {
|
||||
if (form.month != '') {
|
||||
var newTime = formattimeMoth(form.month)
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
} else {
|
||||
var newTime = formattimeMoth(new Date().getTime())
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
}
|
||||
} else if (form.resource == '年') {
|
||||
if (form.year != '') {
|
||||
var newTime = formattimeYear(form.year)
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
} else {
|
||||
var newTime = formattimeYear(new Date().getTime())
|
||||
this.getTableData(form.resource, newTime, "", form.name)
|
||||
}
|
||||
|
||||
} else if (form.resource == '日') {
|
||||
if (form.date1 != '') {
|
||||
var newTime = formattime(form.date1)
|
||||
this.getTableData(form.resource, newTime, '', form.name)
|
||||
} else {
|
||||
var newTime = formattime(new Date().getTime())
|
||||
this.getTableData(this.form.resource, newTime, '', this.form.name)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
objectSpanMethod({
|
||||
row,
|
||||
column,
|
||||
rowIndex,
|
||||
columnIndex
|
||||
}) {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
if (columnIndex === 1) {
|
||||
// const _row = this.spanArr[rowIndex]; //合并行的行数，1代表独占一行，比1大代表合并若干行，0代表不显示
|
||||
// const _col = _row>0 ? 1 : 0; //行如果存在那么列就存在，行不存在那么列也就不存在
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
//想对每行的哪几列进行比较就写哪些列
|
||||
// if(columnIndex === 2){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 3){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 4){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 5){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 6){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 7){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 8){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
// if(columnIndex === 9){
|
||||
// const _row = this.spanArr[rowIndex];
|
||||
// const _col = _row>0 ? 1 : 0;
|
||||
// return {
|
||||
// rowspan: _row,
|
||||
// colspan: _col
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue