hehongxing
3 years ago
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 424 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 371 KiB |
|
After Width: | Height: | Size: 359 KiB |
@ -1,16 +1,154 @@ |
|||
<template> |
|||
<div class="tabs"></div> |
|||
<div class="main"> |
|||
<div class="menu panel"> |
|||
<div class="menu-item"> |
|||
<h2 class="tip">指标选择</h2> |
|||
<el-row :gutter="12"> |
|||
<el-col :span="24"><span @click="onIndicatorClick('通风廊道规划建议')" :class="{'active': currentIndicator === '通风廊道规划建议'}">通风廊道规划建议</span></el-col> |
|||
<el-col :span="24"><span @click="onIndicatorClick('高楼污染指数')" :class="{'active': currentIndicator === '高楼污染指数'}">高楼污染指数</span></el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div class="container panel"> |
|||
<span class="save-btn"><img src="/images/save.png" /></span> |
|||
|
|||
<div class="picture-view advice-picture-view" v-if="currentIndicator === '通风廊道规划建议'"> |
|||
<div class="picture"> |
|||
<h2 class="title">南京市潜在通风廊道</h2> |
|||
<el-image |
|||
src="/images/decision-support/通风廊道规划建议/通风廊道1.png" |
|||
:preview-src-list="srcList" |
|||
:initial-index="1" |
|||
fit="contain" |
|||
> |
|||
</el-image> |
|||
</div> |
|||
<div class="picture"> |
|||
<h2 class="title">南京市通风廊道规划示意图</h2> |
|||
<el-image |
|||
src="/images/decision-support/通风廊道规划建议/通风廊道2.png" |
|||
:preview-src-list="srcList" |
|||
:initial-index="1" |
|||
fit="contain" |
|||
class="border" |
|||
> |
|||
</el-image> |
|||
</div> |
|||
</div> |
|||
<div class="picture-view indicator-picture-view" v-if="currentIndicator === '高楼污染指数'"> |
|||
<h2 class="title">南京市高楼污染指数-PM2.5</h2> |
|||
<div class="picture-block"> |
|||
<div class="picture"> |
|||
<el-image |
|||
src="/images/decision-support/高楼污染指数/高楼污染指数1.png" |
|||
:preview-src-list="srcList" |
|||
:initial-index="1" |
|||
fit="contain" |
|||
> |
|||
</el-image> |
|||
</div> |
|||
<div class="picture"> |
|||
<el-image |
|||
src="/images/decision-support/高楼污染指数/高楼污染指数2.png" |
|||
:preview-src-list="srcList" |
|||
:initial-index="1" |
|||
fit="contain" |
|||
> |
|||
</el-image> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "app", |
|||
setup() { |
|||
return { |
|||
<script lang="ts"> |
|||
import { onMounted, reactive, toRefs } from 'vue'; |
|||
import moment from "moment"; |
|||
|
|||
export default { |
|||
name: 'DecisionSupport', |
|||
setup() { |
|||
let options = reactive({ |
|||
currentIndicator: '通风廊道规划建议', |
|||
srcList: ['/images/picture.png'] |
|||
}) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
const onIndicatorClick = (indicator) => { |
|||
options.currentIndicator = indicator; |
|||
} |
|||
|
|||
return { |
|||
...toRefs(options), |
|||
onIndicatorClick |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.main { |
|||
.container { |
|||
.save-btn { |
|||
top: 0.6rem; |
|||
right: 0.6rem; |
|||
} |
|||
.advice-picture-view { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
.picture { |
|||
width: 7.98rem; |
|||
height: auto; |
|||
display: block; |
|||
.title { |
|||
padding: 0; |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
.el-image { |
|||
width: 99%; |
|||
height: auto; |
|||
margin: 0 auto; |
|||
&.border { |
|||
border: 1px solid #666666; |
|||
} |
|||
} |
|||
|
|||
&:last-of-type { |
|||
width: 5.34rem; |
|||
} |
|||
} |
|||
} |
|||
.indicator-picture-view { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.title { |
|||
padding: 0; |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
.picture-block { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.picture { |
|||
width: 6.5rem; |
|||
height: auto; |
|||
display: block; |
|||
.el-image { |
|||
width:100%; |
|||
height: auto; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
&:last-of-type { |
|||
width: 6.44rem; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,13 @@ |
|||
import { Moment } from "moment"; |
|||
|
|||
export class Config { |
|||
public static parentUrl: string = "http://112.124.40.88:8890/product/picture"; |
|||
} |
|||
|
|||
export class MicrowaveRadiationConfig { |
|||
private static url: string = Config.parentUrl + "/weibo"; |
|||
|
|||
public static getUrl(station: string, type: string, time: Moment): string { |
|||
return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png"); |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
export function format(...args: any[]) { |
|||
return args[0].replace(/{(\d+)}/g, function (match: any, number: any) { |
|||
let index = parseInt(number) + 1; |
|||
return typeof args[index] !== 'undefined' ? args[index] : match; |
|||
}); |
|||
} |
|||