Skip to content

W
web-project
Commit e3a8b498 authored by 朱超's avatar 朱超
Browse files
Options

能耗排名页面

parent 4d53368e
Show whitespace changes
Inline Side-by-side
Showing with 1280 additions and 16 deletions
src/views/HandlerPage/EnergyConsumptionPage.vue
View file @ e3a8b498
<template>
<img src="../../assets/imgs/analysis.png" :style="{width: curwidth +'px', height: curheight+'px'}"/>
<div class="contentBlock" id="contentBlock">
<el-card class="card-contianer">
<el-form
:inline="true"
:model="enertyInfo"
class="demo-form-inline"
:rules="rules"
ref="formRef"
>
<el-form-item>
<el-switch
v-model="switchV"
active-text="历史排行"
inactive-text="实时排行"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
min-width: 130px;
"
@change="changeFun"
/>
</el-form-item>
<el-form-item label="开始时间：" prop="startTime">
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
style="width: 180px"
v-model="enertyInfo.startTime"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：" prop="endTime">
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间"
style="width: 180px"
v-model="enertyInfo.endTime"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="选择供热站">
<el-select
v-model="enertyInfo.energyType"
placeholder="请选择"
style="min-width: 130px"
>
<el-option label="东部供热站" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-checkbox-group>
<el-checkbox value="1" name="type"> 公建 </el-checkbox>
<el-checkbox value="2" name="type"> 民建 </el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px" @click="sendClick"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px">导出表格</el-button>
</el-form-item>
</el-form>
<div class="titInfoBlock">
<table class="titBlock" style="width: 98%; margin: 0; padding: 0">
<tr>
<td><div class="leftLine">分布概况</div></td>
<td></td>
<td><div class="leftLine">能源概况</div></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="img1">
<div class="bg">
<img
src="/imgs/energyConsumptionPage/tit_bg1.png"
width="100%"
/>
</div>
<div class="tit">民建换热站</div>
<div class="left">
<div><span>150</span>座</div>
<div class="sub">机组数量</div>
</div>
<div class="right">
<div><span>2000</span>万平米</div>
<div class="sub">供热面积</div>
</div>
</td>
<td class="img1">
<div class="bg">
<img
src="/imgs/energyConsumptionPage/tit_bg2.png"
width="100%"
/>
</div>
<div class="tit">公建换热站</div>
<div class="left">
<div><span>150</span>座</div>
<div class="sub">机组数量</div>
</div>
<div class="right">
<div><span>2000</span>万平米</div>
<div class="sub">供热面积</div>
</div>
</td>
<td class="img2">
<div class="bg">
<img
src="/imgs/energyConsumptionPage/tit_bg3.png"
width="100%"
/>
</div>
<div class="tit">热量消耗</div>
<div class="left">
<div><span>20000.11</span>GJ</div>
<div class="sub">热总耗</div>
</div>
<div class="right">
<div><span>29.78</span>GJ</div>
<div class="sub">热单耗</div>
</div>
</td>
<td class="img2">
<div>
<img
src="/imgs/energyConsumptionPage/tit_bg4.png"
width="100%"
/>
</div>
<div class="tit">电量消耗</div>
<div class="left">
<div><span>20000.11</span>GJ</div>
<div class="sub">电总耗</div>
</div>
<div class="right">
<div><span>29.78</span>GJ</div>
<div class="sub">电单耗</div>
</div>
</td>
<td class="img2">
<div>
<img
src="/imgs/energyConsumptionPage/tit_bg5.png"
width="100%"
/>
</div>
<div class="tit">水量消耗</div>
<div class="left">
<div><span>20000.11</span>GJ</div>
<div class="sub">水总耗</div>
</div>
<div class="right">
<div><span>29.78</span>GJ</div>
<div class="sub">水单耗</div>
</div>
</td>
</tr>
</table>
</div>
</el-card>
<div class="mainBlock">
<div class="mainBlockInn">
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
<el-card class="cardList" body-style="padding:15px;">
<div style="position: relative">
<img src="/imgs/energyConsumptionPage/title_bg.png" />
<div class="cardListTit">热单耗排行</div>
</div>
<div>
<table class="cardTable" style="width: 100%">
<tr>
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
</tr>
<tr>
<td>1</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>2</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>3</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>4</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>5</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>6</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>7</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>8</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>9</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
<tr>
<td>10</td>
<td>行政区</td>
<td>中国联通</td>
<td>56.22</td>
</tr>
</table>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script setup>
import { ref,onMounted,onUnmounted} from 'vue'
const curwidth=ref(1700);
import { ref, reactive, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus";
const curwidth = ref(1700);
const curheight = ref(1000);
const switchV = ref(true);
const enertyInfo = reactive({
startTime: null,
endTime: null,
});
const rules = {
transferId: [{ required: true, message: "请选择换热机组", trigger: "blur" }],
startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
};
onMounted(() => {
setContentHeight();
window.addEventListener('resize', setContentHeight);
})
onUnmounted(()=>{
window.removeEventListener('resize', setContentHeight);
})
// setContentHeight();
// window.addEventListener("resize", setContentHeight);
});
onUnmounted(() => {
// window.removeEventListener("resize", setContentHeight);
});
function setContentHeight(){
function setContentHeight() {
curheight.value = window.innerHeight - 160;
curwidth.value = window.innerWidth - 260;
}
</script>
<style lang="less" scoped>
table,
th,
td {
margin: 0;
padding: 0;
}
.contentBlock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
}
.el-form--inline .el-form-item {
margin-right: 10px;
}
.el-form-item {
margin: 5px 5px 10px !important;
}
.echartsLayer {
width: 100%;
margin: 2% auto 0;
}
.titBlock div.leftLine {
border-left: #3e79ed solid 4px;
padding: 0 0 0 10px;
letter-spacing: 2px;
}
.titBlock td img {
min-height: 126px;
}
.titBlock td.img1 {
position: relative;
min-width: 300px;
width: 21%;
padding-right: 1%;
}
.titBlock td.img2 {
position: relative;
min-width: 233px;
width: 16%;
padding-right: 1.4%;
}
.mainBlock {
width: 100%;
height: 66%;
overflow: auto;
}
.mainBlockInn {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-bottom: 3vh;
}
.mainBlockInn .cardList {
width: 24%;
margin: 1% 0 0 0;
padding: 0;
}
.titBlock td.img1 .tit {
position: absolute;
top: 10%;
right: 20%;
text-align: center;
letter-spacing: 5px;
color: #ffffff;
font-size: 150%;
font-weight: bolder;
}
.titBlock td.img1 .left span,
.titBlock td.img1 .right span {
font-size: 160%;
letter-spacing: 2px;
font-weight: bolder;
}
.titBlock td.img1 .sub {
letter-spacing: 5px;
font-weight: bolder;
}
.titBlock td.img1 .left {
position: absolute;
bottom: 20%;
left: 20%;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: center;
}
.titBlock td.img1 .right {
position: absolute;
bottom: 20%;
right: 12%;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: center;
}
.titBlock td.img2 .tit {
position: absolute;
top: 8%;
right: 12%;
text-align: center;
letter-spacing: 5px;
color: #ffffff;
font-size: 150%;
font-weight: bolder;
}
.titBlock td.img2 .left span,
.titBlock td.img2 .right span {
font-size: 140%;
font-weight: bolder;
}
.titBlock td.img2 .sub {
letter-spacing: 5px;
font-weight: bolder;
}
.titBlock td.img2 .left {
position: absolute;
bottom: 20%;
left: 6%;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: center;
}
.titBlock td.img2 .right {
position: absolute;
bottom: 20%;
right: 13%;
color: #ffffff;
font-size: 90%;
font-weight: bolder;
text-align: center;
}
.cardListTit {
position: absolute;
top: 5px;
left: 35px;
color: #ffffff;
letter-spacing: 3px;
font-weight: bolder;
}
.cardTable {
border: none;
border-spacing: 0;
font-size: 90%;
background-color: #d8f6fe;
border-radius: 10px;
}
.cardTable th {
background-color: #56dcff;
text-align: center;
padding: 3px;
color: #ffffff;
}
.cardTable td {
text-align: center;
padding: 3px;
color: #666666;
}
// @media (max-width: 2560px) {
// body {
// font-size: 15px;
// }
// }
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment