Commit d0eb3bec authored by 廖旭伟's avatar 廖旭伟

Merge remote-tracking branch 'origin/master'

parents 0a00901d e3a722de
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"china-division": "^2.5.0", "china-division": "^2.5.0",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"crypto-js": "^4.1.1",
"date-fns": "^2.14.0", "date-fns": "^2.14.0",
"echarts": "^5.2.2", "echarts": "^5.2.2",
"element-china-area-data": "^5.0.2", "element-china-area-data": "^5.0.2",
......
...@@ -31,16 +31,17 @@ ...@@ -31,16 +31,17 @@
border-bottom: 1px solid rgb(224, 224, 224) !important; border-bottom: 1px solid rgb(224, 224, 224) !important;
} }
.ant-tabs-tab{ .ant-tabs-tab {
font-weight: bold; font-weight: bold;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
i{ i {
color:#1890ff color: #1890ff;
} }
} }
.ant-spin-nested-loading,.ant-spin-container{ .ant-spin-nested-loading,
width:100%; .ant-spin-container {
height:100%; width: 100%;
height: 100%;
} }
/* 溢出表格滚动条 */ /* 溢出表格滚动条 */
/* 表格 */ /* 表格 */
...@@ -56,10 +57,9 @@ ...@@ -56,10 +57,9 @@
tr:only-child > th:last-child { tr:only-child > th:last-child {
border-right-color: #f0f0f0 !important; border-right-color: #f0f0f0 !important;
} }
} }
.ant-table-placeholder{ .ant-table-placeholder {
width:calc(100% - 6px) width: calc(100% - 6px);
} }
.ant-table-header { .ant-table-header {
background: #fff; background: #fff;
...@@ -119,3 +119,10 @@ ...@@ -119,3 +119,10 @@
// justify-content:space-between; // justify-content:space-between;
// margin-bottom: 20px; // margin-bottom: 20px;
// } // }
// 统一设置表格为空时的展示
.ant-table-tbody {
td:empty::after {
content: "--";
}
}
...@@ -2,8 +2,9 @@ import Vue from "vue"; ...@@ -2,8 +2,9 @@ import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
import modules from "./modules"; import modules from "./modules";
import createPersistedState from "vuex-persistedstate"; import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls"; // import SecureLS from "secure-ls";
var ls = new SecureLS({ isCompression: false }); // var ls = new SecureLS({ isCompression: false });
import { SessionCrypto } from "@/utils/util";
Vue.use(Vuex); Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
modules, modules,
...@@ -15,9 +16,9 @@ const store = new Vuex.Store({ ...@@ -15,9 +16,9 @@ const store = new Vuex.Store({
createPersistedState({ createPersistedState({
key: "info", key: "info",
storage: { storage: {
getItem: (key) => ls.get(key), getItem: (key) => SessionCrypto.getItem(key),
setItem: (key, value) => ls.set(key, value), setItem: (key, value) => SessionCrypto.setItem(key, value),
removeItem: (key) => ls.remove(key), removeItem: (key) => SessionCrypto.remove(key),
}, },
}), }),
], ],
......
import enquireJs from "enquire.js"; import enquireJs from "enquire.js";
import CryptoJS from "crypto-js";
export function isDef(v) { export function isDef(v) {
return v !== undefined && v !== null; return v !== undefined && v !== null;
} }
...@@ -62,3 +62,52 @@ export const extractTree = (arrs, childs, attrArr) => { ...@@ -62,3 +62,52 @@ export const extractTree = (arrs, childs, attrArr) => {
}; };
return getObj(arrs); return getObj(arrs);
}; };
/**
* 加密存储临时数据并解析对象
*/
const aseKey = "**_FXxx_1234_KEY";
const KEY = "KEY_EXTRA";
export class SessionCrypto {
// 加密
static setItem(key = KEY, value = "") {
if (typeof key === "string") {
const stringify = JSON.stringify(value);
const encrypt = CryptoJS.AES.encrypt(
stringify,
CryptoJS.enc.Utf8.parse(aseKey),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
).toString();
window.sessionStorage.setItem(key, encrypt);
return encrypt;
}
}
// 解密
static getItem(key = KEY) {
const ssStr = window.sessionStorage.getItem(key) || "";
try {
if (ssStr) {
const decrypt = CryptoJS.AES.decrypt(
ssStr,
CryptoJS.enc.Utf8.parse(aseKey),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
).toString(CryptoJS.enc.Utf8);
const parseStr = JSON.parse(decrypt);
return parseStr;
}
return "";
} catch (e) {
return "";
}
}
// 删除
static remove(key) {
window.sessionStorage.removeItem(key);
}
}
...@@ -3676,6 +3676,11 @@ crypto-js@^3.1.6: ...@@ -3676,6 +3676,11 @@ crypto-js@^3.1.6:
resolved "https://registry.npmmirror.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b" resolved "https://registry.npmmirror.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b"
integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q== integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==
crypto-js@^4.1.1:
version "4.1.1"
resolved "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
crypto-random-string@^2.0.0: crypto-random-string@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.npm.taobao.org/crypto-random-string/download/crypto-random-string-2.0.0.tgz?cache=0&sync_timestamp=1583560482221&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcrypto-random-string%2Fdownload%2Fcrypto-random-string-2.0.0.tgz" resolved "https://registry.npm.taobao.org/crypto-random-string/download/crypto-random-string-2.0.0.tgz?cache=0&sync_timestamp=1583560482221&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcrypto-random-string%2Fdownload%2Fcrypto-random-string-2.0.0.tgz"
......
...@@ -777,3 +777,10 @@ img { ...@@ -777,3 +777,10 @@ img {
// } // }
// } // }
// } // }
// 统一设置表格为空时的展示
.ant-table-tbody {
td:empty::after {
content: "--";
}
}
\ No newline at end of file
...@@ -2,9 +2,10 @@ import Vue from "vue"; ...@@ -2,9 +2,10 @@ import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
import modules from "./modules"; import modules from "./modules";
import createPersistedState from "vuex-persistedstate"; import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls"; // import SecureLS from "secure-ls";
var ls = new SecureLS({ isCompression: false }); // var ls = new SecureLS({ isCompression: false });
import VuexReset from "@ianwalter/vuex-reset"; import VuexReset from "@ianwalter/vuex-reset";
import { SessionCrypto } from "@/utils";
// import persistedState from 'vuex-persistedstate' // import persistedState from 'vuex-persistedstate'
Vue.use(Vuex); Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
...@@ -16,9 +17,9 @@ const store = new Vuex.Store({ ...@@ -16,9 +17,9 @@ const store = new Vuex.Store({
createPersistedState({ createPersistedState({
key: "info", key: "info",
storage: { storage: {
getItem: (key) => ls.get(key), getItem: (key) => SessionCrypto.getItem(key),
setItem: (key, value) => ls.set(key, value), setItem: (key, value) => SessionCrypto.setItem(key, value),
removeItem: (key) => ls.remove(key), removeItem: (key) => SessionCrypto.remove(key),
}, },
}), }),
], ],
......
...@@ -16,3 +16,66 @@ export let encrypt = (str, keyStr, ivStr) => { ...@@ -16,3 +16,66 @@ export let encrypt = (str, keyStr, ivStr) => {
return encrypted.toString(); return encrypted.toString();
}; };
// 解密
export const decrypt = (word, keyStr, ivStr) => {
keyStr = keyStr ? keyStr : "0000000671595991";
ivStr = ivStr ? ivStr : "tdrdadq59tbss5n7";
let key = CryptoJS.enc.Utf8.parse(keyStr);
let iv = CryptoJS.enc.Utf8.parse(ivStr);
let decrypt = CryptoJS.AES.decrypt(word, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return decrypt.toString(CryptoJS.enc.Utf8);
};
/**
* 加密存储临时数据并解析对象
*/
const aseKey = "**_FXxx_1234_KEY";
const KEY = "KEY_EXTRA";
export class SessionCrypto {
// 加密
static setItem(key = KEY, value = "") {
if (typeof key === "string") {
const stringify = JSON.stringify(value);
const encrypt = CryptoJS.AES.encrypt(
stringify,
CryptoJS.enc.Utf8.parse(aseKey),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
).toString();
window.sessionStorage.setItem(key, encrypt);
return encrypt;
}
}
// 解密
static getItem(key = KEY) {
const ssStr = window.sessionStorage.getItem(key) || "";
try {
if (ssStr) {
const decrypt = CryptoJS.AES.decrypt(
ssStr,
CryptoJS.enc.Utf8.parse(aseKey),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
).toString(CryptoJS.enc.Utf8);
const parseStr = JSON.parse(decrypt);
return parseStr;
}
return "";
} catch (e) {
return "";
}
}
// 删除
static remove(key) {
window.sessionStorage.removeItem(key);
}
}
...@@ -80,13 +80,20 @@ export default { ...@@ -80,13 +80,20 @@ export default {
this.queryform.dateTimeStart = this.time ? this.time[0] : null; this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeStart = this.time ? this.time[1] : null; this.queryform.dateTimeStart = this.time ? this.time[1] : null;
getWayAccessAnalyse(this.queryform).then((res) => { getWayAccessAnalyse(this.queryform).then((res) => {
let data = res.data.data.map((item, i) => let newobj = {};
item.code != "/sceneSignIn" let data = res.data.data.reduce((preVal, curVal) => {
? { newobj[curVal.name]
name: item.name, ? ""
} : (newobj[curVal.name] = preVal.push(curVal));
: "" return preVal;
); }, []);
// let data = res.data.data.map((item, i) =>
// item.code != "/sceneSignIn"
// ? {
// name: item.name,
// }
// : ""
// );
let links = res.data.links.map((item) => ({ let links = res.data.links.map((item) => ({
source: item.sourceName, source: item.sourceName,
target: item.targetName, target: item.targetName,
...@@ -96,7 +103,7 @@ export default { ...@@ -96,7 +103,7 @@ export default {
}, },
})); }));
data = data.filter((v) => v); data = data.filter((v) => v);
links = links.filter((v) => v.target != "首页"); links = links.filter((v) => v.target != "首页" && v.target != v.source);
this.init(data, links); this.init(data, links);
}); });
}, },
......
...@@ -217,12 +217,14 @@ export default { ...@@ -217,12 +217,14 @@ export default {
display: flex; display: flex;
.img-dv { .img-dv {
width: 60%; flex: 1;
margin: 100px; margin: 100px;
height: 600px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 100%;
} }
#queuing { #queuing {
...@@ -236,7 +238,7 @@ export default { ...@@ -236,7 +238,7 @@ export default {
} }
.list-dv { .list-dv {
width: 40%; width: 55%;
min-height: 100%; min-height: 100%;
border-left: solid 1px #efefef; border-left: solid 1px #efefef;
box-sizing: border-box; box-sizing: border-box;
......
<template> <template>
<!-- 使用习惯分析 --> <!-- 使用习惯分析 -->
<div class="page"> <div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model
:model="queryform"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="inline"
>
<a-form-model-item> <a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品"> <a-select
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index"> v-model="queryform.productId"
{{item.title}} style="width: 200px"
placeholder="选择产品"
>
<a-select-option
:value="item.id"
v-for="(item, index) in product"
:key="index"
>
{{ item.title }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/> <a-range-picker
valueFormat="yyyy-MM-DD"
v-model="time"
style="width: 300px"
:allowClear="false"
/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button type="primary" class="addclass" @click="getData"> <a-button type="primary" class="addclass" @click="getData">
...@@ -27,187 +45,225 @@ ...@@ -27,187 +45,225 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import moment from 'moment'; import moment from "moment";
import {getUsageCensus} from '@/api/dataActuary.js' import { getUsageCensus } from "@/api/dataActuary.js";
import product from "../mixins/product" import product from "../mixins/product";
export default { export default {
mixins:[product], mixins: [product],
data() { data() {
return { return {
queryform: { queryform: {
productId: 1, productId: 1,
dateTimeStart: moment().format('yyyy-MM-DD'), dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd: moment().format('yyyy-MM-DD'), dateTimeEnd: moment().format("yyyy-MM-DD"),
pageCode: '/' pageCode: "/",
}, },
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')], time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product: [{ product: [
title: '排队机', {
id: 1 title: "排队机",
}], id: 1,
},
],
labelCol: { labelCol: {
span: 1 span: 1,
}, },
wrapperCol: { wrapperCol: {
span: 14 span: 14,
}, },
} };
}, },
mounted() { mounted() {
this.getData() this.getData();
}, },
methods: { methods: {
getData() { getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeEnd = this.time ? this.time[1] : null this.queryform.dateTimeEnd = this.time ? this.time[1] : null;
getUsageCensus(this.queryform).then(res=>{ this.queryform.productId == 1
let data = res.data.map(({businessName,propValue})=>({name:businessName,value:propValue * 100})) ? (this.queryform.businessCodeList = ["iDCardSignIn"])
this.initType(data) : "";
}) console.log(this.queryform);
}, getUsageCensus(this.queryform).then((res) => {
initWay(){ let data = res.data.map(({ businessName, propValue }) => ({
let chartDom = document.getElementById('way') name: businessName,
value: propValue * 100,
}));
this.initType(data);
});
},
initWay() {
let chartDom = document.getElementById("way");
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
title: { title: {
text: '取号方式分析', text: "取号方式分析",
left: 'center' left: "center",
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: 'center', left: "center",
itemWidth: 10, itemWidth: 10,
itemHeight: 10 itemHeight: 10,
}, },
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], color: [
series: [{ "#6395F9",
name: 'Access From', "#64DAAB",
type: 'pie', "#647798",
radius: '65%', "#F6C02D",
"#7567FA",
"#75CBED",
],
series: [
{
name: "Access From",
type: "pie",
radius: "65%",
label: { label: {
normal: { normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
length: 1 length: 1,
} },
}, },
data: [{ data: [
{
value: 1048, value: 1048,
name: 'Search Engine' name: "Search Engine",
}, },
{ {
value: 735, value: 735,
name: 'Direct' name: "Direct",
}, },
{ {
value: 580, value: 580,
name: 'Email' name: "Email",
}, },
{ {
value: 484, value: 484,
name: 'Union Ads' name: "Union Ads",
}, },
{ {
value: 300, value: 300,
name: 'Video Ads' name: "Video Ads",
} },
], ],
}] },
}) ],
});
}, },
initType(data) { initType(data) {
console.log(data) console.log(data);
let chartDom = document.getElementById('type') let chartDom = document.getElementById("type");
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
title: { title: {
text: this.queryform.productId==1?'取号类型分析':'功能使用分布', text: this.queryform.productId == 1 ? "取号类型分析" : "功能使用分布",
left: 'center' left: "center",
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: 'center', left: "center",
itemWidth: 10, itemWidth: 10,
itemHeight: 10 itemHeight: 10,
}, },
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], color: [
series: [{ "#6395F9",
type: 'pie', "#64DAAB",
radius: '65%', "#647798",
"#F6C02D",
"#7567FA",
"#75CBED",
],
series: [
{
type: "pie",
radius: "65%",
label: { label: {
normal: { normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
length: 1 length: 1,
} },
},
data: data,
}, },
data: data ],
}] });
})
}, },
initCanal() { initCanal() {
let chartDom = document.getElementById('canal') let chartDom = document.getElementById("canal");
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
myChart.setOption({ myChart.setOption({
title: { title: {
text: '取号渠道分析', text: "取号渠道分析",
left: 'center' left: "center",
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: 'center', left: "center",
itemWidth: 10, itemWidth: 10,
itemHeight: 10 itemHeight: 10,
}, },
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], color: [
series: [{ "#6395F9",
name: 'Access From', "#64DAAB",
type: 'pie', "#647798",
radius: '65%', "#F6C02D",
"#7567FA",
"#75CBED",
],
series: [
{
name: "Access From",
type: "pie",
radius: "65%",
label: { label: {
normal: { normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
length: 1 length: 1,
}
}, },
data: [{ },
data: [
{
value: 1048, value: 1048,
name: '终端取号' name: "终端取号",
}, },
{ {
value: 735, value: 735,
name: '在线取号' name: "在线取号",
} },
] ],
}] },
}) ],
} });
} },
}; },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page { .page {
height: calc(100% - 50px); height: calc(100% - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -222,10 +278,12 @@ ...@@ -222,10 +278,12 @@
justify-content: center; justify-content: center;
padding: 50px 0; padding: 50px 0;
#canal,#type,#way { #canal,
#type,
#way {
width: 30%; width: 30%;
height: 100%; height: 100%;
} }
} }
} }
</style> </style>
...@@ -14,7 +14,13 @@ ...@@ -14,7 +14,13 @@
<!-- <div class="f_center primary" @click="toTable">点击查看报表</div> --> <!-- <div class="f_center primary" @click="toTable">点击查看报表</div> -->
</a-col> </a-col>
<a-col :span="20"> <a-col :span="20">
<lineChart :id="`one_line`" :title="`近30日注册情况分析`" :datas="oneLineData" :height="200" :width="1420" /> <lineChart
:id="`one_line`"
:title="`近30日注册情况分析`"
:datas="oneLineData"
:height="200"
:width="1420"
/>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
...@@ -27,32 +33,69 @@ ...@@ -27,32 +33,69 @@
</template> </template>
<a-row> <a-row>
<a-col :span="8"> <a-col :span="8">
<map-chart :id="`one_map`" :datas="oneMapData" :height="400" :width="550" /> <map-chart
:id="`one_map`"
:datas="oneMapData"
:height="400"
:width="550"
/>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-table :rowKey="(record, index) => { return index }" :dataSource="provinces" <a-table
:columns="provincesColumns" :scroll="{ y: 300 }" :pagination="false"> :rowKey="
(record, index) => {
return index;
}
"
:dataSource="provinces"
:columns="provincesColumns"
:scroll="{ y: 300 }"
:pagination="false"
>
</a-table> </a-table>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<pieChart :id="`one_pie`" :height="400" :width="550" :datas="onePieData" /> <pieChart
</a-col> :id="`one_pie`"
<a-col :span="12"> :height="400"
<doublePieChart :id="`two_pie`" :height="300" :width="800" :datas="twoPieData" /> :width="550"
:datas="onePieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart :id="`one_bar`" :height="300" :width="800" :datas="oneBarData" /> <doublePieChart
:id="`two_pie`"
:height="300"
:width="800"
:datas="twoPieData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart :id="`two_bar`" :height="300" :width="800" :datas="twoBarData" /> <barChart
</a-col> :id="`one_bar`"
<a-col :span="12"> :height="300"
<pieChart :id="`three_pie`" :height="300" :width="800" :datas="threePieData" /> :width="800"
:datas="oneBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart
:id="`two_bar`"
:height="300"
:width="800"
:datas="twoBarData"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<pieChart
:id="`three_pie`"
:height="300"
:width="800"
:datas="threePieData"
/>
</a-col> </a-col>
<a-col :span="12"> </a-col>
<a-col :span="12"> </a-col>
</a-row> </a-row>
</a-card> </a-card>
<a-card :bordered="false" class="mb_15"> <a-card :bordered="false" class="mb_15">
...@@ -65,75 +108,126 @@ ...@@ -65,75 +108,126 @@
<a-row type="flex" align="middle"> <a-row type="flex" align="middle">
<a-row> <a-row>
<a-col :span="8"> <a-col :span="8">
<map-chart :id="`two_map`" :datas="oneMapData2" :height="400" :width="550" /> <map-chart
:id="`two_map`"
:datas="oneMapData2"
:height="400"
:width="550"
/>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-table :rowKey="(record, index) => { return index }" :dataSource="provinces2" <a-table
:columns="provincesColumns2" :pagination="false" :scroll="{ y: 300 }"> :rowKey="
(record, index) => {
return index;
}
"
:dataSource="provinces2"
:columns="provincesColumns2"
:pagination="false"
:scroll="{ y: 300 }"
>
</a-table> </a-table>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<pieChart :id="`four_pie`" :height="400" :width="550" :datas="onePieData2" /> <pieChart
</a-col> :id="`four_pie`"
<a-col :span="12"> :height="400"
<doublePieChart :id="`five_pie`" :height="300" :width="800" :datas="twoPieData2" /> :width="550"
</a-col> :datas="onePieData2"
<a-col :span="12"> />
<barChart :id="`six_bar`" :height="300" :width="800" :datas="oneBarData2" />
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart :id="`three_bar`" :height="300" :width="800" :datas="twoBarData2" /> <doublePieChart
:id="`five_pie`"
:height="300"
:width="800"
:datas="twoPieData2"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<pieChart :id="`six_pie`" :height="300" :width="800" :datas="threePieData2" /> <barChart
:id="`six_bar`"
:height="300"
:width="800"
:datas="oneBarData2"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart
:id="`three_bar`"
:height="300"
:width="800"
:datas="twoBarData2"
/>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<pieChart
:id="`six_pie`"
:height="300"
:width="800"
:datas="threePieData2"
/>
</a-col> </a-col>
<a-col :span="12"> </a-col>
<a-col :span="12"> </a-col>
</a-row> </a-row>
</a-row> </a-row>
</a-card> </a-card>
</div> </div>
</template> </template>
<script > <script>
import barChart from '../../business/Component/bar/index.vue' import barChart from "../../business/Component/bar/index.vue";
import doublePieChart from "../../business/Component/doublePie/index.vue" import doublePieChart from "../../business/Component/doublePie/index.vue";
import pieChart from "../../business/Component/pie/index.vue" import pieChart from "../../business/Component/pie/index.vue";
import lineChart from "../../business/Component/line/index.vue" import lineChart from "../../business/Component/line/index.vue";
import mapChart from "../../business/Component/map/index.vue" import mapChart from "../../business/Component/map/index.vue";
import moment from "moment" import moment from "moment";
import { import {
peopleQs, registerProvince, registerBwd, registerSex, registerAge, registerNation, provinceCase, bwdStatistic, peopleQs,
provinceStatistic, genderRateType, ageRate, TopNationStatistic, registerProvince,
} from "@/api/userPortrait.js" registerBwd,
registerSex,
registerAge,
registerNation,
provinceCase,
bwdStatistic,
provinceStatistic,
genderRateType,
ageRate,
TopNationStatistic,
} from "@/api/userPortrait.js";
export default { export default {
components: { components: {
mapChart, pieChart, lineChart, doublePieChart, barChart mapChart,
pieChart,
lineChart,
doublePieChart,
barChart,
}, },
data() { data() {
return { return {
options: [ options: [
{ {
value: '0', value: "0",
label: '今天', label: "今天",
}, },
{ {
value: '1', value: "1",
label: '近7日', label: "近7日",
}, },
{ {
value: '2', value: "2",
label: '近30日', label: "近30日",
}, },
{ {
value: '3', value: "3",
label: '近3个月', label: "近3个月",
}, },
{ {
value: '4', value: "4",
label: '本年度', label: "本年度",
}, },
], ],
oneLineData: {}, oneLineData: {},
...@@ -152,363 +246,417 @@ export default { ...@@ -152,363 +246,417 @@ export default {
provinces: [ provinces: [
{ {
ranking: 1, ranking: 1,
province: '四川省', province: "四川省",
people: '999', people: "999",
percent: '2' percent: "2",
}, },
{ {
ranking: 2, ranking: 2,
province: '四川省', province: "四川省",
people: '999', people: "999",
percent: '2' percent: "2",
}, },
], ],
provinces2: [ provinces2: [
{ {
ranking: 1, ranking: 1,
province: '四川省', province: "四川省",
people: '999', people: "999",
percent: '2' percent: "2",
}, },
{ {
ranking: 2, ranking: 2,
province: '四川省', province: "四川省",
people: '999', people: "999",
percent: '2' percent: "2",
}, },
], ],
provincesColumns: [ provincesColumns: [
{ {
key: 'ranking', key: "ranking",
title: '序号', title: "序号",
dataIndex: 'id', dataIndex: "id",
}, },
{ {
key: 'province', key: "province",
title: '省份', title: "省份",
dataIndex: 'province', dataIndex: "province",
}, },
{ {
key: 'value', key: "value",
title: '注册人数', title: "注册人数",
dataIndex: 'value', dataIndex: "value",
}, },
{ {
key: 'zb_lv', key: "zb_lv",
title: '注册占比', title: "注册占比",
dataIndex: 'zb_lv', dataIndex: "zb_lv",
customRender(text, record, index) { customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%" return parseFloat((text * 100).toFixed(2)) + "%";
} },
}, },
], ],
provincesColumns2: [ provincesColumns2: [
{ {
key: 'ranking', key: "ranking",
title: '序号', title: "序号",
dataIndex: 'id', dataIndex: "id",
}, },
{ {
key: 'province', key: "province",
title: '省份', title: "省份",
dataIndex: 'province', dataIndex: "province",
}, },
{ {
key: 'value', key: "value",
title: '办件人数', title: "办件人数",
dataIndex: 'value', dataIndex: "value",
}, },
{ {
key: 'nums_val', key: "nums_val",
title: '办件占比', title: "办件占比",
dataIndex: 'nums_val', dataIndex: "nums_val",
customRender(text, record, index) { customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%" return parseFloat((text * 100).toFixed(2)) + "%";
} },
}, },
], ],
takeNumber: '0', takeNumber: "0",
nowDate: '', nowDate: "",
massCount: '0',//群众总量 massCount: "0", //群众总量
timeArr: [],//群众注册时间 timeArr: [], //群众注册时间
doTotal: 0, doTotal: 0,
} };
},
created() {
}, },
created() {},
mounted() { mounted() {
this.getPeopleQs() this.getPeopleQs();
this.getRegisterProvince() this.getRegisterProvince();
this.getRegisterBwd() this.getRegisterBwd();
this.getRegisterSex() this.getRegisterSex();
this.getRegisterAge() this.getRegisterAge();
this.getRegisterNation() this.getRegisterNation();
this.getProvinceCase() this.getProvinceCase();
this.getProvinceStatistic() this.getProvinceStatistic();
this.getBwdStatistic() this.getBwdStatistic();
this.getGenderRateType() this.getGenderRateType();
this.getAgeRate() this.getAgeRate();
this.getTopNationStatistic() this.getTopNationStatistic();
this.nowDate = moment(new Date()).format('YYYY-MM-DD h:mm:ss') this.nowDate = moment(new Date()).format("YYYY-MM-DD h:mm:ss");
}, },
methods: { methods: {
toTable() { toTable() {
this.$router.push({ path: 'register' }) this.$router.push({ path: "register" });
}, },
//整体情况 //整体情况
async getPeopleQs() { async getPeopleQs() {
let res = await peopleQs({ siteid: localStorage.getItem('siteId') }) let res = await peopleQs({ siteid: localStorage.getItem("siteId") });
if (res.code == 1) { if (res.code == 1) {
this.massCount = res.data.count this.massCount = res.data.count;
let time = res.data.list?.map(i => { //循环获取时间 let time = res.data.list?.map((i) => {
return moment(i.datetime).format('MM-DD') //循环获取时间
}) return moment(i.datetime).format("MM-DD");
let take = [] });
let app = [] let take = [];
let Applets = [] let app = [];
res.data.list?.forEach(i => { let Applets = [];
i.row.forEach(j => { res.data.list?.forEach((i) => {
if (j.register_type == 'take') {//循环获取排号机注册情况 i.row.forEach((j) => {
return take.push(j.count) if (j.register_type == "take") {
//循环获取排号机注册情况
return take.push(j.count);
} }
if (j.register_type == 'app') {//循环获取自助终端注册情况 if (j.register_type == "app") {
return app.push(j.count) //循环获取自助终端注册情况
return app.push(j.count);
} }
if (j.register_type == 'Applets') {//循环获取微官网注册情况 if (j.register_type == "Applets") {
return Applets.push(j.count) //循环获取微官网注册情况
return Applets.push(j.count);
} }
}) });
}) });
this.oneLineData = { this.oneLineData = {
title: '近30日注册情况分析:', title: "近30日注册情况分析:",
legend: ['自助服务系统注册人数', '微官网注册人数', '排队系统注册人数'], legend: [
"自助服务系统注册人数",
"微官网注册人数",
"排队系统注册人数",
],
xData: time, xData: time,
dataList: [ dataList: [
{ name: '自助服务系统注册人数', data: app }, { name: "自助服务系统注册人数", data: app },
{ name: '微官网注册人数', data: Applets }, { name: "微官网注册人数", data: Applets },
{ name: '排队系统注册人数', data: take }, { name: "排队系统注册人数", data: take },
] ],
} };
this.$forceUpdate(this.oneLineData);
} }
}, },
//区域注册情况 //区域注册情况
async getRegisterProvince() { async getRegisterProvince() {
let res = await registerProvince({ siteid: localStorage.getItem('siteId') }) let res = await registerProvince({
siteid: localStorage.getItem("siteId"),
});
let arr2 = res.data.sort(function (a, b) { let arr2 = res.data.sort(function (a, b) {
return b.count - a.count; return b.count - a.count;
}) });
let arr = arr2.map((i, j) => { let arr = arr2.map((i, j) => {
i.id = j + 1 i.id = j + 1;
i.name = i.province i.name = i.province;
i.value = i.count i.value = i.count;
return i return i;
}) });
// console.log(arr) // console.log(arr)
this.oneMapData = { this.oneMapData = {
title: "注册用户地域分析", title: "注册用户地域分析",
data: arr data: arr,
} };
this.provinces = arr this.provinces = arr;
this.onePieData = { this.onePieData = {
title: '', title: "",
type: 'scroll', type: "scroll",
legend: arr.forEach(i => { return i.province }), legend: arr.forEach((i) => {
data: arr return i.province;
} }),
data: arr,
};
}, },
//注册分布情况 //注册分布情况
async getRegisterBwd() { async getRegisterBwd() {
let res = await registerBwd({ siteid: localStorage.getItem('siteId') }) let res = await registerBwd({ siteid: localStorage.getItem("siteId") });
this.twoPieData = { this.twoPieData = {
title: '本地人与外地人注册分布', title: "本地人与外地人注册分布",
pieName: '分布详情', pieName: "分布详情",
firstName: '宜宾市本地人注册占比', firstName: "宜宾市本地人注册占比",
firstVal: res.data.bd_lv, firstVal: res.data.bd_lv,
firstTotal: 1, firstTotal: 1,
secondName: '外地人注册占比', secondName: "外地人注册占比",
secondVal: res.data.wd_lv, secondVal: res.data.wd_lv,
secondTotal: 1, secondTotal: 1,
} };
}, },
//注册性别分布情况 //注册性别分布情况
async getRegisterSex() { async getRegisterSex() {
let res = await registerSex({ siteid: localStorage.getItem('siteId') }) let res = await registerSex({ siteid: localStorage.getItem("siteId") });
// console.log(res) // console.log(res)
if (res.data ? res.data.length > 0 : '') { if (res.data ? res.data.length > 0 : "") {
let man = res.data[0].row let man = res.data[0].row;
let woman = res.data[1].row let woman = res.data[1].row;
this.oneBarData = { this.oneBarData = {
title: '性别分布', title: "性别分布",
xData: ['', ''], xData: ["", ""],
data: [ data: [
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].count || 0, woman[1].count || 0] }, {
{ name: '微官网注册人数', type: 'bar', data: [man[2].count || 0, woman[2].count || 0] }, name: "自助服务系统注册人数",
{ name: '排队系统注册人数', type: 'bar', data: [man[0].count || 0, woman[0].count || 0] }, type: "bar",
] data: [man[1].count || 0, woman[1].count || 0],
} },
{
name: "微官网注册人数",
type: "bar",
data: [man[2].count || 0, woman[2].count || 0],
},
{
name: "排队系统注册人数",
type: "bar",
data: [man[0].count || 0, woman[0].count || 0],
},
],
};
} }
}, },
//注册年龄分布情况 //注册年龄分布情况
async getRegisterAge() { async getRegisterAge() {
let res = await registerAge({ siteid: localStorage.getItem('siteId') }) let res = await registerAge({ siteid: localStorage.getItem("siteId") });
// console.log(res) // console.log(res)
let age_area = res.data.map(i => { let age_area = res.data.map((i) => {
return i.age_area return i.age_area;
}) });
let total = 0 let total = 0;
let count = res.data.map(i => { let count = res.data.map((i) => {
total += i.nums total += i.nums;
return i.nums return i.nums;
}) });
// console.log(total) // console.log(total)
let zb = count.map(i => { let zb = count.map((i) => {
return parseFloat((i / total * 10000).toFixed(2)) return parseFloat(((i / total) * 10000).toFixed(2));
}) });
// console.log(zb) // console.log(zb)
this.twoBarData = { this.twoBarData = {
title: '年龄分布', title: "年龄分布",
xData: age_area, xData: age_area,
data: [ data: [
{ name: '办理次数', type: 'bar', data: count }, { name: "办理次数", type: "bar", data: count },
{ name: '占比', type: 'line', data: zb }, { name: "占比", type: "line", data: zb },
] ],
} };
}, },
//注册民族分布情况 //注册民族分布情况
async getRegisterNation() { async getRegisterNation() {
let res = await registerNation({ siteid: localStorage.getItem('siteId') }) let res = await registerNation({
siteid: localStorage.getItem("siteId"),
});
// console.log(res) // console.log(res)
res.data.forEach(i => { res.data.forEach((i) => {
i.name = i.idcard_Nation i.name = i.idcard_Nation;
i.value = i.count i.value = i.count;
}) });
// console.log(res.data) // console.log(res.data)
this.threePieData = { this.threePieData = {
title: '民族分布', title: "民族分布",
type: '', type: "",
legend: res.data, legend: res.data,
data: res.data data: res.data,
} };
}, },
//办件用户地域分析 //办件用户地域分析
async getProvinceCase() { async getProvinceCase() {
let res = await provinceCase({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await provinceCase({
siteid: localStorage.getItem("siteId"),
selected: 2,
});
// console.log(res) // console.log(res)
let arr2 = res.data.sort(function (a, b) { let arr2 = res.data.sort(function (a, b) {
return b.nums - a.nums; return b.nums - a.nums;
}) });
let arr = arr2.map((i, j) => { let arr = arr2.map((i, j) => {
i.id = j + 1 i.id = j + 1;
i.province = i.name i.province = i.name;
i.value = i.nums i.value = i.nums;
this.doTotal += i.nums this.doTotal += i.nums;
return i return i;
}) });
arr.forEach(i => { arr.forEach((i) => {
i.nums_val = i.nums / this.doTotal i.nums_val = i.nums / this.doTotal;
}) });
// console.log(arr) // console.log(arr)
this.oneMapData2 = { this.oneMapData2 = {
title: "办件用户地域分析", title: "办件用户地域分析",
data: arr data: arr,
} };
this.provinces2 = arr this.provinces2 = arr;
}, },
//办件用户地域分析 //办件用户地域分析
async getProvinceStatistic() { async getProvinceStatistic() {
let res = await provinceStatistic({ siteid: localStorage.getItem('siteId'), selected: 2, province: '四川省' }) let res = await provinceStatistic({
siteid: localStorage.getItem("siteId"),
selected: 2,
province: "四川省",
});
// console.log(res) // console.log(res)
res.data.forEach(i => { res.data.forEach((i) => {
i.value = i.count i.value = i.count;
}) });
this.onePieData2 = { this.onePieData2 = {
title: '', title: "",
type: 'scroll', type: "scroll",
legend: res.data, legend: res.data,
data: res.data data: res.data,
} };
}, },
//本外地分析 //本外地分析
async getBwdStatistic() { async getBwdStatistic() {
let res = await bwdStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await bwdStatistic({
siteid: localStorage.getItem("siteId"),
selected: 2,
});
// console.log(res) // console.log(res)
this.twoPieData2 = { this.twoPieData2 = {
title: '本地人与外地人办件分布', title: "本地人与外地人办件分布",
pieName: '分布详情', pieName: "分布详情",
firstName: '宜宾市本地人办件占比', firstName: "宜宾市本地人办件占比",
firstVal: res.data.bd_lv, firstVal: res.data.bd_lv,
firstTotal: 1, firstTotal: 1,
secondName: '外地人办件占比', secondName: "外地人办件占比",
secondVal: res.data.wd_lv, secondVal: res.data.wd_lv,
secondTotal: 1, secondTotal: 1,
} };
}, },
//性别办件分析 //性别办件分析
async getGenderRateType() { async getGenderRateType() {
let res = await genderRateType({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await genderRateType({
if (res.data ? res.data.length > 0 : '') { siteid: localStorage.getItem("siteId"),
let man = res.data[0].row selected: 2,
let woman = res.data[1].row });
if (res.data ? res.data.length > 0 : "") {
let man = res.data[0].row;
let woman = res.data[1].row;
this.oneBarData2 = { this.oneBarData2 = {
title: '性别分布', title: "性别分布",
xData: ['', ''], xData: ["", ""],
data: [ data: [
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].nums || 0, woman[1].nums || 0] }, {
{ name: '微官网注册人数', type: 'bar', data: [man[2].nums || 0, woman[2].nums || 0] }, name: "自助服务系统注册人数",
{ name: '排队系统注册人数', type: 'bar', data: [man[0].nums || 0, woman[0].nums || 0] }, type: "bar",
] data: [man[1].nums || 0, woman[1].nums || 0],
} },
{
name: "微官网注册人数",
type: "bar",
data: [man[2].nums || 0, woman[2].nums || 0],
},
{
name: "排队系统注册人数",
type: "bar",
data: [man[0].nums || 0, woman[0].nums || 0],
},
],
};
} }
}, },
//办件年龄分析 //办件年龄分析
async getAgeRate() { async getAgeRate() {
let res = await ageRate({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await ageRate({
let age_area = res.data.list.map(i => { siteid: localStorage.getItem("siteId"),
return i.age_area selected: 2,
}) });
let total = 0 let age_area = res.data.list.map((i) => {
let count = res.data.list.map(i => { return i.age_area;
total += i.nums });
return i.nums let total = 0;
}) let count = res.data.list.map((i) => {
total += i.nums;
return i.nums;
});
// console.log(total) // console.log(total)
let zb = count.map(i => { let zb = count.map((i) => {
return parseFloat((i / total * 10000).toFixed(2)) return parseFloat(((i / total) * 10000).toFixed(2));
}) });
// console.log(zb) // console.log(zb)
this.twoBarData2 = { this.twoBarData2 = {
title: '年龄分布', title: "年龄分布",
xData: age_area, xData: age_area,
data: [ data: [
{ name: '办理次数', type: 'bar', data: count }, { name: "办理次数", type: "bar", data: count },
{ name: '占比', type: 'line', data: zb }, { name: "占比", type: "line", data: zb },
] ],
} };
}, },
async getTopNationStatistic() { async getTopNationStatistic() {
let res = await TopNationStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await TopNationStatistic({
siteid: localStorage.getItem("siteId"),
selected: 2,
});
// console.log(res) // console.log(res)
res.data.forEach(i => { res.data.forEach((i) => {
i.name = i.idcard_Nation i.name = i.idcard_Nation;
i.value = i.count i.value = i.count;
}) });
// console.log(res.data) // console.log(res.data)
this.threePieData2 = { this.threePieData2 = {
title: '民族分布', title: "民族分布",
type: '', type: "",
legend: res.data, legend: res.data,
data: res.data data: res.data,
} };
}, },
} },
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
...@@ -554,15 +702,15 @@ export default { ...@@ -554,15 +702,15 @@ export default {
} }
.warning { .warning {
color: #FD6805 color: #fd6805;
} }
.primary { .primary {
color: #0595FD color: #0595fd;
} }
.success { .success {
color: #04CA8F color: #04ca8f;
} }
.h_200 { .h_200 {
...@@ -570,6 +718,6 @@ export default { ...@@ -570,6 +718,6 @@ export default {
} }
.mb_15 { .mb_15 {
margin-bottom: .9375rem; margin-bottom: 0.9375rem;
} }
</style> </style>
...@@ -361,6 +361,7 @@ export default { ...@@ -361,6 +361,7 @@ export default {
this.$emit("update", { total, time: this.searchForm.time }); this.$emit("update", { total, time: this.searchForm.time });
} }
this.loading = false; this.loading = false;
this.$forceUpdate();
}, },
// 翻页 // 翻页
......
...@@ -354,6 +354,7 @@ export default { ...@@ -354,6 +354,7 @@ export default {
this.$emit("update", { total, time: this.searchForm.time }); this.$emit("update", { total, time: this.searchForm.time });
} }
this.loading = false; this.loading = false;
this.$forceUpdate();
}, },
// 翻页 // 翻页
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment