|
|
@@ -1,808 +1,871 @@
|
|
|
<template>
|
|
|
- <div style="width:100%;height:100%;background-color:blue">
|
|
|
- <div class="shipDiv" v-show="shipShow">
|
|
|
- <div class="shipTitle">
|
|
|
- <span style="float:left">一号船</span>
|
|
|
- <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
|
|
|
- </div>
|
|
|
- <div style="padding—left:10rem" class="shipContent">
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="AIS信息" name="first">
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">SO<sub>2</sub>浓度:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">CO<sub>2</sub>浓度:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">NO<sub>2</sub>浓度:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">硫碳比:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- <el-col :span="4"><div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div></el-col>
|
|
|
- <el-col :span="8"><div class="grid-content bg-purple contentFont" style="float:left">11111</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="监测数据" name="second">
|
|
|
- <el-table
|
|
|
- stripe='true'
|
|
|
- :header-cell-style="{ background: '#e4eafc'}"
|
|
|
- ref="singleTable"
|
|
|
- :data="tableData"
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%"
|
|
|
- class="tableSc">
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="序号"
|
|
|
- width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- property="name"
|
|
|
- label="监测点"
|
|
|
- width="60">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- :label="'硫碳比(>'+normalPer+'%)'"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.value > normalPer" style="color:red">{{scope.row.value}}% ↑ {{((scope.row.value-normalPer)/normalPer*100).toFixed(0)}}%</div>
|
|
|
- <div v-if=" scope.row.value <= normalPer">{{scope.row.value}}%</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- :label="'硫碳比(≧'+normalCount+'度)'">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.count > normalCount" style="color:red">{{scope.row.count}}度 ↑ {{((scope.row.count-normalCount)/normalCount*100).toFixed(0)}}%</div>
|
|
|
- <div v-if=" scope.row.count <= normalCount">{{scope.row.count}}度</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- property="date"
|
|
|
- label="监测时间">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane label="其它监测数据" name="thrid">
|
|
|
- <el-table
|
|
|
- stripe='true'
|
|
|
- :header-cell-style="{ background: '#e4eafc'}"
|
|
|
- ref="singleTable"
|
|
|
- :data="tableData"
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%"
|
|
|
- class="tableSc">
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="序号"
|
|
|
- width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- property="name"
|
|
|
- label="监测点"
|
|
|
- width="60">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- :label="'硫碳比(>'+normalPer+'%)'"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.value > normalPer" style="color:red">{{scope.row.value}}% ↑ {{((scope.row.value-normalPer)/normalPer*100).toFixed(0)}}%</div>
|
|
|
- <div v-if=" scope.row.value <= normalPer">{{scope.row.value}}%</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- :label="'硫碳比(≧'+normalCount+'度)'">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.count > normalCount" style="color:red">{{scope.row.count}}度 ↑ {{((scope.row.count-normalCount)/normalCount*100).toFixed(0)}}%</div>
|
|
|
- <div v-if=" scope.row.count <= normalCount">{{scope.row.count}}度</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- property="date"
|
|
|
- label="监测时间">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div style="width:100%;height:100%;background-color:blue">
|
|
|
+ <div class="shipDiv" v-show="shipShow">
|
|
|
+ <div class="shipTitle">
|
|
|
+ <span style="float:left">一号船</span>
|
|
|
+ <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
|
|
|
+ </div>
|
|
|
+ <div style="padding—left:10rem" class="shipContent">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="AIS信息" name="first">
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">SO<sub>2</sub>浓度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">CO<sub>2</sub>浓度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">NO<sub>2</sub>浓度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">硫碳比:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="主要监测数据" name="second">
|
|
|
+ <el-table
|
|
|
+ stripe='true'
|
|
|
+ :header-cell-style="{ background: '#e4eafc'}"
|
|
|
+ ref="singleTable"
|
|
|
+ :data="tableData"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ class="tableSc">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="name"
|
|
|
+ label="监测点"
|
|
|
+ width="60">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'硫含量'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'黑度'">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="date"
|
|
|
+ label="监测时间">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- <div class="shipInCount">
|
|
|
- <img src="@/assets/picture/img_wgcb.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
- <div style="margin-top:5rem" @click="dialogVisibleShip = true">
|
|
|
- <div style="float:left">
|
|
|
- <div class="lcbBackground">
|
|
|
- <div style="margin-top:12rem">
|
|
|
- {{blackCount}}
|
|
|
- <br/>
|
|
|
- <span style="font-size:5rem">艘</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: center;color: #ffffff;margin-left:14rem;margin-top:43rem">硫含量超标</div>
|
|
|
- </div>
|
|
|
- <div style="float:left">
|
|
|
- <div class="hyzpBackground">
|
|
|
- <div style="margin-top:12rem">
|
|
|
- {{so2Count}}
|
|
|
- <br/>
|
|
|
- <span style="font-size:5rem">艘</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="text-align: center;color: #ffffff;margin-left:7rem;margin-top:43rem">黑烟抓拍</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <img src="@/assets/picture/img_sbtj.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
- <div class="totalContent" style="padding-right:15rem">
|
|
|
- <div style="float:left;margin-top:3rem">
|
|
|
- <i class="el-icon-pie-chart" style="font-size:9rem;float:left;margin-left:5rem"/>
|
|
|
- <span style="font-size:6rem;float:left;margin-left:5rem">总数</span>
|
|
|
- </div>
|
|
|
- <div style="float:right;font-size:9rem;margin-top:1rem">{{deviceTotal}}个</div>
|
|
|
- </div>
|
|
|
- <div style="padding-left:5rem;padding-top:1rem">
|
|
|
- <div style="color:white" @click="dialogVisible = true">
|
|
|
- <div style="float:left"><img src="@/assets/picture/location.png" style="margin-left:5rem"/></div>
|
|
|
- <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem" >安装位置</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="color:white" @click="dialogVisibleType = true">
|
|
|
- <div style="float:left"><img src="@/assets/picture/device_type.png" style="margin-left:5rem"/></div>
|
|
|
- <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem" >设备类型</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-tab-pane>
|
|
|
|
|
|
- <div class="shipInformation">
|
|
|
- <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
- <scroll></scroll>
|
|
|
- <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
- <scroll></scroll>
|
|
|
- </div>
|
|
|
+ <el-tab-pane label="其它监测数据" name="thrid">
|
|
|
+ <el-table
|
|
|
+ stripe='true'
|
|
|
+ :header-cell-style="{ background: '#e4eafc'}"
|
|
|
+ ref="singleTable"
|
|
|
+ :data="tableData"
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%"
|
|
|
+ class="tableSc">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="name"
|
|
|
+ label="监测点"
|
|
|
+ width="60">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'SO2浓度'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'NO2浓度'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'CO2浓度'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="'硫碳比'">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ property="date"
|
|
|
+ label="监测时间">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- <div class="equipmentContent">
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- @open="openChart">
|
|
|
- <div id="equipmentChart" style="width:260rem;height:100rem"></div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="equipmentTypeContent">
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :visible.sync="dialogVisibleType"
|
|
|
- @open="openTypeChart">
|
|
|
- <div id="equipmentTypeChart" style="width:160rem;height:100rem"></div>
|
|
|
- </el-dialog>
|
|
|
+ <div class="shipInCount">
|
|
|
+ <img src="@/assets/picture/img_wgcb.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
+ <div style="margin-top:5rem" @click="dialogVisibleShip = true">
|
|
|
+ <div style="float:left">
|
|
|
+ <div class="lcbBackground">
|
|
|
+ <div style="margin-top:12rem">
|
|
|
+ {{ blackCount }}
|
|
|
+ <br/>
|
|
|
+ <span style="font-size:5rem">艘</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;color: #ffffff;margin-left:14rem;margin-top:43rem">硫含量超标</div>
|
|
|
+ </div>
|
|
|
+ <div style="float:left">
|
|
|
+ <div class="hyzpBackground">
|
|
|
+ <div style="margin-top:12rem">
|
|
|
+ {{ so2Count }}
|
|
|
+ <br/>
|
|
|
+ <span style="font-size:5rem">艘</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;color: #ffffff;margin-left:7rem;margin-top:43rem">黑烟抓拍</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="@/assets/picture/img_sbtj.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
+ <div class="totalContent" style="padding-right:15rem">
|
|
|
+ <div style="float:left;margin-top:3rem">
|
|
|
+ <i class="el-icon-pie-chart" style="font-size:9rem;float:left;margin-left:5rem"/>
|
|
|
+ <span style="font-size:6rem;float:left;margin-left:5rem">总数</span>
|
|
|
+ </div>
|
|
|
+ <div style="float:right;font-size:9rem;margin-top:1rem">{{ deviceTotal }}个</div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left:5rem;padding-top:1rem">
|
|
|
+ <div style="color:white" @click="dialogVisible = true">
|
|
|
+ <div style="float:left"><img src="@/assets/picture/location.png" style="margin-left:5rem"/></div>
|
|
|
+ <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem">安装位置</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="wfcbContent">
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :visible.sync="dialogVisibleShip"
|
|
|
- @open="openShipChart">
|
|
|
- <div style="position:absolute;z-index:3001">
|
|
|
- <div style="float:left;color:#ffffff">开始</div>
|
|
|
- <div style="float:left;margin-left:3rem">
|
|
|
- <el-date-picker
|
|
|
- v-model="beginTime"
|
|
|
- type="month"
|
|
|
- placeholder="选择月份">
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- <div style="float:left;margin-left:3rem;color:#ffffff">结束</div>
|
|
|
- <div style="float:left;margin-left:3rem">
|
|
|
- <el-date-picker
|
|
|
- v-model="endTime"
|
|
|
- type="month"
|
|
|
- placeholder="选择月份">
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="shipChart" style="width:280rem;height:120rem;position:absolute;z-index:3000"></div>
|
|
|
- </el-dialog>
|
|
|
+ <div style="color:white" @click="dialogVisibleType = true">
|
|
|
+ <div style="float:left"><img src="@/assets/picture/device_type.png" style="margin-left:5rem"/></div>
|
|
|
+ <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem">设备类型</div>
|
|
|
</div>
|
|
|
-<!--
|
|
|
- <div class="azwzContent">
|
|
|
- <el-dialog
|
|
|
- title=""
|
|
|
- :visible.sync="dialogVisibleAzwz"
|
|
|
- :before-close="handleClose"
|
|
|
- @open="openShipChart">
|
|
|
- <div id="shipChart" style="width:220rem;height:100rem;"></div>
|
|
|
- </el-dialog>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="shipInformation">
|
|
|
+ <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
+ <scroll></scroll>
|
|
|
+ <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
|
|
|
+ <scroll></scroll>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="equipmentContent">
|
|
|
+ <el-dialog
|
|
|
+ title=""
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ @open="openChart">
|
|
|
+ <div id="equipmentChart" style="width:260rem;height:100rem"></div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="equipmentTypeContent">
|
|
|
+ <el-dialog
|
|
|
+ title=""
|
|
|
+ :visible.sync="dialogVisibleType"
|
|
|
+ @open="openTypeChart">
|
|
|
+ <div id="equipmentTypeChart" style="width:160rem;height:100rem"></div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="wfcbContent">
|
|
|
+ <el-dialog
|
|
|
+ title=""
|
|
|
+ :visible.sync="dialogVisibleShip"
|
|
|
+ @open="openShipChart">
|
|
|
+ <div style="position:absolute;z-index:3001">
|
|
|
+ <div style="float:left;color:#ffffff">开始</div>
|
|
|
+ <div style="float:left;margin-left:3rem">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="beginTime"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月份">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div style="float:left;margin-left:3rem;color:#ffffff">结束</div>
|
|
|
+ <div style="float:left;margin-left:3rem">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="endTime"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月份">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="shipChart" style="width:280rem;height:120rem;position:absolute;z-index:3000"></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
+ <!--
|
|
|
+ <div class="azwzContent">
|
|
|
+ <el-dialog
|
|
|
+ title=""
|
|
|
+ :visible.sync="dialogVisibleAzwz"
|
|
|
+ :before-close="handleClose"
|
|
|
+ @open="openShipChart">
|
|
|
+ <div id="shipChart" style="width:220rem;height:100rem;"></div>
|
|
|
+ </el-dialog>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
- <script>
|
|
|
- import scroll from "./scroll.vue"
|
|
|
- import { getStaticDevice,getDeviceType,getIllegalShipStatic } from "@/api/data/staticalData";
|
|
|
+<script>
|
|
|
+import scroll from "./scroll.vue"
|
|
|
+import {getDeviceType, getIllegalShipStatic, getStaticDevice} from "@/api/data/staticalData";
|
|
|
|
|
|
- export default {
|
|
|
- name: "homeTable",
|
|
|
- components: {
|
|
|
- scroll
|
|
|
+export default {
|
|
|
+ name: "homeTable",
|
|
|
+ components: {
|
|
|
+ scroll
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ total: 100,
|
|
|
+ shipShow: true,
|
|
|
+ activeName: 'first',
|
|
|
+ normalPer: 0.1,
|
|
|
+ so2Count: 1,
|
|
|
+ blackCount: 1,
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogVisibleAzwz: false,
|
|
|
+ dialogVisibleType: false,
|
|
|
+ normalCount: 1,
|
|
|
+ dialogVisibleShip: false,
|
|
|
+ beginTime: '',
|
|
|
+ endTime: '',
|
|
|
+ deviceTotal: 0,
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ roleName: undefined,
|
|
|
+ roleKey: undefined,
|
|
|
+ status: undefined,
|
|
|
+ mmsi: undefined,
|
|
|
+ radio: 1
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- total:100,
|
|
|
- shipShow:true,
|
|
|
- activeName:'first',
|
|
|
- normalPer:0.1,
|
|
|
- so2Count:1,
|
|
|
- blackCount:1,
|
|
|
- dialogVisible:false,
|
|
|
- dialogVisibleAzwz:false,
|
|
|
- dialogVisibleType:false,
|
|
|
- normalCount:1,
|
|
|
- dialogVisibleShip:false,
|
|
|
- beginTime:'',
|
|
|
- endTime:'',
|
|
|
- deviceTotal:0,
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- roleName: undefined,
|
|
|
- roleKey: undefined,
|
|
|
- status: undefined,
|
|
|
- mmsi:undefined,
|
|
|
- radio:1
|
|
|
- },
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02 10:00',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- value:0.19,
|
|
|
- count:1.9,
|
|
|
- }, {
|
|
|
- date: '2016-05-04 10:00',
|
|
|
- name: '王小虎',
|
|
|
- value:0.1,
|
|
|
- count:1.3,
|
|
|
- address: '上海市普陀区金沙江路 1517 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-01 10:00',
|
|
|
- name: '王小虎',
|
|
|
- value:0.2,
|
|
|
- count:2,
|
|
|
- address: '上海市普陀区金沙江路 1519 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-03 10:00',
|
|
|
- name: '王小虎',
|
|
|
- value:0.08,
|
|
|
- count:0.6,
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- },{
|
|
|
- date: '2016-05-03 10:00',
|
|
|
- name: '王小虎',
|
|
|
- value:0.03,
|
|
|
- count:0.2,
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- },{
|
|
|
- date: '2016-05-03 10:00',
|
|
|
- name: '王小虎',
|
|
|
- value:0.09,
|
|
|
- count:0.3,
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- }]
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄',
|
|
|
+ value: 0.19,
|
|
|
+ count: 1.9,
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ value: 0.1,
|
|
|
+ count: 1.3,
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ value: 0.2,
|
|
|
+ count: 2,
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ value: 0.08,
|
|
|
+ count: 0.6,
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ value: 0.03,
|
|
|
+ count: 0.2,
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03 10:00',
|
|
|
+ name: '王小虎',
|
|
|
+ value: 0.09,
|
|
|
+ count: 0.3,
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }, mounted() {
|
|
|
+ this.getStaticDevice();
|
|
|
+ this.getIllegalShipStatic();
|
|
|
+ // console.log(111111111111)
|
|
|
+ // this.getChart();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openShipChart() {
|
|
|
+ console.log(1111111);
|
|
|
+ const t = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ // 执行echarts画图方法
|
|
|
+ t.getShipChart();
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ openChart() {
|
|
|
+ const t = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ // 执行echarts画图方法
|
|
|
+ t.getStaticDevice();
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ openTypeChart() {
|
|
|
+ const t = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ // 执行echarts画图方法
|
|
|
+ t.getTypeData();
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ getStaticDevice() {
|
|
|
+ getStaticDevice().then(response => {
|
|
|
+ console.log(response);
|
|
|
+ let nameArry = [];
|
|
|
+ let dataArry = [];
|
|
|
+ this.deviceTotal = 0;
|
|
|
+ for (var key in response.data) {
|
|
|
+ this.deviceTotal += response.data[key]
|
|
|
+ nameArry.push(key);
|
|
|
+ dataArry.push(response.data[key]);
|
|
|
}
|
|
|
- },mounted(){
|
|
|
- this.getStaticDevice();
|
|
|
- this.getIllegalShipStatic();
|
|
|
- // console.log(111111111111)
|
|
|
- // this.getChart();
|
|
|
- },
|
|
|
- methods:{
|
|
|
- openShipChart(){
|
|
|
- console.log(1111111);
|
|
|
- const t =this;
|
|
|
- setTimeout(() => {
|
|
|
- // 执行echarts画图方法
|
|
|
- t.getShipChart();
|
|
|
- }, 0);
|
|
|
- },
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- },
|
|
|
- openChart(){
|
|
|
- const t =this;
|
|
|
- setTimeout(() => {
|
|
|
- // 执行echarts画图方法
|
|
|
- t.getStaticDevice();
|
|
|
- }, 0);
|
|
|
+ this.getChart(nameArry, dataArry);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getIllegalShipStatic() {
|
|
|
+ getIllegalShipStatic().then(data => {
|
|
|
+ this.blackCount = data.data.blackCount;
|
|
|
+ this.so2Count = data.data.so2Count;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getShipChart() {
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('shipChart'));
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
|
|
+ axisLabel: {
|
|
|
+ show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
|
|
|
+ interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
|
|
|
+
|
|
|
+ textStyle: { //textStyle里面写x轴下的字体的样式
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 13
|
|
|
+ }
|
|
|
},
|
|
|
- openTypeChart(){
|
|
|
- const t =this;
|
|
|
- setTimeout(() => {
|
|
|
- // 执行echarts画图方法
|
|
|
- t.getTypeData();
|
|
|
- }, 0);
|
|
|
+ axisLine: {
|
|
|
+ show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
|
|
|
+ lineStyle: { //lineStyle里面写x轴那一条线的样式
|
|
|
+ color: '#ffffff',
|
|
|
+ width: 2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
|
|
|
+ interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
|
|
|
+ textStyle: { //textStyle里面写x轴下的字体的样式
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 13
|
|
|
+ }
|
|
|
},
|
|
|
- getStaticDevice(){
|
|
|
- getStaticDevice().then(response => {
|
|
|
- console.log(response);
|
|
|
- let nameArry = [];
|
|
|
- let dataArry = [];
|
|
|
- this.deviceTotal = 0;
|
|
|
- for (var key in response.data) {
|
|
|
- this.deviceTotal += response.data[key]
|
|
|
- nameArry.push(key);
|
|
|
- dataArry.push(response.data[key]);
|
|
|
+ axisLine: {
|
|
|
+ show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
|
|
|
+ lineStyle: { //lineStyle里面写x轴那一条线的样式
|
|
|
+ color: '#ffffff',
|
|
|
+ width: 2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#61FAFB',
|
|
|
+ width: 5
|
|
|
+ }
|
|
|
}
|
|
|
- this.getChart(nameArry,dataArry);
|
|
|
- });
|
|
|
},
|
|
|
- getIllegalShipStatic(){
|
|
|
- getIllegalShipStatic().then(data =>{
|
|
|
- this.blackCount = data.data.blackCount;
|
|
|
- this.so2Count = data.data.so2Count;
|
|
|
- });
|
|
|
+ }, {
|
|
|
+ data: [700, 902, 501, 734, 1390, 1230, 1120],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FFA647',
|
|
|
+ width: 5
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- getShipChart(){
|
|
|
- var myChart = this.$echarts.init(document.getElementById('shipChart'));
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
|
|
- axisLabel:{
|
|
|
- show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
|
|
|
- interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
|
|
|
-
|
|
|
- textStyle:{ //textStyle里面写x轴下的字体的样式
|
|
|
- color:'#ffffff',
|
|
|
- fontSize:13
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine:{
|
|
|
- show:true, //这里的show用于设置是否显示x轴那一条线 默认为true
|
|
|
- lineStyle:{ //lineStyle里面写x轴那一条线的样式
|
|
|
- color:'#ffffff',
|
|
|
- width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLabel:{
|
|
|
- show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
|
|
|
- interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
|
|
|
- textStyle:{ //textStyle里面写x轴下的字体的样式
|
|
|
- color:'#ffffff',
|
|
|
- fontSize:13
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine:{
|
|
|
- show:true, //这里的show用于设置是否显示x轴那一条线 默认为true
|
|
|
- lineStyle:{ //lineStyle里面写x轴那一条线的样式
|
|
|
- color:'#ffffff',
|
|
|
- width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- itemStyle : {
|
|
|
- normal : {
|
|
|
- lineStyle:{
|
|
|
- color:'#61FAFB',
|
|
|
- width:5
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },{
|
|
|
- data: [700, 902, 501, 734, 1390, 1230, 1120],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- itemStyle : {
|
|
|
- normal : {
|
|
|
- lineStyle:{
|
|
|
- color:'#FFA647',
|
|
|
- width:5
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },{
|
|
|
- data: [1020, 932, 701, 434, 1230, 1430, 1620],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- itemStyle : {
|
|
|
- normal : {
|
|
|
- lineStyle:{
|
|
|
- color:'#FF2D3C',
|
|
|
- width:5
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ }, {
|
|
|
+ data: [1020, 932, 701, 434, 1230, 1430, 1620],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FF2D3C',
|
|
|
+ width: 5
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- getChart(nameArry,dataArry){
|
|
|
- // console.log(2222222222222222)
|
|
|
- // this.dialogVisible = true;
|
|
|
- console.log(document.getElementById('equipmentChart'));
|
|
|
- console.log(2222222222222222)
|
|
|
- var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
|
|
|
- console.log(myChart);
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- data:nameArry,
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'white'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- splitLine:{
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- color: ['#435886'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#435886'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '直接访问',
|
|
|
- type: 'bar',
|
|
|
- barWidth: '30%',
|
|
|
- data: dataArry,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new this.$echarts.graphic.LinearGradient(
|
|
|
- 0, 0, 0, 1,
|
|
|
- [
|
|
|
- {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
- {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
- ]
|
|
|
- )
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getChart(nameArry, dataArry) {
|
|
|
+ // console.log(2222222222222222)
|
|
|
+ // this.dialogVisible = true;
|
|
|
+ console.log(document.getElementById('equipmentChart'));
|
|
|
+ console.log(2222222222222222)
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
|
|
|
+ console.log(myChart);
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: nameArry,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'white'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- getTypeData(){
|
|
|
- getDeviceType().then(response=>{
|
|
|
- let nameArry = [];
|
|
|
- let dataArry = [];
|
|
|
- for (var key in response.data) {
|
|
|
- nameArry.push(key);
|
|
|
- dataArry.push(response.data[key]);
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#435886'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#435886'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '直接访问',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '30%',
|
|
|
+ data: dataArry,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
+ {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
- this.getTypeChart(nameArry,dataArry);
|
|
|
- });
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getTypeData() {
|
|
|
+ getDeviceType().then(response => {
|
|
|
+ let nameArry = [];
|
|
|
+ let dataArry = [];
|
|
|
+ for (var key in response.data) {
|
|
|
+ nameArry.push(key);
|
|
|
+ dataArry.push(response.data[key]);
|
|
|
+ }
|
|
|
+ this.getTypeChart(nameArry, dataArry);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTypeChart(nameArry, dataArry) {
|
|
|
+ console.log(nameArry);
|
|
|
+ // console.log(2222222222222222)
|
|
|
+ // this.dialogVisible = true;
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('equipmentTypeChart'));
|
|
|
+ console.log(myChart);
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: nameArry,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'white'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- getTypeChart(nameArry,dataArry){
|
|
|
- console.log(nameArry);
|
|
|
- // console.log(2222222222222222)
|
|
|
- // this.dialogVisible = true;
|
|
|
- var myChart = this.$echarts.init(document.getElementById('equipmentTypeChart'));
|
|
|
- console.log(myChart);
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- data:nameArry,
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'white'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- splitLine:{
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- color: ['#435886'],
|
|
|
- width: 1,
|
|
|
- type: 'solid'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#435886'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'white' //x轴data 的颜色
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '直接访问',
|
|
|
- type: 'bar',
|
|
|
- barWidth: '30%',
|
|
|
- data: dataArry,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new this.$echarts.graphic.LinearGradient(
|
|
|
- 0, 0, 0, 1,
|
|
|
- [
|
|
|
- {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
- {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
- ]
|
|
|
- )
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#435886'],
|
|
|
+ width: 1,
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#435886'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'white' //x轴data 的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '直接访问',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '30%',
|
|
|
+ data: dataArry,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 1, color: '#2275E4'}, //柱图渐变色
|
|
|
+ {offset: 0, color: '#56CCF2'}, //柱图渐变色
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
}
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped>
|
|
|
- .shipDiv{
|
|
|
- position: absolute;
|
|
|
- top: 250rem;
|
|
|
- left: 140rem;
|
|
|
- width: 200rem;
|
|
|
- height: 130rem;
|
|
|
- background-color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .shipTitle{
|
|
|
- padding-top:4rem;
|
|
|
- padding-left:10rem;
|
|
|
- padding-right:10rem;
|
|
|
- width:100%;
|
|
|
- height:20rem;
|
|
|
- background-color:#0d25a5;
|
|
|
- color:white;
|
|
|
- font-size: 7rem
|
|
|
- }
|
|
|
-
|
|
|
- .contentFont{
|
|
|
- font-size: 5rem;
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
- .shipInformation{
|
|
|
- background: url("./assets/bg_information.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:120rem;
|
|
|
- height:160rem;
|
|
|
- position: absolute;
|
|
|
- top:225rem;
|
|
|
- right:30rem;
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
+.shipDiv {
|
|
|
+ position: absolute;
|
|
|
+ top: 250rem;
|
|
|
+ left: 140rem;
|
|
|
+ width: 200rem;
|
|
|
+ height: 130rem;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
|
|
|
- .shipInCount{
|
|
|
- background: url("./assets/bg_count.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:120rem;
|
|
|
- height:160rem;
|
|
|
- position: absolute;
|
|
|
- top:55rem;
|
|
|
- right:30rem;
|
|
|
- }
|
|
|
+.shipTitle {
|
|
|
+ padding-top: 4rem;
|
|
|
+ padding-left: 10rem;
|
|
|
+ padding-right: 10rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 20rem;
|
|
|
+ background-color: #0d25a5;
|
|
|
+ color: white;
|
|
|
+ font-size: 7rem
|
|
|
+}
|
|
|
|
|
|
- .lcbBackground{
|
|
|
- background: url("./assets/img_lcb.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:40rem;
|
|
|
- height:40rem;
|
|
|
- float:left;
|
|
|
- margin-left:15rem;
|
|
|
- text-align: center;
|
|
|
- color:#45AAF0;
|
|
|
- font-size: 7rem;
|
|
|
- font-weight: Bold;
|
|
|
- }
|
|
|
+.contentFont {
|
|
|
+ font-size: 5rem;
|
|
|
+}
|
|
|
|
|
|
- .hyzpBackground{
|
|
|
- background: url("./assets/img_hyzp.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:40rem;
|
|
|
- height:40rem;
|
|
|
- float:left;
|
|
|
- margin-left:8rem;
|
|
|
- text-align: center;
|
|
|
- color:#2EF9B3;
|
|
|
- font-size: 7rem;
|
|
|
- font-weight: Bold;
|
|
|
- }
|
|
|
+.shipInformation {
|
|
|
+ background: url("./assets/bg_information.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 120rem;
|
|
|
+ height: 160rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 225rem;
|
|
|
+ right: 30rem;
|
|
|
+}
|
|
|
|
|
|
- .totalContent{
|
|
|
- background: url("./assets/img_total.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- width:100rem;
|
|
|
- height:15rem;
|
|
|
- margin-left:10rem;
|
|
|
- margin-top:5rem;
|
|
|
- color:white;
|
|
|
- }
|
|
|
+.shipInCount {
|
|
|
+ background: url("./assets/bg_count.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 120rem;
|
|
|
+ height: 160rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 55rem;
|
|
|
+ right: 30rem;
|
|
|
+}
|
|
|
|
|
|
- .shipContent >>> .el-tabs__item{
|
|
|
- font-weight:bold;
|
|
|
- color:#A8A8A8
|
|
|
- }
|
|
|
-
|
|
|
- .shipContent >>> .el-tabs__item.is-active{
|
|
|
- color:#0d25a5
|
|
|
- }
|
|
|
-
|
|
|
- .shipContent >>> .el-tabs__active-bar{
|
|
|
- margin-left:10rem
|
|
|
- }
|
|
|
-
|
|
|
- .shipContent >>> .el-tabs__nav{
|
|
|
- padding-left:10rem
|
|
|
- }
|
|
|
-
|
|
|
- .shipContent >>>.el-tabs__active-bar{
|
|
|
- background-color:#0d25a5
|
|
|
- }
|
|
|
-
|
|
|
- .tableSc >>> tr{
|
|
|
- padding:0;
|
|
|
- height:3rem;
|
|
|
- line-height: 3rem;
|
|
|
- font-size: 5rem;
|
|
|
- }
|
|
|
+.lcbBackground {
|
|
|
+ background: url("./assets/img_lcb.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 40rem;
|
|
|
+ height: 40rem;
|
|
|
+ float: left;
|
|
|
+ margin-left: 15rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #45AAF0;
|
|
|
+ font-size: 7rem;
|
|
|
+ font-weight: Bold;
|
|
|
+}
|
|
|
|
|
|
- .tableSc >>> td{
|
|
|
- padding:0;
|
|
|
- height:3rem;
|
|
|
- line-height: 3rem
|
|
|
- }
|
|
|
+.hyzpBackground {
|
|
|
+ background: url("./assets/img_hyzp.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 40rem;
|
|
|
+ height: 40rem;
|
|
|
+ float: left;
|
|
|
+ margin-left: 8rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #2EF9B3;
|
|
|
+ font-size: 7rem;
|
|
|
+ font-weight: Bold;
|
|
|
+}
|
|
|
|
|
|
- .azwzContent >>> .el-dialog{
|
|
|
- background: url("./assets/pop_azwz.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height:150rem;
|
|
|
- width:280rem;
|
|
|
- border:none;
|
|
|
- top:100rem;
|
|
|
- }
|
|
|
+.totalContent {
|
|
|
+ background: url("./assets/img_total.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100rem;
|
|
|
+ height: 15rem;
|
|
|
+ margin-left: 10rem;
|
|
|
+ margin-top: 5rem;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
|
|
|
- .wfcbContent >>> .el-dialog{
|
|
|
- background: url("./assets/pop_wgcbtj.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height:150rem;
|
|
|
- width:280rem;
|
|
|
- border:none;
|
|
|
- top:100rem;
|
|
|
- }
|
|
|
+.shipContent >>> .el-tabs__item {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #A8A8A8
|
|
|
+}
|
|
|
|
|
|
- .equipmentContent >>> .el-dialog{
|
|
|
- background: url("./assets/pop_azwz.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height:150rem;
|
|
|
- width:280rem;
|
|
|
- border:none;
|
|
|
- top:100rem;
|
|
|
- }
|
|
|
+.shipContent >>> .el-tabs__item.is-active {
|
|
|
+ color: #0d25a5
|
|
|
+}
|
|
|
|
|
|
- .equipmentTypeContent >>> .el-dialog{
|
|
|
- background: url("./assets/pop_sblx.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height:150rem;
|
|
|
- width:200rem;
|
|
|
- border:none;
|
|
|
- top:100rem;
|
|
|
- }
|
|
|
+.shipContent >>> .el-tabs__active-bar {
|
|
|
+ margin-left: 10rem
|
|
|
+}
|
|
|
|
|
|
- .wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
|
|
|
- width:50rem;
|
|
|
- }
|
|
|
- /* .dialogContent >>> .el-input--medium .el-input__inner{
|
|
|
- height:10rem;
|
|
|
- text-align: center
|
|
|
- } */
|
|
|
-
|
|
|
-
|
|
|
- </style>
|
|
|
+.shipContent >>> .el-tabs__nav {
|
|
|
+ padding-left: 10rem
|
|
|
+}
|
|
|
+
|
|
|
+.shipContent >>> .el-tabs__active-bar {
|
|
|
+ background-color: #0d25a5
|
|
|
+}
|
|
|
+
|
|
|
+.tableSc >>> tr {
|
|
|
+ padding: 0;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ font-size: 5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.tableSc >>> td {
|
|
|
+ padding: 0;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem
|
|
|
+}
|
|
|
+
|
|
|
+.azwzContent >>> .el-dialog {
|
|
|
+ background: url("./assets/pop_azwz.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 150rem;
|
|
|
+ width: 280rem;
|
|
|
+ border: none;
|
|
|
+ top: 100rem;
|
|
|
+}
|
|
|
+
|
|
|
+.wfcbContent >>> .el-dialog {
|
|
|
+ background: url("./assets/pop_wgcbtj.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 150rem;
|
|
|
+ width: 280rem;
|
|
|
+ border: none;
|
|
|
+ top: 100rem;
|
|
|
+}
|
|
|
+
|
|
|
+.equipmentContent >>> .el-dialog {
|
|
|
+ background: url("./assets/pop_azwz.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 150rem;
|
|
|
+ width: 280rem;
|
|
|
+ border: none;
|
|
|
+ top: 100rem;
|
|
|
+}
|
|
|
+
|
|
|
+.equipmentTypeContent >>> .el-dialog {
|
|
|
+ background: url("./assets/pop_sblx.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 150rem;
|
|
|
+ width: 200rem;
|
|
|
+ border: none;
|
|
|
+ top: 100rem;
|
|
|
+}
|
|
|
+
|
|
|
+.wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
|
|
|
+ width: 50rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* .dialogContent >>> .el-input--medium .el-input__inner{
|
|
|
+ height:10rem;
|
|
|
+ text-align: center
|
|
|
+ } */
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
