Skip to content

T
total-platform
提交 d1cf4788 authored 作者: 何忠建's avatar 何忠建
浏览文件
操作

工作台联调

上级 3a556f65
显示空白字符变更
内嵌 并排
正在显示 包含 182 行增加 和 226 行删除
src/views/dashboard/IndexChart.vue
浏览文件 @ d1cf4788
...@@ -2,184 +2,118 @@ ...@@ -2,184 +2,118 @@
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="入驻物业公司数量" :total="200 | NumberFormat"> <chart-card :loading="loading" title="入驻物业公司数量" :total="statistical.settledNum | NumberFormat">
<a-tooltip slot="action">
<a-icon type="container" />
</a-tooltip>
<div> <div>
<mini-bar :height="40" />
</div>
<template slot="footer">
<trend flag="up" style="margin-right: 16px;"> <trend flag="up" style="margin-right: 16px;">
<span slot="term">周同比</span> <span slot="term">月新增</span>
12% {{ statistical.monthSettledNum }}
</trend> </trend>
<trend flag="down"> </template>
<span slot="term">日同比</span>
11%
</trend>
</div>
<template slot="footer">日均销售额<span>￥ 234.56</span></template>
</chart-card> </chart-card>
</a-col> </a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计物业社区数量" :total="8846 | NumberFormat"> <chart-card :loading="loading" title="累计物业社区数量" :total="statistical.communityNum | NumberFormat">
<a-tooltip title="指标说明" slot="action"> <a-tooltip slot="action">
<a-icon type="info-circle-o" /> <a-icon type="line-chart" />
</a-tooltip> </a-tooltip>
<div> <div>
<mini-area /> <mini-area :height="40" />
</div> </div>
<template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template> <template slot="footer">
<div style="height: 22px;"></div>
</template>
</chart-card> </chart-card>
</a-col> </a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计小区数量" :total="6560 | NumberFormat"> <chart-card :loading="loading" title="累计小区数量" :total="statistical.communityNum | NumberFormat">
<a-tooltip title="指标说明" slot="action"> <a-tooltip slot="action">
<a-icon type="info-circle-o" /> <a-icon type="bar-chart" />
</a-tooltip> </a-tooltip>
<div> <div>
<mini-bar :height="40" /> <mini-bar :height="40" />
</div> </div>
<template slot="footer">转化率 <span>60%</span></template> <template slot="footer">
<div style="height: 22px;"></div>
</template>
</chart-card> </chart-card>
</a-col> </a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计业主数量" total="78%"> <chart-card :loading="loading" title="累计业主数量" :total="statistical.ownerNum | NumberFormat">
<a-tooltip title="指标说明" slot="action"> <a-tooltip slot="action">
<a-icon type="info-circle-o" /> <a-icon type="area-chart" />
</a-tooltip> </a-tooltip>
<div> <div>
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" /> <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
</div> </div>
<template slot="footer"> <template slot="footer">
<trend flag="down" style="margin-right: 16px;"> <trend flag="up" style="margin-right: 16px;">
<span slot="term">同周比</span> <span slot="term">月新增</span>
12% {{ statistical.monthOwnerNum }}
</trend>
<trend flag="up">
<span slot="term">日环比</span>
80%
</trend> </trend>
</template> </template>
</chart-card> </chart-card>
</a-col> </a-col>
</a-row> </a-row>
<!-- <div class="map-box"> <div class="wait-box" style="margin-bottom: 15px;">
<h3>待处理事务</h3> <h3 class="box-title">待处理事务（入驻待审核）</h3>
<div class="dealt-with"> <div class="content">
<div class="box"> <div class="item" v-for="(item, index) in waitAuditList" :key="index">
<h6>{{}}</h6> <p>入驻物业集团名称：{{ item.propertyName }}</p>
<p>申请入驻小区数量：{{ item.ontrialCommunityNum }}</p>
<p>申请入驻物业时间：{{ item.createTime }}</p>
<p>添加人：{{ item.createBy }}</p>
<a-button type="primary" size="small" @click="toOperation(item)">审核</a-button>
</div>
</div> </div>
</div> </div>
</div> -->
<div class="map-box"> <div class="map-box">
<h3>社区分布数量图</h3> <h3 class="box-title">社区分布数量图</h3>
<div ref="mapEcharts" class="map-echart" style="height: 500px"></div> <div ref="mapEcharts" class="map-echart" style="height: 500px"></div>
</div> </div>
<!-- <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额排行" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="销售趋势" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" :dataSource="barData"/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card> -->
<!-- <a-row>
<a-col :span="24">
<a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
<a-row>
<a-col :span="6">
<head-info title="今日IP" :content="loginfo.todayIp"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="environment" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="team" style="font-size: 24px" />
</a-spin>
</a-col>
<a-col :span="6">
<head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
<a-icon slot="indicator" type="rise" style="font-size: 24px" />
</a-spin>
</a-col>
</a-row>
<line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
</a-card>
</a-col>
</a-row> -->
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import chinaData from "@/assets/china.json"; //地图包 import chinaData from '@/assets/china.json' //地图包
import ChartCard from '@/components/ChartCard' import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col" import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from "ant-design-vue/es/tooltip/Tooltip" import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea' import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar' import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress' import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList' import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar' import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid' import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue' import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend' import Trend from '@/components/Trend'
import { getDataStatisticsApi, getLoginfo,getVisitInfo } from '@/api/api' import { getDataStatisticsApi, getLoginfo, getVisitInfo, auditPropertyApi } from '@/api/api'
const rankList = [] const rankList = []
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
rankList.push({ rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店', name: '白鹭岛 ' + (i + 1) + ' 号店',
total: 1234.56 - i * 100 total: 1234.56 - i * 100,
}) })
} }
const barData = [] const barData = []
for (let i = 0; i < 12; i += 1) { for (let i = 0; i < 12; i += 1) {
barData.push({ barData.push({
x: `${i + 1}月`, x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200 y: Math.floor(Math.random() * 1000) + 200,
}) })
} }
export default { export default {
name: "IndexChart", name: 'IndexChart',
components: { components: {
ATooltip, ATooltip,
ACol, ACol,
...@@ -191,177 +125,170 @@ import chinaData from "@/assets/china.json"; //地图包 ...@@ -191,177 +125,170 @@ import chinaData from "@/assets/china.json"; //地图包
Bar, Bar,
Trend, Trend,
LineChartMultid, LineChartMultid,
HeadInfo HeadInfo,
}, },
data() { data() {
return { return {
statistical: {},
mapData: [], mapData: [],
waitAuditList: [], waitAuditList: [],
loading: true, loading: true,
center: null, center: null,
rankList, rankList,
barData, barData,
loginfo:{}, loginfo: {},
visitFields:['ip','visit'], visitFields: ['ip', 'visit'],
visitInfo:[], visitInfo: [],
indicator: <a-icon type="loading" style="font-size: 24px" spin /> indicator: <a-icon type="loading" style="font-size: 24px" spin />,
} }
}, },
created() { created() {
setTimeout(() => { setTimeout(() => {
this.loading = !this.loading this.loading = !this.loading
}, 1000) }, 1000)
this.initLogInfo(); this.initLogInfo()
this.getDataStatistics() this.getDataStatistics()
}, },
methods: { methods: {
initLogInfo () { initLogInfo() {
getLoginfo(null).then((res)=>{ getLoginfo(null).then((res) => {
if(res.success){ if (res.success) {
Object.keys(res.result).forEach(key=>{ Object.keys(res.result).forEach((key) => {
res.result[key] =res.result[key]+"" res.result[key] = res.result[key] + ''
}) })
this.loginfo = res.result; this.loginfo = res.result
} }
}) })
getVisitInfo().then(res=>{ getVisitInfo().then((res) => {
if(res.success){ if (res.success) {
this.visitInfo = res.result; this.visitInfo = res.result
} }
}) })
}, },
async getDataStatistics() { async getDataStatistics() {
let {result} = await getDataStatisticsApi(); let { result } = await getDataStatisticsApi()
this.mapData = result.propertySettledList.map(item=> { this.statistical = {
settledNum: result.settledNum,
communityNum: result.communityNum,
ownerNum: result.ownerNum,
monthOwnerNum: result.monthOwnerNum,
monthSettledNum: result.monthSettledNum,
}
this.waitAuditList = result.waitAuditList
this.mapData =
result.propertySettledList.map((item) => {
return { return {
name: item.propertyName, name: item.propertyName,
value: [item.longitude, item.latitude], value: [item.longitude, item.latitude],
text: {...item} text: { ...item },
} }
}) || [] }) || []
this.mapEcharts() this.mapEcharts()
}, },
toOperation(record) {
let that = this
this.$confirm({
title: '确认审核物业集团：' + record.propertyName + '?',
closable: true,
okText: '审核通过',
cancelText: '审核驳回',
onOk() {
return auditPropertyApi({
id: record.id,
auditStatus: 'auditPass',
}).then((res) => {
that.getDataStatistics()
})
},
onCancel() {
return auditPropertyApi({
id: record.id,
auditStatus: 'refuse',
}).then((res) => {
that.getDataStatistics();
})
},
})
},
//地图 //地图
mapEcharts() { mapEcharts() {
// 获取地图数据 // 获取地图数据
// 使用数据注册地图 // 使用数据注册地图
echarts.registerMap("china", chinaData); echarts.registerMap('china', chinaData)
this.$nextTick(() => { this.$nextTick(() => {
// 初始化地图 // 初始化地图
this.map = echarts.init(this.$refs["mapEcharts"]); this.map = echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项 // 设置基础配置项
const option = { const option = {
areaColor: "#97bff7", areaColor: '#97bff7',
// 悬浮窗 // 悬浮窗
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
formatter: function (params) { formatter: function (params) {
return `公司：${params.data.name}</br>注册地址：${params.data.text.provinceName}${params.data.text.cityName}${params.data.text.countyName}</br>详细地址：${params.data.text.addressInfo}</br>联系人：${params.data.text.contactName}</br>联系电话：${params.data.text.contactPhone}`; return `物业名称：${params.data.name}</br>统一社会信用代码：${
params.data.text.creditCode
}</br>注册地址：${params.data.text.cityName}${params.data.text.countyName}</br>详细地址：${
params.data.text.addressInfo
}</br>联系人：${params.data.text.contactName}</br>联系电话：${
params.data.text.contactPhone
}</br>授权物业数量：${params.data.text.ontrialCommunityNum || 0}`
}, },
borderColor: "#fff", borderColor: '#fff',
textStyle: { textStyle: {
//color: "#fff", //color: "#fff",
fontSize: "13" fontSize: '13',
} },
}, },
geo: { geo: {
type: "map", type: 'map',
map: "china", map: 'china',
//height: "100%", //height: "100%",
top: 0, top: 0,
width: "50%", width: '50%',
roam: true, roam: true,
zoom: 1, zoom: 1,
scaleLimit: { scaleLimit: {
//滚轮缩放的极限控制 //滚轮缩放的极限控制
min: 0.6, //最小的缩放值 min: 0.6, //最小的缩放值
max: 20 max: 20,
}, },
// 地图区域的样式设置 // 地图区域的样式设置
itemStyle: { itemStyle: {
borderColor: "#fff", borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
areaColor: "#c1dbff" areaColor: '#c1dbff',
} },
}, },
// 要显示的散点数据 // 要显示的散点数据
series: [ series: [
{ {
name: "社区分布数量图", name: '社区分布数量图',
type: "scatter", type: 'scatter',
coordinateSystem: "geo", //设置坐标系为 geo coordinateSystem: 'geo', //设置坐标系为 geo
data: this.mapData, data: this.mapData,
itemStyle: { itemStyle: {
color: function (params) { color: function (params) {
//根据不同数据显示不同颜色的标记 //根据不同数据显示不同颜色的标记
if (params.data.text.customerAccount >= 100) { if (params.data.text.customerAccount >= 100) {
return "#67c23a"; return '#67c23a'
} else { } else {
return "#409eff"; return '#409eff'
}
}
} }
},
},
},
],
} }
]
};
// 将配置应用到地图上 // 将配置应用到地图上
this.map.setOption(option); this.map.setOption(option)
}); })
}, },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.circle-cust{ .map-box {
position: relative;
top: 28px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
/* 首页访问量统计 */
.head-info {
position: relative;
text-align: left;
padding: 0 32px 0 0;
min-width: 125px;
&.center {
text-align: center;
padding: 0 32px;
}
span {
color: rgba(0, 0, 0, .45);
display: inline-block;
font-size: .95rem;
line-height: 42px;
margin-bottom: 4px;
}
p {
line-height: 42px;
margin: 0;
a {
font-weight: 600;
font-size: 1rem;
}
}
}
.map-box {
background-color: #fff; background-color: #fff;
padding: 20px; padding: 20px;
...@@ -375,5 +302,33 @@ import chinaData from "@/assets/china.json"; //地图包 ...@@ -375,5 +302,33 @@ import chinaData from "@/assets/china.json"; //地图包
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
} }
} }
}
.box-title {
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
}
.wait-box {
background-color: #fff;
padding: 20px;
.content {
width: 100%;
//height: 400px;
max-height: 400px;
overflow-y: auto;
.item {
padding: 10px 15px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #f1f1f1;
width: 31.33%;
margin: 1%;
float: left;
p {
margin-bottom: 0.4em;
}
}
} }
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论