Browse Source

封装数据中台api请求

V1.0
dai 3 years ago
parent
commit
49abe54ee0
  1. 2
      .env.development
  2. 1
      .env.production
  3. 1
      .env.production.sit
  4. 1
      .env.shibei_production
  5. BIN
      src/assets/images/shuju/main/back-on.png
  6. BIN
      src/assets/images/shuju/main/back.png
  7. BIN
      src/assets/images/shuju/renfang/index/per/dy.png
  8. BIN
      src/assets/images/shuju/renfang/index/per/lnr.png
  9. BIN
      src/assets/images/shuju/renfang/index/per/qsn.png
  10. BIN
      src/assets/images/shuju/renfang/index/per/syry.png
  11. BIN
      src/assets/images/shuju/renfang/index/per/ygxl.png
  12. BIN
      src/assets/images/shuju/renfang/index/per/zyz.png
  13. 21
      src/assets/scss/dataBoard/renfang/index.scss
  14. 38
      src/assets/scss/dataBoardMain.scss
  15. 114
      src/js/dai/request-bipass.js
  16. 898
      src/views/dataBoard/renfang/index.vue
  17. 604
      src/views/dataBoardMain/main-navbar.vue

2
.env.development

@ -9,6 +9,8 @@ VUE_APP_API_SERVER = http://192.168.1.144/api
# VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn:41080/api # VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn:41080/api
# VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api # VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api
VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route
# VUE_APP_NODE_ENV=dev_sdtdt # VUE_APP_NODE_ENV=dev_sdtdt
VUE_APP_NODE_ENV=dev VUE_APP_NODE_ENV=dev
#项目根路径 #项目根路径

1
.env.production

@ -1,4 +1,5 @@
NODE_ENV=production NODE_ENV=production
VUE_APP_API_SERVER = https://epmet-cloud.elinkservice.cn/api VUE_APP_API_SERVER = https://epmet-cloud.elinkservice.cn/api
VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route
VUE_APP_NODE_ENV=prod VUE_APP_NODE_ENV=prod
VUE_APP_PUBLIC_PATH=epmet-oper VUE_APP_PUBLIC_PATH=epmet-oper

1
.env.production.sit

@ -2,5 +2,6 @@ NODE_ENV=production
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api # VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api
# VUE_APP_API_SERVER = http://192.168.1.140/api # VUE_APP_API_SERVER = http://192.168.1.140/api
VUE_APP_API_SERVER = http://192.168.1.144/api VUE_APP_API_SERVER = http://192.168.1.144/api
VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route
VUE_APP_NODE_ENV=prod:sit VUE_APP_NODE_ENV=prod:sit
VUE_APP_PUBLIC_PATH=epmet-oper VUE_APP_PUBLIC_PATH=epmet-oper

1
.env.shibei_production

@ -1,4 +1,5 @@
NODE_ENV=production NODE_ENV=production
VUE_APP_API_SERVER = https://epdc-shibei.elinkservice.cn/api VUE_APP_API_SERVER = https://epdc-shibei.elinkservice.cn/api
# VUE_APP_BIPASS_API_SERVER = http://bipaas.elinkservice.cn/linkdata/linkdata-gateway/route
VUE_APP_NODE_ENV=shibei_prod VUE_APP_NODE_ENV=shibei_prod
VUE_APP_PUBLIC_PATH=epmet-oper VUE_APP_PUBLIC_PATH=epmet-oper

BIN
src/assets/images/shuju/main/back-on.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 689 B

BIN
src/assets/images/shuju/main/back.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 868 B

BIN
src/assets/images/shuju/renfang/index/per/dy.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/shuju/renfang/index/per/lnr.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/shuju/renfang/index/per/qsn.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/shuju/renfang/index/per/syry.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/shuju/renfang/index/per/ygxl.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/shuju/renfang/index/per/zyz.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

21
src/assets/scss/dataBoard/renfang/index.scss

