Skip to content

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

工作台联调

上级 3a556f65
隐藏空白字符变更
内嵌 并排
正在显示 包含 268 行增加 和 312 行删除
src/views/dashboard/IndexChart.vue
浏览文件 @ d1cf4788
......@@ -2,378 +2,333 @@
<div class="page-header-index-wide">
<a-row :gutter="24">
<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>
<mini-bar :height="40" />
</div>
<template slot="footer">
<trend flag="up" style="margin-right: 16px;">
<span slot="term">周同比</span>
12%
<span slot="term">月新增</span>
{{ statistical.monthSettledNum }}
</trend>
<trend flag="down">
<span slot="term">日同比</span>
11%
</trend>
</div>
<template slot="footer">日均销售额<span>￥ 234.56</span></template>
</template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计物业社区数量" :total="8846 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
<chart-card :loading="loading" title="累计物业社区数量" :total="statistical.communityNum | NumberFormat">
<a-tooltip slot="action">
<a-icon type="line-chart" />
</a-tooltip>
<div>
<mini-area />
<mini-area :height="40" />
</div>
<template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template>
<template slot="footer">
<div style="height: 22px;"></div>
</template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计小区数量" :total="6560 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
<chart-card :loading="loading" title="累计小区数量" :total="statistical.communityNum | NumberFormat">
<a-tooltip slot="action">
<a-icon type="bar-chart" />
</a-tooltip>
<div>
<mini-bar :height="40" />
</div>
<template slot="footer">转化率 <span>60%</span></template>
<template slot="footer">
<div style="height: 22px;"></div>
</template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="累计业主数量" total="78%">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
<chart-card :loading="loading" title="累计业主数量" :total="statistical.ownerNum | NumberFormat">
<a-tooltip slot="action">
<a-icon type="area-chart" />
</a-tooltip>
<div>
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
</div>
<template slot="footer">
<trend flag="down" style="margin-right: 16px;">
<span slot="term">同周比</span>
12%
</trend>
<trend flag="up">
<span slot="term">日环比</span>
80%
<trend flag="up" style="margin-right: 16px;">
<span slot="term">月新增</span>
{{ statistical.monthOwnerNum }}
</trend>
</template>
</chart-card>
</a-col>
</a-row>
<!-- <div class="map-box">
<h3>待处理事务</h3>
<div class="dealt-with">
<div class="box">
<h6>{{}}</h6>
<div class="wait-box" style="margin-bottom: 15px;">
<h3 class="box-title">待处理事务（入驻待审核）</h3>
<div class="content">
<div class="item" v-for="(item, index) in waitAuditList" :key="index">
<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 class="map-box">
<h3>社区分布数量图</h3>
<h3 class="box-title">社区分布数量图</h3>
<div ref="mapEcharts" class="map-echart" style="height: 500px"></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>
</template>
<script>
import * as echarts from "echarts";
import chinaData from "@/assets/china.json"; //地图包
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import * as echarts from 'echarts'
import chinaData from '@/assets/china.json' //地图包
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend'
import { getDataStatisticsApi, getLoginfo,getVisitInfo } from '@/api/api'
import Trend from '@/components/Trend'
import { getDataStatisticsApi, getLoginfo, getVisitInfo, auditPropertyApi } from '@/api/api'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店',
total: 1234.56 - i * 100
})
}
const barData = []
for (let i = 0; i < 12; i += 1) {
barData.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200
})
}
export default {
name: "IndexChart",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
HeadInfo
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i + 1) + ' 号店',
total: 1234.56 - i * 100,
})
}
const barData = []
for (let i = 0; i < 12; i += 1) {
barData.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200,
})
}
export default {
name: 'IndexChart',
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
HeadInfo,
},
data() {
return {
statistical: {},
mapData: [],
waitAuditList: [],
loading: true,
center: null,
rankList,
barData,
loginfo: {},
visitFields: ['ip', 'visit'],
visitInfo: [],
indicator: <a-icon type="loading" style="font-size: 24px" spin />,
}
},
created() {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
this.initLogInfo()
this.getDataStatistics()
},
methods: {
initLogInfo() {
getLoginfo(null).then((res) => {
if (res.success) {
Object.keys(res.result).forEach((key) => {
res.result[key] = res.result[key] + ''
})
this.loginfo = res.result
}
})
getVisitInfo().then((res) => {
if (res.success) {
this.visitInfo = res.result
}
})
},
data() {
return {
mapData: [],
waitAuditList: [],
loading: true,
center: null,
rankList,
barData,
loginfo:{},
visitFields:['ip','visit'],
visitInfo:[],
indicator: <a-icon type="loading" style="font-size: 24px" spin />
async getDataStatistics() {
let { result } = await getDataStatisticsApi()
this.statistical = {
settledNum: result.settledNum,
communityNum: result.communityNum,
ownerNum: result.ownerNum,
monthOwnerNum: result.monthOwnerNum,
monthSettledNum: result.monthSettledNum,
}
},
created() {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
this.initLogInfo();
this.getDataStatistics()
},
methods: {
initLogInfo () {
getLoginfo(null).then((res)=>{
if(res.success){
Object.keys(res.result).forEach(key=>{
res.result[key] =res.result[key]+""
})
this.loginfo = res.result;
}
})
getVisitInfo().then(res=>{
if(res.success){
this.visitInfo = res.result;
}
})
},
async getDataStatistics() {
let {result} = await getDataStatisticsApi();
this.mapData = result.propertySettledList.map(item=> {
this.waitAuditList = result.waitAuditList
this.mapData =
result.propertySettledList.map((item) => {
return {
name: item.propertyName,
value: [item.longitude, item.latitude],
text: {...item}
text: { ...item },
}
}) || []
this.mapEcharts()
},
//地图
mapEcharts() {
// 获取地图数据
// 使用数据注册地图
echarts.registerMap("china", chinaData);
this.$nextTick(() => {
// 初始化地图
this.map = echarts.init(this.$refs["mapEcharts"]);
// 设置基础配置项
const option = {
areaColor: "#97bff7",
// 悬浮窗
tooltip: {
trigger: "item",
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}`;
},
borderColor: "#fff",
textStyle: {
//color: "#fff",
fontSize: "13"
}
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() {
// 获取地图数据
// 使用数据注册地图
echarts.registerMap('china', chinaData)
this.$nextTick(() => {
// 初始化地图
this.map = echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项
const option = {
areaColor: '#97bff7',
// 悬浮窗
tooltip: {
trigger: 'item',
formatter: function (params) {
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}`
},
geo: {
type: "map",
map: "china",
//height: "100%",
top: 0,
width: "50%",
roam: true,
zoom: 1,
scaleLimit: {
//滚轮缩放的极限控制
min: 0.6, //最小的缩放值
max: 20
},
// 地图区域的样式设置
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
areaColor: "#c1dbff"
}
borderColor: '#fff',
textStyle: {
//color: "#fff",
fontSize: '13',
},
// 要显示的散点数据
series: [
{
name: "社区分布数量图",
type: "scatter",
coordinateSystem: "geo", //设置坐标系为 geo
data: this.mapData,
itemStyle: {
color: function (params) {
//根据不同数据显示不同颜色的标记
if (params.data.text.customerAccount >= 100) {
return "#67c23a";
} else {
return "#409eff";
}
},
geo: {
type: 'map',
map: 'china',
//height: "100%",
top: 0,
width: '50%',
roam: true,
zoom: 1,
scaleLimit: {
//滚轮缩放的极限控制
min: 0.6, //最小的缩放值
max: 20,
},
// 地图区域的样式设置
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
areaColor: '#c1dbff',
},
},
// 要显示的散点数据
series: [
{
name: '社区分布数量图',
type: 'scatter',
coordinateSystem: 'geo', //设置坐标系为 geo
data: this.mapData,
itemStyle: {
color: function (params) {
//根据不同数据显示不同颜色的标记
if (params.data.text.customerAccount >= 100) {
return '#67c23a'
} else {
return '#409eff'
}
}
}
]
};
// 将配置应用到地图上
this.map.setOption(option);
});
},
}
}
},
},
},
],
}
// 将配置应用到地图上
this.map.setOption(option)
})
},
},
}
</script>
<style lang="less" scoped>
.circle-cust{
position: relative;
top: 28px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.map-box {
background-color: #fff;
padding: 20px;
.extra-item {
display: inline-block;
margin-right: 24px;
.dealt-with {
width: 100%;
max-width: 100%;
overflow-x: auto;
display: flex;
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;
}
.box {
border: 1px solid #f5f5f5;
}
}
.map-box {
background-color: #fff;
padding: 20px;
.dealt-with {
width: 100%;
max-width: 100%;
overflow-x: auto;
display: flex;
.box {
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>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论