|
|
@@ -1,640 +1,647 @@
|
|
|
<template>
|
|
|
- <div style="padding-left:10rem">
|
|
|
- <el-row type="flex" class="row-bg">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="titleContent">硫含量超标船舶分布
|
|
|
- <div style="float:right;margin-right:4rem">
|
|
|
- <span style="color:#666666;margin-right:5rem">日期</span>
|
|
|
- <!-- <div style="width:20rem;float:left"> -->
|
|
|
- <el-date-picker
|
|
|
- v-model="liuDate"
|
|
|
- type="month"
|
|
|
- placeholder="选择月份"
|
|
|
- size='mini'
|
|
|
- style="width:50rem"
|
|
|
- @change="liuPie"
|
|
|
- value-format="yyyy-MM">
|
|
|
- </el-date-picker>
|
|
|
- <!-- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div id="liuPieChart" style="width:250rem;height:145rem;"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="titleContent">黑烟抓拍分布
|
|
|
- <div style="float:right;margin-right:4rem">
|
|
|
- <span style="color:#666666;margin-right:5rem">日期</span>
|
|
|
- <!-- <div style="width:20rem"> -->
|
|
|
- <el-date-picker
|
|
|
- v-model="blackDate"
|
|
|
- type="month"
|
|
|
- placeholder="选择月份"
|
|
|
- size='mini'
|
|
|
- style="width:50rem"
|
|
|
- @change="hyPie"
|
|
|
- value-format="yyyy-MM">
|
|
|
- </el-date-picker>
|
|
|
- <!-- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div id="hyPieChart" style="width:250rem;height:145rem;"></div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row type="flex" class="row-bg" >
|
|
|
- <el-col :span="12">
|
|
|
- <div class="titleContent">硫含量超标船舶统计</div>
|
|
|
- <div>
|
|
|
- <div @click="back" style="float:left;margin-top:60rem">
|
|
|
- <img src="@/assets/images/return.png" class="icon_size"/>
|
|
|
- </div>
|
|
|
- <div id="myChart" style="width:250rem;height:145rem;float:left"></div>
|
|
|
- <div @click="next" style="float:left;margin-top:60rem">
|
|
|
- <img src="@/assets/images/next.png" class="icon_size"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="titleContent">黑烟抓拍统计</div>
|
|
|
- <div>
|
|
|
- <div @click="hyback" style="float:left;margin-top:60rem">
|
|
|
- <img src="@/assets/images/return.png" class="icon_size"/>
|
|
|
- </div>
|
|
|
- <div id="hyChart" style="width:250rem;height:145rem;float:left"></div>
|
|
|
- <div @click="hynext" style="float:left;margin-top:60rem">
|
|
|
- <img src="@/assets/images/next.png" class="icon_size"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div style="padding-left:10rem">
|
|
|
+ <el-row type="flex" class="row-bg">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="titleContent">硫含量超标船舶分布
|
|
|
+ <div style="float:right;margin-right:4rem">
|
|
|
+ <span style="color:#666666;margin-right:5rem">日期</span>
|
|
|
+ <!-- <div style="width:20rem;float:left"> -->
|
|
|
+ <el-date-picker
|
|
|
+ v-model="liuDate"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月份"
|
|
|
+ size='mini'
|
|
|
+ style="width:50rem"
|
|
|
+ @change="liuPie"
|
|
|
+ value-format="yyyy-MM">
|
|
|
+ </el-date-picker>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="liuPieChart" style="width:250rem;height:145rem;"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="titleContent">黑烟抓拍分布
|
|
|
+ <div style="float:right;margin-right:4rem">
|
|
|
+ <span style="color:#666666;margin-right:5rem">日期</span>
|
|
|
+ <!-- <div style="width:20rem"> -->
|
|
|
+ <el-date-picker
|
|
|
+ v-model="blackDate"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月份"
|
|
|
+ size='mini'
|
|
|
+ style="width:50rem"
|
|
|
+ @change="hyPie"
|
|
|
+ value-format="yyyy-MM">
|
|
|
+ </el-date-picker>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="hyPieChart" style="width:250rem;height:145rem;"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" class="row-bg">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="titleContent">硫含量超标船舶统计</div>
|
|
|
+ <div>
|
|
|
+ <div @click="back" style="float:left;margin-top:60rem">
|
|
|
+ <img src="@/assets/images/return.png" class="icon_size"/>
|
|
|
+ </div>
|
|
|
+ <div id="myChart" style="width:250rem;height:145rem;float:left"></div>
|
|
|
+ <div @click="next" style="float:left;margin-top:60rem">
|
|
|
+ <img src="@/assets/images/next.png" class="icon_size"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="titleContent">黑烟抓拍统计</div>
|
|
|
+ <div>
|
|
|
+ <div @click="hyback" style="float:left;margin-top:60rem">
|
|
|
+ <img src="@/assets/images/return.png" class="icon_size"/>
|
|
|
+ </div>
|
|
|
+ <div id="hyChart" style="width:250rem;height:145rem;float:left"></div>
|
|
|
+ <div @click="hynext" style="float:left;margin-top:60rem">
|
|
|
+ <img src="@/assets/images/next.png" class="icon_size"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getDicts } from "@/api/system/dict/data";
|
|
|
-import { getBlackSnapPos,getSo2SnapPos,getSo2Time } from "@/api/data/staticalData";
|
|
|
+import {getDicts} from "@/api/system/dict/data";
|
|
|
+import {getBlackSnapPos, getSo2SnapPos, getSo2Time} from "@/api/data/staticalData";
|
|
|
|
|
|
export default {
|
|
|
name: "Statistical",
|
|
|
data() {
|
|
|
return {
|
|
|
- months:[],
|
|
|
- hyMonths:[],
|
|
|
- liuDate:new Date(),
|
|
|
- blackDate:new Date(),
|
|
|
- liuMonth:'',
|
|
|
- blackMonth:'',
|
|
|
- blackName:undefined,
|
|
|
- so2Name:undefined,
|
|
|
- so2TimeData:undefined,
|
|
|
- monthOptions:[
|
|
|
- {
|
|
|
- value:"2021-08",
|
|
|
- label:'2021年8月'
|
|
|
- }
|
|
|
+ months: [],
|
|
|
+ hyMonths: [],
|
|
|
+ liuDate: new Date(),
|
|
|
+ blackDate: new Date(),
|
|
|
+ liuMonth: '',
|
|
|
+ blackMonth: '',
|
|
|
+ blackName: undefined,
|
|
|
+ so2Name: undefined,
|
|
|
+ so2TimeData: undefined,
|
|
|
+ monthOptions: [
|
|
|
+ {
|
|
|
+ value: "2021-08",
|
|
|
+ label: '2021年8月'
|
|
|
+ }
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- var myDate = new Date();
|
|
|
- var tYear = myDate.getFullYear();
|
|
|
- var tMonth = myDate.getMonth();
|
|
|
- if(tMonth < 5){
|
|
|
- for(var m=1;m<7;m++){
|
|
|
- this.months.push(tYear+"-"+"0"+m);
|
|
|
- this.hyMonths.push(tYear+"-"+"0"+m);
|
|
|
- }
|
|
|
- }else{
|
|
|
- for(var m=7;m<13;m++){
|
|
|
- if(m <10){
|
|
|
- this.months.push((tYear)+"-"+"0"+m);
|
|
|
- this.hyMonths.push((tYear)+"-"+"0"+m);
|
|
|
- }else{
|
|
|
- this.months.push((tYear)+"-"+m);
|
|
|
- this.hyMonths.push((tYear)+"-"+m);
|
|
|
- }
|
|
|
- }
|
|
|
+ var myDate = new Date();
|
|
|
+ var tYear = myDate.getFullYear();
|
|
|
+ var tMonth = myDate.getMonth();
|
|
|
+ if (tMonth < 5) {
|
|
|
+ for (var m = 1; m < 7; m++) {
|
|
|
+ this.months.push(tYear + "-" + "0" + m);
|
|
|
+ this.hyMonths.push(tYear + "-" + "0" + m);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var m = 7; m < 13; m++) {
|
|
|
+ if (m < 10) {
|
|
|
+ this.months.push((tYear) + "-" + "0" + m);
|
|
|
+ this.hyMonths.push((tYear) + "-" + "0" + m);
|
|
|
+ } else {
|
|
|
+ this.months.push((tYear) + "-" + m);
|
|
|
+ this.hyMonths.push((tYear) + "-" + m);
|
|
|
}
|
|
|
- console.log(tMonth)
|
|
|
- this.getDicts('heiyan_snap_pos');
|
|
|
- this.getDicts('so2_snap_pos');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(tMonth)
|
|
|
+ this.getDicts('heiyan_snap_pos');
|
|
|
+ this.getDicts('so2_snap_pos');
|
|
|
// console.log(this.blackName);
|
|
|
// this.hyLine();
|
|
|
- this.getSo2Time();
|
|
|
+ this.getSo2Time();
|
|
|
// this.liuPie();
|
|
|
// this.hyPie();
|
|
|
},
|
|
|
methods: {
|
|
|
- getSo2Time(){
|
|
|
- getSo2Time().then(data =>{
|
|
|
- this.so2TimeData = data.data
|
|
|
- this.drawLine();
|
|
|
- this.hyLine()
|
|
|
- });
|
|
|
- },
|
|
|
- getDicts(type){
|
|
|
- getDicts(type).then(data =>{
|
|
|
- if(type == 'heiyan_snap_pos'){
|
|
|
- this.blackName = data.data;
|
|
|
- this.hyPie();
|
|
|
- // console.log(this.blackName);
|
|
|
- }else if(type == 'so2_snap_pos'){
|
|
|
- this.so2Name = data.data;
|
|
|
- this.liuPie();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- back(){
|
|
|
- var year = parseInt(this.months[0].split("-")[0])
|
|
|
- var month = parseInt(this.months[0].split("-")[1])
|
|
|
- this.months = [];
|
|
|
- if(month > 5){
|
|
|
- for(var m=1;m<7;m++){
|
|
|
- this.months.push(year+"-"+"0"+m);
|
|
|
+ getSo2Time() {
|
|
|
+ getSo2Time().then(data => {
|
|
|
+ this.so2TimeData = data.data
|
|
|
+ this.drawLine();
|
|
|
+ this.hyLine()
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDicts(type) {
|
|
|
+ getDicts(type).then(data => {
|
|
|
+ if (type == 'heiyan_snap_pos') {
|
|
|
+ this.blackName = data.data;
|
|
|
+ this.hyPie();
|
|
|
+ // console.log(this.blackName);
|
|
|
+ } else if (type == 'so2_snap_pos') {
|
|
|
+ this.so2Name = data.data;
|
|
|
+ this.liuPie();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ var year = parseInt(this.months[0].split("-")[0])
|
|
|
+ var month = parseInt(this.months[0].split("-")[1])
|
|
|
+ this.months = [];
|
|
|
+ if (month > 5) {
|
|
|
+ for (var m = 1; m < 7; m++) {
|
|
|
+ this.months.push(year + "-" + "0" + m);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var m = 7; m < 13; m++) {
|
|
|
+ if (m < 10) {
|
|
|
+ this.months.push((year - 1) + "-" + "0" + m);
|
|
|
+ } else {
|
|
|
+ this.months.push((year - 1) + "-" + m);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.drawLine();
|
|
|
+ },
|
|
|
+ next() {
|
|
|
+ var year = parseInt(this.months[0].split("-")[0])
|
|
|
+ var month = parseInt(this.months[0].split("-")[1])
|
|
|
+ this.months = [];
|
|
|
+ if (month > 5) {
|
|
|
+ for (var m = 1; m < 7; m++) {
|
|
|
+ this.months.push((year + 1) + "-" + "0" + m);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var m = 7; m < 13; m++) {
|
|
|
+ if (m < 10) {
|
|
|
+ this.months.push(year + "-" + "0" + m);
|
|
|
+ } else {
|
|
|
+ this.months.push(year - 1 + "-" + m);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.drawLine();
|
|
|
+ },
|
|
|
+ hyback() {
|
|
|
+ var year = parseInt(this.hyMonths[0].split("-")[0])
|
|
|
+ var month = parseInt(this.hyMonths[0].split("-")[1])
|
|
|
+ this.hyMonths = [];
|
|
|
+ if (month > 5) {
|
|
|
+ for (var m = 1; m < 7; m++) {
|
|
|
+ this.hyMonths.push(year + "-" + "0" + m);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var m = 7; m < 13; m++) {
|
|
|
+ if (m < 10) {
|
|
|
+ this.hyMonths.push((year - 1) + "-" + "0" + m);
|
|
|
+ } else {
|
|
|
+ this.hyMonths.push((year - 1) + "-" + m);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.hyLine();
|
|
|
+ },
|
|
|
+ hynext() {
|
|
|
+ var year = parseInt(this.hyMonths[0].split("-")[0])
|
|
|
+ var month = parseInt(this.hyMonths[0].split("-")[1])
|
|
|
+ this.hyMonths = [];
|
|
|
+ if (month > 5) {
|
|
|
+ for (var m = 1; m < 7; m++) {
|
|
|
+ this.hyMonths.push((year + 1) + "-" + "0" + m);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var m = 7; m < 13; m++) {
|
|
|
+ if (m < 10) {
|
|
|
+ this.hyMonths.push(year + "-" + "0" + m);
|
|
|
+ } else {
|
|
|
+ this.hyMonths.push(year - 1 + "-" + m);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.hyLine();
|
|
|
+ },
|
|
|
+ liuPie() {
|
|
|
+ getSo2SnapPos({'month': this.liuDate}).then(response => {
|
|
|
+ console.log(response);
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('liuPieChart'));
|
|
|
+ var series = [];
|
|
|
+ for (var index in this.so2Name) {
|
|
|
+ console.log(this.so2Name[index].dictLabel);
|
|
|
+ var object = {
|
|
|
+ 'value': response.data[this.so2Name[index].dictLabel],
|
|
|
+ 'name': this.so2Name[index].dictLabel,
|
|
|
+ 'itemStyle': {
|
|
|
+ 'normal': {
|
|
|
+ 'color': this.so2Name[index].cssClass
|
|
|
}
|
|
|
- }else{
|
|
|
- for(var m=7;m<13;m++){
|
|
|
- if(m <10){
|
|
|
- this.months.push((year-1)+"-"+"0"+m);
|
|
|
- }else{
|
|
|
- this.months.push((year-1)+"-"+m);
|
|
|
+ },
|
|
|
+ // 'label':{'color':this.blackName[index].cssClass}
|
|
|
+ }
|
|
|
+ series.push(object);
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '25%',
|
|
|
+ right: 'right'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '检测点',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ alignTo: 'labelLine',
|
|
|
+ formatter: '{name|{b}}\n{time|{d} %}',
|
|
|
+ minMargin: 5,
|
|
|
+ edgeDistance: 10,
|
|
|
+ lineHeight: 15,
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ time: {
|
|
|
+ fontSize: 10,
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 20,
|
|
|
+ length2: 20,
|
|
|
+ maxSurfaceAngle: 80
|
|
|
+ },
|
|
|
+ data: series
|
|
|
}
|
|
|
- this.drawLine();
|
|
|
- },
|
|
|
- next(){
|
|
|
- var year = parseInt(this.months[0].split("-")[0])
|
|
|
- var month = parseInt(this.months[0].split("-")[1])
|
|
|
- this.months = [];
|
|
|
- if(month > 5){
|
|
|
- for(var m=1;m<7;m++){
|
|
|
- this.months.push((year+1)+"-"+"0"+m);
|
|
|
- }
|
|
|
- }else{
|
|
|
- for(var m=7;m<13;m++){
|
|
|
- if(m <10){
|
|
|
- this.months.push(year+"-"+"0"+m);
|
|
|
- }else{
|
|
|
- this.months.push(year-1+"-"+m);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.drawLine();
|
|
|
- },
|
|
|
- hyback(){
|
|
|
- var year = parseInt(this.hyMonths[0].split("-")[0])
|
|
|
- var month = parseInt(this.hyMonths[0].split("-")[1])
|
|
|
- this.hyMonths = [];
|
|
|
- if(month > 5){
|
|
|
- for(var m=1;m<7;m++){
|
|
|
- this.hyMonths.push(year+"-"+"0"+m);
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hyPie() {
|
|
|
+ console.log(this.blackDate);
|
|
|
+ var that = this;
|
|
|
+ getBlackSnapPos({'month': this.blackDate}).then(response => {
|
|
|
+ var myChart = that.$echarts.init(document.getElementById('hyPieChart'));
|
|
|
+ var series = [];
|
|
|
+ for (var index in that.blackName) {
|
|
|
+ var object = {
|
|
|
+ 'value': response.data[that.blackName[index].dictLabel],
|
|
|
+ 'name': that.blackName[index].dictLabel,
|
|
|
+ 'itemStyle': {
|
|
|
+ 'normal': {
|
|
|
+ 'color': that.blackName[index].cssClass
|
|
|
}
|
|
|
- }else{
|
|
|
- for(var m=7;m<13;m++){
|
|
|
- if(m <10){
|
|
|
- this.hyMonths.push((year-1)+"-"+"0"+m);
|
|
|
- }else{
|
|
|
- this.hyMonths.push((year-1)+"-"+m);
|
|
|
+ },
|
|
|
+ // 'label':{'color':this.blackName[index].cssClass}
|
|
|
+ }
|
|
|
+ series.push(object);
|
|
|
+ }
|
|
|
+ // console.log(series)
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '25%',
|
|
|
+ right: 'right'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '检测点',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ alignTo: 'labelLine',
|
|
|
+ formatter: '{name|{b}}\n{time|{d} %}',
|
|
|
+ minMargin: 5,
|
|
|
+ edgeDistance: 10,
|
|
|
+ lineHeight: 15,
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ time: {
|
|
|
+ fontSize: 10,
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- this.hyLine();
|
|
|
- },
|
|
|
- hynext(){
|
|
|
- var year = parseInt(this.hyMonths[0].split("-")[0])
|
|
|
- var month = parseInt(this.hyMonths[0].split("-")[1])
|
|
|
- this.hyMonths = [];
|
|
|
- if(month > 5){
|
|
|
- for(var m=1;m<7;m++){
|
|
|
- this.hyMonths.push((year+1)+"-"+"0"+m);
|
|
|
- }
|
|
|
- }else{
|
|
|
- for(var m=7;m<13;m++){
|
|
|
- if(m <10){
|
|
|
- this.hyMonths.push(year+"-"+"0"+m);
|
|
|
- }else{
|
|
|
- this.hyMonths.push(year-1+"-"+m);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.hyLine();
|
|
|
- },
|
|
|
- liuPie(){
|
|
|
- getSo2SnapPos({'month':this.liuDate}).then(response => {
|
|
|
- console.log(response);
|
|
|
- var myChart = this.$echarts.init(document.getElementById('liuPieChart'));
|
|
|
- var series = [];
|
|
|
- for(var index in this.so2Name){
|
|
|
- console.log(this.so2Name[index].dictLabel);
|
|
|
- var object = {
|
|
|
- 'value':response.data[this.so2Name[index].dictLabel],
|
|
|
- 'name':this.so2Name[index].dictLabel,
|
|
|
- 'itemStyle': {
|
|
|
- 'normal':{
|
|
|
- 'color':this.so2Name[index].cssClass
|
|
|
- }
|
|
|
- },
|
|
|
- // 'label':{'color':this.blackName[index].cssClass}
|
|
|
- }
|
|
|
- series.push(object);
|
|
|
- }
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '25%',
|
|
|
- right: 'right'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '检测点',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- alignTo: 'labelLine',
|
|
|
- formatter: '{name|{b}}\n{time|{d} %}',
|
|
|
- minMargin: 5,
|
|
|
- edgeDistance: 10,
|
|
|
- lineHeight: 15,
|
|
|
- rich: {
|
|
|
- name:{
|
|
|
- fontSize: 10,
|
|
|
- color:'#000'
|
|
|
- },
|
|
|
- time: {
|
|
|
- fontSize: 10,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- length: 20,
|
|
|
- length2: 20,
|
|
|
- maxSurfaceAngle: 80
|
|
|
- },
|
|
|
- data: series
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- })
|
|
|
- },
|
|
|
- hyPie(){
|
|
|
- console.log(this.blackDate);
|
|
|
- var that = this;
|
|
|
- getBlackSnapPos({'month':this.blackDate}).then(response => {
|
|
|
- var myChart = that.$echarts.init(document.getElementById('hyPieChart'));
|
|
|
- var series = [];
|
|
|
- for(var index in that.blackName){
|
|
|
- var object = {
|
|
|
- 'value':response.data[that.blackName[index].dictLabel],
|
|
|
- 'name':that.blackName[index].dictLabel,
|
|
|
- 'itemStyle': {
|
|
|
- 'normal':{
|
|
|
- 'color':that.blackName[index].cssClass
|
|
|
- }
|
|
|
- },
|
|
|
- // 'label':{'color':this.blackName[index].cssClass}
|
|
|
- }
|
|
|
- series.push(object);
|
|
|
- }
|
|
|
- // console.log(series)
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '25%',
|
|
|
- right: 'right'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '检测点',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- alignTo: 'labelLine',
|
|
|
- formatter: '{name|{b}}\n{time|{d} %}',
|
|
|
- minMargin: 5,
|
|
|
- edgeDistance: 10,
|
|
|
- lineHeight: 15,
|
|
|
- rich: {
|
|
|
- name:{
|
|
|
- fontSize: 10,
|
|
|
- color:'#000'
|
|
|
- },
|
|
|
- time: {
|
|
|
- fontSize: 10,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- length: 20,
|
|
|
- length2: 20,
|
|
|
- maxSurfaceAngle: 80
|
|
|
- },
|
|
|
- data: series
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- });
|
|
|
- },
|
|
|
- drawLine(){
|
|
|
- var so2Arry = [];
|
|
|
- var aisArry = [];
|
|
|
- for(var index in this.months){
|
|
|
- // console.log(this.so2TimeData.so2['2021-01-01T00:00:00Z']);
|
|
|
- if(this.so2TimeData.so2[this.months[index]+'-01T00:00:00Z']){
|
|
|
- so2Arry.push(this.so2TimeData.so2[this.months[index]+'-01T00:00:00Z']);
|
|
|
- }else {
|
|
|
- so2Arry.push(0);
|
|
|
- }
|
|
|
- if(this.so2TimeData.ais[this.months[index]+'-01T00:00:00Z']){
|
|
|
- aisArry.push(this.so2TimeData.ais[this.months[index]+'-01T00:00:00Z']);
|
|
|
- }else{
|
|
|
- aisArry.push(0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 20,
|
|
|
+ length2: 20,
|
|
|
+ maxSurfaceAngle: 80
|
|
|
+ },
|
|
|
+ data: series
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ drawLine() {
|
|
|
+ var so2Arry = [];
|
|
|
+ var aisArry = [];
|
|
|
+ for (var index in this.months) {
|
|
|
+ // console.log(this.so2TimeData.so2['2021-01-01T00:00:00Z']);
|
|
|
+ if (this.so2TimeData.so2[this.months[index] + '-01T00:00:00Z']) {
|
|
|
+ so2Arry.push(this.so2TimeData.so2[this.months[index] + '-01T00:00:00Z']);
|
|
|
+ } else {
|
|
|
+ so2Arry.push(0);
|
|
|
+ }
|
|
|
+ if (this.so2TimeData.ais[this.months[index] + '-01T00:00:00Z']) {
|
|
|
+ aisArry.push(this.so2TimeData.ais[this.months[index] + '-01T00:00:00Z']);
|
|
|
+ } else {
|
|
|
+ aisArry.push(0);
|
|
|
}
|
|
|
- var myChart = this.$echarts.init(document.getElementById('myChart'));
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- textStyle: {
|
|
|
- fontSize:20,
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- right: '10%',
|
|
|
- top: '3%',
|
|
|
- data: ['嗅探','光谱']
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '5%',
|
|
|
- right: '5%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: true,
|
|
|
- axisLine:{ //y轴
|
|
|
- show:false,
|
|
|
- color: ['#657ca8'],
|
|
|
- },
|
|
|
- data: this.months,
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle:{
|
|
|
- color: ['#657ca8'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- fontSize:15,
|
|
|
- color: 'black' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisTick:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- axisLine:{ //y轴
|
|
|
- show:false
|
|
|
-
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- color: ['#435886'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- fontSize:15,
|
|
|
- color: 'black' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '光谱',
|
|
|
- type: 'line',
|
|
|
- data:so2Arry,
|
|
|
- symbolSize:5,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- color:'#228FFE',
|
|
|
- lineStyle:{
|
|
|
- color:'#228FFE', //折线颜色
|
|
|
- width:3
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- areaStyle: {color:{
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(34,143,254,1)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(34,143,254,0)' // 100% 处的颜色
|
|
|
- }],
|
|
|
- global: false // 缺省为 false
|
|
|
- }},
|
|
|
- },
|
|
|
- {
|
|
|
- name: '嗅探',
|
|
|
- type: 'line',
|
|
|
- data: aisArry,
|
|
|
- symbolSize:5,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- color:'#7EFF7B',
|
|
|
- lineStyle:{
|
|
|
- color:'#7EFF7B', //折线颜色
|
|
|
- width:3
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- areaStyle: {color:{
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(126,255,123,1)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(126,255,123,0)' // 100% 处的颜色
|
|
|
- }],
|
|
|
- global: false // 缺省为 false
|
|
|
- }},
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- hyLine(){
|
|
|
- // console.log();
|
|
|
- // console.log(this.so2TimeData.black);
|
|
|
- var black = [];
|
|
|
- for(var index in this.hyMonths){
|
|
|
+ }
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('myChart'));
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ right: '10%',
|
|
|
+ top: '3%',
|
|
|
+ data: ['嗅探', '光谱']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: true,
|
|
|
+ axisLine: { //y轴
|
|
|
+ show: false,
|
|
|
+ color: ['#657ca8'],
|
|
|
+ },
|
|
|
+ data: this.months,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#657ca8'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 15,
|
|
|
+ color: 'black' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: { //y轴
|
|
|
+ show: false
|
|
|
+
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#435886'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 15,
|
|
|
+ color: 'black' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '光谱',
|
|
|
+ type: 'line',
|
|
|
+ data: so2Arry,
|
|
|
+ symbolSize: 5,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#228FFE',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#228FFE', //折线颜色
|
|
|
+ width: 3
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(34,143,254,1)' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(34,143,254,0)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '嗅探',
|
|
|
+ type: 'line',
|
|
|
+ data: aisArry,
|
|
|
+ symbolSize: 5,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#7EFF7B',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#7EFF7B', //折线颜色
|
|
|
+ width: 3
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(126,255,123,1)' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(126,255,123,0)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ hyLine() {
|
|
|
+ // console.log();
|
|
|
+ // console.log(this.so2TimeData.black);
|
|
|
+ var black = [];
|
|
|
+ for (var index in this.hyMonths) {
|
|
|
// console.log(this.so2TimeData.black['2021-08-01T00:00:00Z']);
|
|
|
- if(this.so2TimeData.black[this.hyMonths[index]+'-01T00:00:00Z']){
|
|
|
- black.push(this.so2TimeData.black[this.hyMonths[index]+'-01T00:00:00Z']);
|
|
|
- }else{
|
|
|
- black.push(0);
|
|
|
- }
|
|
|
+ if (this.so2TimeData.black[this.hyMonths[index] + '-01T00:00:00Z']) {
|
|
|
+ black.push(this.so2TimeData.black[this.hyMonths[index] + '-01T00:00:00Z']);
|
|
|
+ } else {
|
|
|
+ black.push(0);
|
|
|
}
|
|
|
- var myChart = this.$echarts.init(document.getElementById('hyChart'));
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- textStyle: {
|
|
|
- fontSize:20,
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '5%',
|
|
|
- right: '5%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: true,
|
|
|
- axisLine:{ //y轴
|
|
|
- show:false,
|
|
|
- color: ['#657ca8'],
|
|
|
- },
|
|
|
- data: this.hyMonths,
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle:{
|
|
|
- color: ['#657ca8'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- fontSize:15,
|
|
|
- color: 'black' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisTick:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- axisLine:{ //y轴
|
|
|
- show:false
|
|
|
- },
|
|
|
- name: '单位:艘',
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- color: ['#435886'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- fontSize:15,
|
|
|
- color: 'black' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '昨日',
|
|
|
- type: 'line',
|
|
|
- data:black,
|
|
|
- symbolSize:5,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- color:'#FF8000',
|
|
|
- lineStyle:{
|
|
|
- color:'#FF8000', //折线颜色
|
|
|
- width:3
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- areaStyle: {color:{
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(255,128,0,1)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(255,128,0,0)' // 100% 处的颜色
|
|
|
- }],
|
|
|
- global: false // 缺省为 false
|
|
|
- }},
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
+ }
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('hyChart'));
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: true,
|
|
|
+ axisLine: { //y轴
|
|
|
+ show: false,
|
|
|
+ color: ['#657ca8'],
|
|
|
+ },
|
|
|
+ data: this.hyMonths,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#657ca8'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 15,
|
|
|
+ color: 'black' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: { //y轴
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ name: '单位:艘',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#435886'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 15,
|
|
|
+ color: 'black' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '违规',
|
|
|
+ type: 'line',
|
|
|
+ data: black,
|
|
|
+ symbolSize: 5,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FF8000',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FF8000', //折线颜色
|
|
|
+ width: 3
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: 'rgba(255,128,0,1)' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'rgba(255,128,0,0)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .icon_size{
|
|
|
- width:10rem;
|
|
|
- height:20rem;
|
|
|
- }
|
|
|
- .titleContent{
|
|
|
- margin-top:5rem;
|
|
|
- width:280rem;
|
|
|
- height:15rem;
|
|
|
- font-size: 6rem;
|
|
|
- font-weight:bold;
|
|
|
- padding-left:8rem;
|
|
|
- padding-top:2rem;
|
|
|
- background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#C9E9F8), to(#F2F9FF));/*谷歌*/
|
|
|
- }
|
|
|
-
|
|
|
- /* .wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
|
|
|
- width:50rem;
|
|
|
- } */
|
|
|
-
|
|
|
-</style>
|
|
|
+.icon_size {
|
|
|
+ width: 10rem;
|
|
|
+ height: 20rem;
|
|
|
+}
|
|
|
+
|
|
|
+.titleContent {
|
|
|
+ margin-top: 5rem;
|
|
|
+ width: 280rem;
|
|
|
+ height: 15rem;
|
|
|
+ font-size: 6rem;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-left: 8rem;
|
|
|
+ padding-top: 2rem;
|
|
|
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9E9F8), to(#F2F9FF)); /*谷歌*/
|
|
|
+}
|
|
|
+
|
|
|
+/* .wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
|
|
|
+ width:50rem;
|
|
|
+} */
|
|
|
+
|
|
|
+</style>
|
459242451@qq.com