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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script lang="ts"> |
||||
export default { |
import { onMounted, reactive, toRefs } from 'vue'; |
||||
name: "app", |
import moment from "moment"; |
||||
setup() { |
|
||||
return { |
export default { |
||||
|
name: 'DecisionSupport', |
||||
|
setup() { |
||||
|
let options = reactive({ |
||||
|
currentIndicator: '通风廊道规划建议', |
||||
|
srcList: ['/images/picture.png'] |
||||
|
}) |
||||
|
|
||||
} |
const onIndicatorClick = (indicator) => { |
||||
} |
options.currentIndicator = indicator; |
||||
} |
} |
||||
</script> |
|
||||
|
|
||||
|
return { |
||||
|
...toRefs(options), |
||||
|
onIndicatorClick |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
<style lang="less" scoped> |
<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> |
</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; |
||||
|
}); |
||||
|
} |
||||