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/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
#项目根路径

1
.env.production

@ -1,4 +1,5 @@
NODE_ENV=production
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_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 = http://192.168.1.140/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_PUBLIC_PATH=epmet-oper

1
.env.shibei_production

@ -1,4 +1,5 @@
NODE_ENV=production
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_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;
display: flex;
align-items: center;
justify-content: space-around;
padding-left: 10px;
.item {
display: flex;
width: 160px;
width: 120px;
img {
display: block;
margin-right: 16px;
width: 48px;
height: 48px;
}
.item-info {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 0.65);
line-height: 20px;
line-height: 40px;
vertical-align: bottom;
div {
margin-bottom: 6px;
&:first-child {
line-height: 20px;
}
}
img {
display: inline-block;
margin-right: 5px;
width: 20px;
height: 20px;
vertical-align: bottom;
}
b {
font-weight: 500;

38
src/assets/scss/dataBoardMain.scss

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

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

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

Loading…
Cancel
Save