288 lines
7.1 KiB
Vue
288 lines
7.1 KiB
Vue
<!-- -->
|
||
<template>
|
||
|
||
|
||
<div class="capability-cloud">
|
||
|
||
<div class="header">
|
||
<span class="title" @click="goHome">城市云脑通用能力服务平台</span>
|
||
</div>
|
||
<div class="header1">
|
||
<div style=" color:#bed1df; font-size: 26px">累计节省财政资金</div>
|
||
<div class="area-right">
|
||
<!-- <div class="mianJi">累计节省财政资金</div> -->
|
||
<template v-for="(item, index) in saveMonmy">
|
||
<p v-if="item == '.'" :key="index">
|
||
{{ item }}
|
||
</p>
|
||
<span v-else >{{ item }}</span>
|
||
</template>
|
||
<div class="mianJi">万元</div>
|
||
</div>
|
||
<div style=" color: #bed1df; font-size: 16px">注：资源参考价格由部门提供或参考市场价格设定</div>
|
||
|
||
</div>
|
||
<!--左侧-->
|
||
<div class="reservoir-left">
|
||
<!-- 左侧内容 -->
|
||
<reservoir-left />
|
||
</div>
|
||
<!--右侧-->
|
||
<div class="reservoir-right">
|
||
<reservoir-right />
|
||
</div>
|
||
<!--中间地图-->
|
||
<div class="reservoir-map">
|
||
<reservoir-thumbnail
|
||
@changeThumbnailMap="changeThumbnailMap"
|
||
@jumpIntoMap="jumpIntoMap"
|
||
/>
|
||
</div>
|
||
<!--下方-->
|
||
<div class="bottom">
|
||
<reservoir-bottom />
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getApplyPriceCount
|
||
} from '@/api/assertReport'
|
||
import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
|
||
import ReservoirLeft from "./components/ReservoirLeft";
|
||
import ReservoirRight from "./components/ReservoirRight";
|
||
import ReservoirBottom from "./components/ReservoirBottom";
|
||
import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用
|
||
components: {
|
||
ReservoirThumbnail,
|
||
ReservoirLeft,
|
||
ReservoirRight,
|
||
ReservoirBottom
|
||
|
||
},
|
||
data() {
|
||
//这里存放数据
|
||
return {
|
||
saveMonmy:[],
|
||
model: "common",
|
||
dialogTitle: "周边视频",
|
||
videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
|
||
riverCourseHistoryDialogVisible: false, //河道历史弹窗
|
||
riverDetailInfo: {}, //河道具体信息用于历史弹窗显示数据
|
||
dialogType: "add",
|
||
dialogData: {},
|
||
dangerReportDialogVisible: false,
|
||
positionInfo: null,
|
||
reservoirDialogVisible: false, //新增修改积水点弹窗显示标志位
|
||
districtOptions: [], //区划数组
|
||
isThumbnail:true, //是否为地图缩略图
|
||
tabindex:0, //3d地图选中的tab。
|
||
listType:"",//水库列表的类型，普通列表 “”，预警列表 warnig
|
||
basicInfo: {}, //水库详情信息
|
||
type: '',
|
||
callSource:"indexPage",
|
||
};
|
||
},
|
||
//监听属性 类似于data概念
|
||
computed: {},
|
||
//监控data中的数据变化
|
||
watch: {},
|
||
//方法集合
|
||
methods: {
|
||
getSaveMoney(){
|
||
getApplyPriceCount().then((res) => {
|
||
|
||
this.saveMonmy=NumbersConvertedToArrays(res.data.data)
|
||
})
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.getSaveMoney()
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style lang="less">
|
||
@font-face {
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
|
||
}
|
||
@font-face {
|
||
font-family: 'DIN-Bold';
|
||
src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
|
||
}
|
||
@font-face {
|
||
font-family: 'ZhiheiJ-W5.ttf';
|
||
src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
|
||
}
|
||
.capability-cloud {
|
||
font-family: SourceHanSansCN-Regular;
|
||
.title {
|
||
font-family: ZhiheiJ-W5;
|
||
background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
|
||
font-weight: 600;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.num {
|
||
font-family: DIN-Bold;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang='less' scoped>
|
||
// 此处去掉scoped为修改date-picker背景色，所以业务样式都应放在reservoir层级中，避免影响
|
||
//@import url(); 引入公共css类
|
||
.module-header-container {
|
||
position: absolute;
|
||
z-index: 1000;
|
||
top: 0px;
|
||
width: 100%;
|
||
pointer-events: none;
|
||
}
|
||
.capability-cloud {
|
||
height: 10.8rem;
|
||
background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
.area-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-items: flex-end;
|
||
padding-right: 20px;
|
||
color: #bed1df;
|
||
margin-left: 100px;
|
||
span {
|
||
width: 28px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background: url("~@/assets/capabilityCloud/num_bg.png")
|
||
100% 100%;
|
||
background-size: 100%;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
margin-right: 3px;
|
||
color: #fff;
|
||
font-family: DinPro-Bold;
|
||
}
|
||
.mianJi {
|
||
margin-top: 6px;;
|
||
margin-right: 3px;
|
||
font-size: 22px;
|
||
float:right;
|
||
}
|
||
p {
|
||
height: 34px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-items: center;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
& > .header {
|
||
height: 1.04rem;
|
||
text-align: center;
|
||
background: url('~@/assets/capabilityCloud/header.png') no-repeat;
|
||
font-size: 0.46rem;
|
||
}
|
||
.bottom{
|
||
bottom: 12px;
|
||
position: absolute;
|
||
left: 545px;
|
||
width: 732px;
|
||
align-items: center;
|
||
z-index: 1004;
|
||
text-align: center;
|
||
|
||
height: 1.8rem;
|
||
|
||
}
|
||
.header1 {
|
||
top: 78px;
|
||
position: absolute;
|
||
left: 795px;
|
||
align-items: center;
|
||
z-index: 1004;
|
||
text-align: center;
|
||
}
|
||
|
||
//position: relative;
|
||
.reservoir-left {
|
||
position: absolute;
|
||
left: 0.1rem;
|
||
z-index: 1000;
|
||
top: 0.8rem;
|
||
height: calc(100% - 0.8rem);
|
||
}
|
||
.reservoir-right {
|
||
position: absolute;
|
||
z-index: 1001;
|
||
right: 0.1rem;
|
||
top: 0.8rem;
|
||
height: calc(100% - 0.8rem);
|
||
}
|
||
.reservoir-map {
|
||
position: absolute;
|
||
width: 100%;
|
||
// height: 100%;
|
||
// bottom:2rem;
|
||
}
|
||
}
|
||
// 日期时间组件
|
||
.phone-date-picker {
|
||
color: #fff;
|
||
//border: 1px solid #e4e7ed;
|
||
border: 1px solid #008fbb;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
//background: #000;
|
||
background: #123d68;
|
||
//background:rgba(0, 0, 0, 0);
|
||
line-height: 30px;
|
||
margin: 5px 0;
|
||
.el-date-table td.disabled div {
|
||
background: #305156 !important;
|
||
}
|
||
.el-picker-panel__footer {
|
||
//background-color: rgba(0, 0, 0, 0.8);
|
||
background: #123d68;
|
||
color: #fff;
|
||
.el-picker-panel__link-btn:first-of-type {
|
||
display: none;
|
||
}
|
||
}
|
||
.el-date-table td.in-range div {
|
||
background: #009ab3;
|
||
}
|
||
.el-input__inner {
|
||
//background-color: rgba(0, 0, 0, 0.8);
|
||
background: #123d68;
|
||
color: #fff;
|
||
}
|
||
.el-date-picker__header > button,
|
||
span {
|
||
color: #fff;
|
||
}
|
||
.el-picker-panel__content > .el-date-table > tbody > tr > th {
|
||
color: #fff;
|
||
}
|
||
.el-button.is-plain:hover,
|
||
.el-button.is-plain:focus {
|
||
background: #009ab3;
|
||
}
|
||
.el-button--default {
|
||
border-radius: 0;
|
||
background: #009ab3;
|
||
//border: 1px solid #dcdfe6;
|
||
border: 1px solid #008fbb;
|
||
border-color: #009ab3;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|