@ -277,27 +277,32 @@
right: 0; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around;
padding-left: 10px; padding-left: 10px;
.item { .item {
display: flex; display: flex;
width: 160px; width: 120px;
img {
display: block;
margin-right: 16px;
width: 48px;
height: 48px;
}
.item-info { .item-info {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
line-height: 20px; line-height: 40px;
vertical-align: bottom; vertical-align: bottom;
div { div {
margin-bottom: 6px; margin-bottom: 6px;
&:first-child {
line-height: 20px;
}
}
img {
display: inline-block;
margin-right: 5px;
width: 20px;
height: 20px;
vertical-align: bottom;
} }
b { b {
font-weight: 500; font-weight: 500;

38
src/assets/scss/dataBoardMain.scss

@ -54,16 +54,50 @@
color: #ffffff; color: #ffffff;
} }
.btn-back {
position: absolute;
top: 52px;
left: 40px;
display: flex;
width: 60px;
align-items: center;
line-height: 22px;
font-size: 16px;
color: #1a95ff;
cursor: pointer;
img {
width: 16px;
margin-right: 5px;
}
.z-default {
display: block;
}
.z-on {
display: none;
}
&:hover {
color: #fff;
.z-default {
display: none;
}
.z-on {
display: block;
}
}
}
.nav-list { .nav-list {
position: absolute; position: absolute;
top: 40px; top: 40px;
left: 40px; left: 120px;
display: flex; display: flex;
width: 500px; width: 500px;
&.z-right { &.z-right {
left: auto; left: auto;
right: 40px; right: 120px;
.nav-item { .nav-item {
background-image: url(../images/shuju/main/nav-right.png); background-image: url(../images/shuju/main/nav-right.png);
&.z-on { &.z-on {

114
src/js/dai/request-bipass.js

@ -0,0 +1,114 @@
/*---------------------------------------------------------------
| 数据中台专用请求接口封装 |
---------------------------------------------------------------*/
import axios from "axios";
import curry from "dai-js/tools/curry";
import { Message } from "element-ui";
import { clearLoginInfo } from "@/utils";
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
const request = curry((method, uri, data = {}, params = {}) => {
return new Promise((reslove) => {
let returnIniData = {
httpCode: "",
data: {},
msg: "",
code: "",
};
const { headers, mockId } = params;
// env文件配置接口
let url = process.env.VUE_APP_BIPASS_API_SERVER;
// mock 开发临时用接口
if (mockId) {
url = "https://mock.apifox.cn/m2/2242395-0-default/" + mockId;
}
const succFn = (res) => {
// log(`[request成功] ${url}`, data, res);
let retData = {
...returnIniData,
...res.data,
httpCode: res.statusCode,
};
// if(typeof Vue.$afterRequestHook == 'function'){
// retData = Vue.$afterRequestHook(retData);
// }
if (res.data.code > 8000 && res.data.code < 10000) {
// Message.error(res.data.msg);
}
if (res.code == 1007 || res.code == 1024 || res.code == 2003) {
// 10005 token为空 10006登陆超时 10007别处登录
console.log("登录失效");
Message.error(res.data.msg);
clearLoginInfo();
return next({
name: "login",
});
}
reslove(retData);
};
const failFn = (err) => {
// log(`[request失败] ${url}`, data, err);
reslove(
Object.assign({}, returnIniData, {
httpCode: "9999", //访问出现意外
msg: "网络错误",
})
);
};
if (method.toUpperCase() == "POST") {
axios
.post(
url,
{
apiCode: "/api/post",
dispatcherSystem: "dataservice",
param: {
ds_code: uri,
app_code: "empet",
orderby: "[]",
...data,
},
},
{
headers,
responseType: "json",
}
)
.then(succFn)
.catch(failFn);
} else {
axios
.post(
url,
{
apiCode: "/api/get",
dispatcherSystem: "dataservice",
param: {
ds_code: uri,
app_code: "empet",
orderby: "[]",
...data,
},
},
{
headers,
responseType: "json",
}
)
.then(succFn)
.catch(failFn);
}
});
});
export const requestPostBi = request("post");

898
src/views/dataBoard/renfang/index.vue

@ -1,295 +1,334 @@
<template> <template>
<div class="g-row"> <div class="g-row">
<div class="g-left"> <div class="g-left">
<div class="m-box"> <div class="m-box">
<div class="box-title"> <div class="box-title">
<img <img
src="~@/assets/images/shuju/main/card-title-bg-480.png" src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" class="box-title-bg"
/> />
<div class="box-title-txt">房屋概览</div> <div class="box-title-txt">房屋概览</div>
</div> </div>
<div class="m-subbox"> <div class="m-subbox">
<fwgl :orgId="orgData.id"></fwgl> <fwgl :orgId="orgData.id"></fwgl>
</div> </div>
</div> </div>
<div class="m-box"> <div class="m-box">
<div class="box-title"> <div class="box-title">
<img <img
src="~@/assets/images/shuju/main/card-title-bg-480.png" src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg" class="box-title-bg"
/> />
<div class="box-title-txt">居民概览</div> <div class="box-title-txt">居民概览</div>
</div> </div>
<div class="m-subbox"> <div class="m-subbox">
<jmgl :orgId="orgData.id"></jmgl> <jmgl :orgId="orgData.id"></jmgl>
</div> </div>
</div> </div>
</div> </div>
<div class="g-center"> <div class="g-center">
<div class="m-map"> <div class="m-map">
<div class="m-per"> <div class="m-per">
<div class="item"> <div class="item">
<img <div class="item-info">
class="item-icon" <div>
src="~@/assets/images/shuju/renfang/index/per/lnr.png" <img
/> src="~@/assets/images/shuju/renfang/index/per/lnr.png"
<div class="item-info"> />
<div>老年人</div> </div>
<div> <div>
<b>10.22</b> <b>10.22</b>
% %
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img <div class="item-info">
class="item-icon" <div>
src="~@/assets/images/shuju/renfang/index/per/qsn.png" <img
/> src="~@/assets/images/shuju/renfang/index/per/qsn.png"
<div class="item-info"> />
<div>青少年</div> </div>
<div> <div>
<b>10.22</b> <b>10.22</b>
% %
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img <div class="item-info">
class="item-icon" <div>
src="~@/assets/images/shuju/renfang/index/per/zyz.png" <img
/> src="~@/assets/images/shuju/renfang/index/per/zyz.png"
<div class="item-info"> />
<div>志愿者</div> </div>
<div> <div>
<b>10.22</b> <b>10.22</b>
% %
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img <div class="item-info">
class="item-icon" <div>
src="~@/assets/images/shuju/renfang/index/per/dy.png" <img
/> src="~@/assets/images/shuju/renfang/index/per/dy.png"
<div class="item-info"> />
<div>党员</div> </div>
<div> <div>
<b>10.22</b> <b>10.22</b>
% %
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img <div class="item-info">
class="item-icon" <div>
src="~@/assets/images/shuju/renfang/index/per/syry.png" <img
/> src="~@/assets/images/shuju/renfang/index/per/syry.png"
<div class="item-info"> />
<div>失业人员</div> </div>
<div> <div>
<b>10.22</b> <b>10.22</b>
% %
</div> </div>
</div> </div>
</div> </div>
</div> <div class="item">
<div class="item-info">
<grid-map <div>
v-if="orgData.id" <img
@clickAgency="clickAgencyItem" src="~@/assets/images/shuju/renfang/index/per/ygxl.png"
:srcGridData="orgData" />
/> 月更新率
</div> </div>
<div>
<div class="m-search"> <b>10.22</b>
<div class="btn" @click="searchModule.displayedCard = true"> %
<img </div>
src="~@/assets/images/shuju/renfang/index/search/btn-bg.png" </div>
class="btn-bg" </div>
/> </div>
<img
src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png" <grid-map
class="btn-bg-hover" v-if="orgData.id"
/> @clickAgency="clickAgencyItem"
<span>点击搜索</span> :srcGridData="orgData"
</div> />
</div>
<div class="card" v-show="searchModule.displayedCard">
<div class="card-input"> <div class="m-search">
<div class="card-btn"> <div class="btn" @click="searchModule.displayedCard = true">
<img <img
src="~@/assets/images/shuju/renfang/index/search/search.png" src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
/> class="btn-bg"
</div> />
<img
<input src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
type="text" class="btn-bg-hover"
placeholder="输入关键词搜索" />
@key.enter="handleSearch" <span>点击搜索</span>
v-model="searchModule.keyword" </div>
/>
<div class="card" v-show="searchModule.displayedCard">
<div class="i-div"></div> <div class="card-input">
<div class="card-btn">
<div class="card-btn" @click="searchModule.displayedCard = false"> <img
<img src="~@/assets/images/shuju/renfang/index/search/search.png"
src="~@/assets/images/shuju/renfang/index/search/close.png" />
/> </div>
</div>
</div> <input
<div class="card-show"> type="text"
<div class="card-tabs"> placeholder="输入关键词搜索"
<div @key.enter="handleSearch"
:class="{ 'z-on': searchModule.resultTab == 'all' }" v-model="searchModule.keyword"
@click="searchModule.resultTab = 'all'" />
>
全部 <div class="i-div"></div>
</div>
<div <div
:class="{ 'z-on': searchModule.resultTab == 'resi' }" class="card-btn"
@click="searchModule.resultTab = 'resi'" @click="searchModule.displayedCard = false"
> >
居民 <img
</div> src="~@/assets/images/shuju/renfang/index/search/close.png"
<div />
:class="{ 'z-on': searchModule.resultTab == 'all' }" </div>
@click="searchModule.resultTab = 'all'" </div>
> <div class="card-show">
小区 <div class="card-tabs">
</div> <div
<div :class="{
:class="{ 'z-on': searchModule.resultTab == 'all' }" 'z-on': searchModule.resultTab == 'all',
@click="searchModule.resultTab = 'all'" }"
> @click="searchModule.resultTab = 'all'"
楼栋 >
</div> 全部
<div </div>
:class="{ 'z-on': searchModule.resultTab == 'all' }" <div
@click="searchModule.resultTab = 'all'" :class="{
> 'z-on': searchModule.resultTab == 'resi',
房屋 }"
</div> @click="searchModule.resultTab = 'resi'"
</div> >
居民
<div class="card-list" v-if="searchModule.result.length > 0"> </div>
<div <div
class="card-item" :class="{
:key="item.id" 'z-on': searchModule.resultTab == 'all',
v-for="item in searchModule.result" }"
> @click="searchModule.resultTab = 'all'"
<span>{{ item.title }}</span> >
<img 小区
src="~@/assets/images/shuju/renfang/index/search/arrow.png" </div>
class="i-arrow" <div
/> :class="{
<img 'z-on': searchModule.resultTab == 'all',
src="~@/assets/images/shuju/renfang/index/search/arrow-on.png" }"
class="i-arrow z-on" @click="searchModule.resultTab = 'all'"
/> >
</div> 楼栋
</div> </div>
<div
<div class="card-empty" v-else> :class="{
<img src="~@/assets/images/shuju/renfang/index/empty.png" /> 'z-on': searchModule.resultTab == 'all',
<span>没有找到搜索结果</span> }"
</div> @click="searchModule.resultTab = 'all'"
</div> >
</div> 房屋
</div> </div>
</div>
<div class="m-box m-cate">
<div class="box-title"> <div
<img class="card-list"
src="~@/assets/images/shuju/main/card-title-bg-800.png" v-if="searchModule.result.length > 0"
class="box-title-bg" >
/> <div
<div class="box-title-txt">居民分类分析</div> class="card-item"
:key="item.id"
<div class="box-title-btn"> v-for="item in searchModule.result"
<img src="~@/assets/images/shuju/renfang/index/znyc.png" /> >
<span>智能预测</span> <span>{{ item.title }}</span>
<img src="~@/assets/images/shuju/renfang/index/i-hint.png" /> <img
</div> src="~@/assets/images/shuju/renfang/index/search/arrow.png"
</div> class="i-arrow"
/>
<div class="list"> <img
<div src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
class="item" class="i-arrow z-on"
:key="item.code" />
v-for="(item, index) in warningData" </div>
> </div>
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
<div class="item-name">{{ item.name }}</div> <div class="card-empty" v-else>
<div class="item-count"> <img
<b>{{ item.count }}</b> src="~@/assets/images/shuju/renfang/index/empty.png"
</div> />
<div class="item-progress"> <span>没有找到搜索结果</span>
<b :style="{ width: item.count + '%' }"></b> </div>
</div> </div>
<div class="item-per"> </div>
<span>较上月</span> </div>
<img
v-if="false" <div class="m-box m-cate">
src="~@/assets/images/shuju/renfang/index/up.png" <div class="box-title">
/> <img
<img v-else src="~@/assets/images/shuju/renfang/index/down.png" /> src="~@/assets/images/shuju/main/card-title-bg-800.png"
<b>{{ item.count }}</b> class="box-title-bg"
<span></span> />
</div> <div class="box-title-txt">居民分类分析</div>
</div>
</div> <div class="box-title-btn">
</div> <img
</div> src="~@/assets/images/shuju/renfang/index/znyc.png"
/>
<div class="g-right"> <span>智能预测</span>
<div class="m-box"> <img
<div class="box-title"> src="~@/assets/images/shuju/renfang/index/i-hint.png"
<img />
src="~@/assets/images/shuju/main/card-title-bg-480.png" </div>
class="box-title-bg" </div>
/>
<div class="box-title-txt">数字社区</div> <div class="list">
</div> <div
class="item"
<div class="m-subbox m-szsq"> :key="item.code"
<szsq :orgId="orgData.id"></szsq> v-for="(item, index) in warningData"
</div> >
</div> <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
<div class="item-name">{{ item.name }}</div>
<div class="m-box"> <div class="item-count">
<div class="box-title"> <b>{{ item.count }}</b>
<img </div>
src="~@/assets/images/shuju/main/card-title-bg-480.png" <div class="item-progress">
class="box-title-bg" <b :style="{ width: item.count + '%' }"></b>
/> </div>
<div class="box-title-txt">人口预警</div> <div class="item-per">
</div> <span>较上月</span>
<img
<div class="m-subbox m-rkyj"> v-if="false"
<rkyj :orgId="orgData.id"></rkyj> src="~@/assets/images/shuju/renfang/index/up.png"
</div> />
</div> <img
<div class="m-box"> v-else
<div class="box-title"> src="~@/assets/images/shuju/renfang/index/down.png"
<img />
src="~@/assets/images/shuju/main/card-title-bg-480.png" <b>{{ item.count }}</b>
class="box-title-bg" <span></span>
/> </div>
<div class="box-title-txt">人口分析</div> </div>
</div> </div>
</div>
<div class="m-subbox"> </div>
<rkfx :orgId="orgData.id"></rkfx>
</div> <div class="g-right">
</div> <div class="m-box">
</div> <div class="box-title">
</div> <img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">数字社区</div>
</div>
<div class="m-subbox m-szsq">
<szsq :orgId="orgData.id"></szsq>
</div>
</div>
<div class="m-box">
<div class="box-title">
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">人口预警</div>
</div>
<div class="m-subbox m-rkyj">
<rkyj :orgId="orgData.id"></rkyj>
</div>
</div>
<div class="m-box">
<div class="box-title">
<img
src="~@/assets/images/shuju/main/card-title-bg-480.png"
class="box-title-bg"
/>
<div class="box-title-txt">人口分析</div>
</div>
<div class="m-subbox">
<rkfx :orgId="orgData.id"></rkfx>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -299,133 +338,168 @@ import jmgl from "@/views/dataBoard/renfang/cpts/jmgl";
import rkfx from "@/views/dataBoard/renfang/cpts/rkfx"; import rkfx from "@/views/dataBoard/renfang/cpts/rkfx";
import rkyj from "@/views/dataBoard/renfang/cpts/rkyj"; import rkyj from "@/views/dataBoard/renfang/cpts/rkyj";
import szsq from "@/views/dataBoard/renfang/cpts/szsq"; import szsq from "@/views/dataBoard/renfang/cpts/szsq";
import { requestPostBi } from "@/js/dai/request-bipass";
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara"; import getQueryPara from "dai-js/modules/getQueryPara";
export default { export default {
components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq }, components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq },
data() { data() {
return { return {
orgData: {}, // orgData: {}, //
orgId: "", orgId: "",
orgLevel: "", orgLevel: "",
subAgencyArray: [], subAgencyArray: [],
warningData: [], warningData: [],
searchModule: { searchModule: {
displayedCard: false, displayedCard: false,
keyword: "", keyword: "",
resultTab: "all", // all resi resultTab: "all", // all resi
result: [ result: [
{ {
id: 1, id: 1,
title: "四季景园", title: "四季景园",
}, },
{ {
id: 11, id: 11,
title: "四季景园-四号楼", title: "四季景园-四号楼",
}, },
{ {
id: 1111, id: 1111,
title: "四季景园-四号楼-1单元", title: "四季景园-四号楼-1单元",
}, },
{ {
id: 111111, id: 111111,
title: "四季景园-四号楼-1单元-101", title: "四季景园-四号楼-1单元-101",
}, },
{ {
id: 12342, id: 12342,
title: "四季景园-2单元", title: "四季景园-2单元",
}, },
{ {
id: 133, id: 133,
title: "四季景园-2单元-2号楼-201", title: "四季景园-2单元-2号楼-201",
}, },
{ {
id: 122, id: 122,
title: "四季景园2", title: "四季景园2",
}, },
{ {
id: 1312, id: 1312,
title: "四季景园4", title: "四季景园4",
}, },
], ],
}, },
};
}, perInfo: {
async mounted() { unused_count: 10,
const queryOrgId = getQueryPara("orgId"); lease_count: 10,
const queryOrgLevel = getQueryPara("orgLevel"); house_count: 100,
console.log("orgId", queryOrgId); org_id: "10001",
if (queryOrgId) { self_dwelling_count: 10,
this.orgId = queryOrgId; },
this.orgLevel = queryOrgLevel || "agency"; };
} },
async mounted() {
// const queryOrgId = getQueryPara("orgId");
await this.loadOrgData(); const queryOrgLevel = getQueryPara("orgLevel");
this.getWarningList(); console.log("orgId", queryOrgId);
}, if (queryOrgId) {
methods: { this.orgId = queryOrgId;
handleSearch() { this.orgLevel = queryOrgLevel || "agency";
console.log(this.searchModule); }
},
//
// await this.loadOrgData();
async getWarningList() { this.getWarningList();
const url = "/epmetuser/statsresiwarn/list"; this.getPerInfo();
let params = { },
id: this.orgData.id, methods: {
level: "agency", clickAgencyItem() {},
};
handleSearch() {
const { data, code, msg } = await requestPost(url, params); console.log(this.searchModule);
},
if (code === 0) { // ps:
this.warningData = data.map((item) => { async getPerInfo() {
return { console.log('=========================getPerInfo')
code: item.columnName, const url = "house_view";
name: item.label,
count: item.count, const { data, code, msg } = await requestPostBi(
const: "const", url,
}; {
}); queryParam: {
} else { org_id: this.orgData.id,
this.$message.error(msg); },
} },
}, {
mockId: 60810589,
// }
async loadOrgData() { );
const url = "/gov/org/agency/maporg";
let params = { if (code === 0) {
orgId: this.orgId, this.perInfo = data[0];
level: this.orgLevel, } else {
}; this.$message.error(msg);
}
const { data, code, msg } = await requestPost(url, params); },
if (code === 0) { //
this.orgData = data; async getWarningList() {
this.orgId = this.orgData.id; const url = "/epmetuser/statsresiwarn/list";
this.orgLevel = this.orgData.level; let params = {
if (data.children && data.children.length > 0) { id: this.orgData.id,
this.subAgencyArray = data.children; level: "agency",
} else { };
this.subAgencyArray = [];
} const { data, code, msg } = await requestPost(url, params);
} else {
this.$message.error(msg); if (code === 0) {
} this.warningData = data.map((item) => {
}, return {
}, code: item.columnName,
name: item.label,
count: item.count,
const: "const",
};
});
} else {
this.$message.error(msg);
}
},
//
async loadOrgData() {
const url = "/gov/org/agency/maporg";
let params = {
orgId: this.orgId,
level: this.orgLevel,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.orgData = data;
this.orgId = this.orgData.id;
this.orgLevel = this.orgData.level;
if (data.children && data.children.length > 0) {
this.subAgencyArray = data.children;
} else {
this.subAgencyArray = [];
}
} else {
this.$message.error(msg);
}
},
},
}; };
</script> </script>
<style <style
lang="scss" lang="scss"
src="@/assets/scss/dataBoard/renfang/index.scss" src="@/assets/scss/dataBoard/renfang/index.scss"
scoped scoped
></style> ></style>

604
src/views/dataBoardMain/main-navbar.vue

@ -1,171 +1,196 @@
<template> <template>
<div class="m-topnav"> <div class="m-topnav">
<div class="title">{{ customerName }}综合服务平台数据看板</div> <div class="title">{{ customerName }}综合服务平台数据看板</div>
<div class="nav-list z-left"> <div class="btn-back" @click="toPage('/')">
<div <img class="z-default" src="~@/assets/images/shuju/main/back.png" />
class="nav-item" <img class="z-on" src="~@/assets/images/shuju/main/back-on.png" />
:class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }" <span>返回</span>
@click="toPage('/board')" </div>
> <div class="nav-list z-left">
<span>人房总览</span> <div
</div> class="nav-item"
<div class="nav-item" @click="toPage('/')"> :class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }"
<span>人口分析</span> @click="toPage('/board')"
</div> >
<div class="nav-item" @click="toPage('/')"> <span>人房总览</span>
<span>人口变化</span> </div>
</div> <div class="nav-item" @click="toPage('/')">
<div class="nav-item" @click="toPage('/')"> <span>问题清单</span>
<span>人口预警</span> </div>
</div> <div class="nav-item" @click="toPage('/')">
</div> <span>需求清单</span>
</div>
<div class="nav-item" @click="toPage('/')">
<span>资源清单</span>
</div>
</div>
<div class="nav-list z-right"> <div class="nav-list z-right">
<div class="nav-item" @click="toPage('/')"> <div class="nav-item">
<span>回首页</span> <span>15分钟生活圈</span>
</div> </div>
</div> </div>
<div class="msg"> <div class="msg">
<div class="weather"> <div class="weather">
<img <img
v-if="weather.weather == '小雨'" v-if="weather.weather == '小雨'"
src="~@/assets/images/shuju/main/weather/xiaoyu.png" src="~@/assets/images/shuju/main/weather/xiaoyu.png"
/> />
<img <img
v-if="weather.weather == '中雨'" v-if="weather.weather == '中雨'"
src="~@/assets/images/shuju/main/weather/zhongyu.png" src="~@/assets/images/shuju/main/weather/zhongyu.png"
/> />
<img <img
v-if="weather.weather == '大雨'" v-if="weather.weather == '大雨'"
src="~@/assets/images/shuju/main/weather/dayu.png" src="~@/assets/images/shuju/main/weather/dayu.png"
/> />
<img <img
v-if="weather.weather == '雷雨'" v-if="weather.weather == '雷雨'"
src="~@/assets/images/shuju/main/weather/leiyu.png" src="~@/assets/images/shuju/main/weather/leiyu.png"
/> />
<img <img
v-if="weather.weather == '雷暴'" v-if="weather.weather == '雷暴'"
src="~@/assets/images/shuju/main/weather/leibao.png" src="~@/assets/images/shuju/main/weather/leibao.png"
/> />
<img <img
v-if="weather.weather == '雨雪'" v-if="weather.weather == '雨雪'"
src="~@/assets/images/shuju/main/weather/yuxue.png" src="~@/assets/images/shuju/main/weather/yuxue.png"
/> />
<img <img
v-if="weather.weather == '阴'" v-if="weather.weather == '阴'"
src="~@/assets/images/shuju/main/weather/yin.png" src="~@/assets/images/shuju/main/weather/yin.png"
/> />
<img <img
v-if="weather.weather == '雾'" v-if="weather.weather == '雾'"
src="~@/assets/images/shuju/main/weather/wu.png" src="~@/assets/images/shuju/main/weather/wu.png"
/> />
<img <img
v-if="weather.weather == '风'" v-if="weather.weather == '风'"
src="~@/assets/images/shuju/main/weather/feng.png" src="~@/assets/images/shuju/main/weather/feng.png"
/> />
<img <img
v-else-if="weather.weather == '雪'" v-else-if="weather.weather == '雪'"
src="~@/assets/images/shuju/main/weather/xue.png" src="~@/assets/images/shuju/main/weather/xue.png"
/> />
<img <img
v-else-if="weather.weather == '多云'" v-else-if="weather.weather == '多云'"
src="~@/assets/images/shuju/main/weather/duoyun.png" src="~@/assets/images/shuju/main/weather/duoyun.png"
/> />
<img v-else src="~@/assets/images/shuju/main/weather/qing.png" /> <img
v-else
src="~@/assets/images/shuju/main/weather/qing.png"
/>
<div>{{ weather.temperature }}</div> <div>{{ weather.temperature }}</div>
<div>{{ weather.weather }}</div> <div>{{ weather.weather }}</div>
</div> </div>
<div class="date"> <div class="date">
<div class="date-time">{{ showTime }}</div> <div class="date-time">{{ showTime }}</div>
<div class="date-div"></div> <div class="date-div"></div>
<div class="date-week">{{ showWeek }}</div> <div class="date-week">{{ showWeek }}</div>
</div> </div>
</div> </div>
<nav v-if="false" class="m-navbar"> <nav v-if="false" class="m-navbar">
<div class="navbar__header"> <div class="navbar__header">
<h1 class="navbar__brand" @click="$router.push({ name: 'home' })"> <h1
<a class="navbar__brand-lg" href="javascript:;">{{ customerName }}</a> class="navbar__brand"
<a class="navbar__brand-mini" href="javascript:;">{{ @click="$router.push({ name: 'home' })"
customerName.slice(0, 2) >
}}</a> <a class="navbar__brand-lg" href="javascript:;">{{
</h1> customerName
</div> }}</a>
<div class="navbar__body"> <a class="navbar__brand-mini" href="javascript:;">{{
<el-menu class="navbar__menu mr-auto" mode="horizontal"> customerName.slice(0, 2)
<el-menu-item }}</a>
index="1" </h1>
@click="$store.state.sidebarFold = !$store.state.sidebarFold" </div>
> <div class="navbar__body">
<svg <el-menu class="navbar__menu mr-auto" mode="horizontal">
class="icon-svg navbar__icon-menu navbar__icon-menu--switch" <el-menu-item
aria-hidden="true" index="1"
> @click="
<use xlink:href="#icon-outdent"></use> $store.state.sidebarFold = !$store.state.sidebarFold
</svg> "
</el-menu-item> >
<svg
class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
aria-hidden="true"
>
<use xlink:href="#icon-outdent"></use>
</svg>
</el-menu-item>
<el-menu-item index="2" @click="refresh()"> <el-menu-item index="2" @click="refresh()">
<svg class="icon-svg navbar__icon-menu" aria-hidden="true"> <svg
<use xlink:href="#icon-sync"></use> class="icon-svg navbar__icon-menu"
</svg> aria-hidden="true"
</el-menu-item> >
</el-menu> <use xlink:href="#icon-sync"></use>
</svg>
</el-menu-item>
</el-menu>
<el-menu <el-menu
:default-active="$store.state.mainShuju.activeName" :default-active="$store.state.mainShuju.activeName"
:unique-opened="true" :unique-opened="true"
:collapseTransition="false" :collapseTransition="false"
mode="horizontal" mode="horizontal"
class="navbar__menu mr-auto z-div" class="navbar__menu mr-auto z-div"
> >
<el-menu-item index="index" @click="toIndexPage"> <el-menu-item index="index" @click="toIndexPage">
<span>首页</span> <span>首页</span>
</el-menu-item> </el-menu-item>
<template v-for="(menu, idx) in $store.state.mainShuju.menuList"> <template
<li v-for="(menu, idx) in $store.state.mainShuju.menuList"
class="sub-menu" >
:class=" <li
$store.state.mainShuju.activeName == menu.id ? 'z-on' : '' class="sub-menu"
" :class="
v-if="menu.children" $store.state.mainShuju.activeName == menu.id
:key="menu.id" ? 'z-on'
@click="gotoRouteHandle(menu.id, idx)" : ''
> "
<span>{{ menu.name }}</span> v-if="menu.children"
<div class="sub-menu-list"> :key="menu.id"
<div @click="gotoRouteHandle(menu.id, idx)"
:class=" >
$store.state.mainShuju.activeName == subMenu.id <span>{{ menu.name }}</span>
? 'z-on' <div class="sub-menu-list">
: '' <div
" :class="
:key="subMenu.id" $store.state.mainShuju.activeName ==
@click="gotoRouteHandle(subMenu.id, subIndex)" subMenu.id
v-for="(subMenu, subIndex) in menu.children" ? 'z-on'
> : ''
{{ subMenu.name }} "
</div> :key="subMenu.id"
</div> @click="
</li> gotoRouteHandle(subMenu.id, subIndex)
<el-menu-item "
v-else v-for="(subMenu, subIndex) in menu.children"
:key="menu.id" >
:menu="menu" {{ subMenu.name }}
:index="menu.id" </div>
@click="gotoRouteHandle(menu.id, idx)" </div>
> </li>
<span>{{ menu.name }}</span> <el-menu-item
</el-menu-item> v-else
</template> :key="menu.id"
</el-menu> :menu="menu"
:index="menu.id"
@click="gotoRouteHandle(menu.id, idx)"
>
<span>{{ menu.name }}</span>
</el-menu-item>
</template>
</el-menu>
<el-menu class="navbar__menu" mode="horizontal"> <el-menu class="navbar__menu" mode="horizontal">
<!-- <el-menu-item index="1"> <!-- <el-menu-item index="1">
<el-dropdown placement="bottom" <el-dropdown placement="bottom"
:show-timeout="0"> :show-timeout="0">
<el-button size="mini">{{ $t('_lang') }}</el-button> <el-button size="mini">{{ $t('_lang') }}</el-button>
@ -176,7 +201,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-menu-item> --> </el-menu-item> -->
<!-- <el-menu-item index="2"> <!-- <el-menu-item index="2">
<a href="//www.renren.io/" <a href="//www.renren.io/"
target="_blank"> target="_blank">
<svg class="icon-svg navbar__icon-menu" <svg class="icon-svg navbar__icon-menu"
@ -185,38 +210,47 @@
</svg> </svg>
</a> </a>
</el-menu-item> --> </el-menu-item> -->
<el-menu-item index="3" @click="fullscreenHandle()"> <el-menu-item index="3" @click="fullscreenHandle()">
<svg class="icon-svg navbar__icon-menu" aria-hidden="true"> <svg
<use xlink:href="#icon-fullscreen"></use> class="icon-svg navbar__icon-menu"
</svg> aria-hidden="true"
</el-menu-item> >
<use xlink:href="#icon-fullscreen"></use>
</svg>
</el-menu-item>
<el-menu-item index="4" class="navbar__avatar"> <el-menu-item index="4" class="navbar__avatar">
<el-dropdown placement="bottom" :show-timeout="0"> <el-dropdown placement="bottom" :show-timeout="0">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<img src="~@/assets/img/staff-default-avatar.png" /> <img
<span>{{ $store.state.user.realName }}</span> src="~@/assets/img/staff-default-avatar.png"
<i class="el-icon-arrow-down"></i> />
</span> <span>{{ $store.state.user.realName }}</span>
<el-dropdown-menu slot="dropdown"> <i class="el-icon-arrow-down"></i>
<el-dropdown-item @click.native="updatePasswordHandle()">{{ </span>
$t("updatePassword.title") <el-dropdown-menu slot="dropdown">
}}</el-dropdown-item> <el-dropdown-item
<el-dropdown-item @click.native="logoutHandle()">{{ @click.native="updatePasswordHandle()"
$t("logout") >{{
}}</el-dropdown-item> $t("updatePassword.title")
</el-dropdown-menu> }}</el-dropdown-item
</el-dropdown> >
</el-menu-item> <el-dropdown-item
</el-menu> @click.native="logoutHandle()"
</div> >{{ $t("logout") }}</el-dropdown-item
<!-- 弹窗, 修改密码 --> >
<update-password-work </el-dropdown-menu>
v-if="updatePassowrdVisible" </el-dropdown>
ref="updatePassowrd" </el-menu-item>
></update-password-work> </el-menu>
</nav> </div>
</div> <!-- 弹窗, 修改密码 -->
<update-password-work
v-if="updatePassowrdVisible"
ref="updatePassowrd"
></update-password-work>
</nav>
</div>
</template> </template>
<script> <script>
@ -227,109 +261,109 @@ import nextTick from "dai-js/tools/nextTick";
import { requestGet } from "@/js/dai/request"; import { requestGet } from "@/js/dai/request";
export default { export default {
inject: ["refresh"], inject: ["refresh"],
data() { data() {
return { return {
showHeader: true, showHeader: true,
i18nMessages: messages, i18nMessages: messages,
updatePassowrdVisible: false, updatePassowrdVisible: false,
customerName: "", customerName: "",
showWeek: "", showWeek: "",
showTime: "", showTime: "",
weather: { weather: {
weather: "晴", weather: "晴",
temperature: "--", temperature: "--",
}, },
}; };
}, },
components: { components: {
UpdatePasswordWork, UpdatePasswordWork,
}, },
created() { created() {
this.changeCustomerName(); this.changeCustomerName();
const customerId = localStorage.getItem("customerId"); const customerId = localStorage.getItem("customerId");
let siteconfigElement = window.SITE_CONFIG["menuShujuList"]; let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
// 亿 - // 亿 -
if ( if (
"04c0d396e298f13e57aa5904a657eaa6" != customerId && "04c0d396e298f13e57aa5904a657eaa6" != customerId &&
"3fdd0380deff5b30f45376cdf995d1c1" != customerId "3fdd0380deff5b30f45376cdf995d1c1" != customerId
) { ) {
for (let index in siteconfigElement) { for (let index in siteconfigElement) {
if (siteconfigElement[index].id == "6") { if (siteconfigElement[index].id == "6") {
let newMenuArr = siteconfigElement[index].children.filter( let newMenuArr = siteconfigElement[index].children.filter(
(item) => item.id !== "duoyuanfuwufenxi" (item) => item.id !== "duoyuanfuwufenxi"
); );
siteconfigElement[index].children = newMenuArr; siteconfigElement[index].children = newMenuArr;
} }
} }
} }
this.$store.state.mainShuju.menuList = siteconfigElement; this.$store.state.mainShuju.menuList = siteconfigElement;
const pollTime = async () => { const pollTime = async () => {
this.computeCurrentTime(); this.computeCurrentTime();
await nextTick(1000); await nextTick(1000);
pollTime(); pollTime();
}; };
pollTime(); pollTime();
this.getWeatherData(); this.getWeatherData();
}, },
computed: {}, computed: {},
methods: { methods: {
computeCurrentTime() { computeCurrentTime() {
let now = new Date(); let now = new Date();
let wk = now.getDay(); let wk = now.getDay();
this.showWeek = [ this.showWeek = [
"星期日", "星期日",
"星期一", "星期一",
"星期二", "星期二",
"星期三", "星期三",
"星期四", "星期四",
"星期五", "星期五",
"星期六", "星期六",
][wk]; ][wk];
this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss"); this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss");
}, },
toPage(path) { toPage(path) {
this.$router.push({ path }); this.$router.push({ path });
}, },
toIndexPage() { toIndexPage() {
this.$router.replace("/"); this.$router.replace("/");
}, },
// menuId() // menuId()
gotoRouteHandle(menuId, idx) { gotoRouteHandle(menuId, idx) {
var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter( var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
(item) => item.meta.menuId === menuId (item) => item.meta.menuId === menuId
)[0]; )[0];
if (route) { if (route) {
this.$router.push({ name: route.name }); this.$router.push({ name: route.name });
this.$store.state.mainShuju.activeName = menuId; this.$store.state.mainShuju.activeName = menuId;
} }
}, },
changeCustomerName() { changeCustomerName() {
this.customerName = this.customerName =
localStorage.getItem("customerName") || "数据分析可视化平台"; localStorage.getItem("customerName") || "数据分析可视化平台";
}, },
async getWeatherData() { async getWeatherData() {
const url = const url =
"https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e"; "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
const { data, code, msg } = await requestGet(url, { const { data, code, msg } = await requestGet(url, {
city: this.$store.state.user.areaCode, city: this.$store.state.user.areaCode,
}); });
if (code === 0) { if (code === 0) {
console.log("---------------weather", data); console.log("---------------weather", data);
this.weather = data.lives[0]; this.weather = data.lives[0];
} else { } else {
// return this.$message.error(""); // return this.$message.error("");
} }
}, },
}, },
}; };
</script> </script>

Loading…
Cancel
Save