Skip to content

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

工作台联调

上级 3a556f65
隐藏空白字符变更
内嵌 并排
正在显示 包含 268 行增加 和 312 行删除
src/views/dashboard/IndexChart.vue
浏览文件 @ d1cf4788
...@@ -2,378 +2,333 @@ ...@@ -2,378 +2,333 @@
<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,
ChartCard, ChartCard,
MiniArea, MiniArea,
MiniBar, MiniBar,
MiniProgress, MiniProgress,
RankList, RankList,
Bar, Bar,
Trend, Trend,
LineChartMultid, LineChartMultid,
HeadInfo 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() { async getDataStatistics() {
return { let { result } = await getDataStatisticsApi()
mapData: [], this.statistical = {
waitAuditList: [], settledNum: result.settledNum,
loading: true, communityNum: result.communityNum,
center: null, ownerNum: result.ownerNum,
rankList, monthOwnerNum: result.monthOwnerNum,
barData, monthSettledNum: result.monthSettledNum,
loginfo:{},
visitFields:['ip','visit'],
visitInfo:[],
indicator: <a-icon type="loading" style="font-size: 24px" spin />
} }
}, this.waitAuditList = result.waitAuditList
created() { this.mapData =
setTimeout(() => { result.propertySettledList.map((item) => {
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=> {
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) {
mapEcharts() { let that = this
// 获取地图数据 this.$confirm({
// 使用数据注册地图 title: '确认审核物业集团：' + record.propertyName + '?',
echarts.registerMap("china", chinaData); closable: true,
this.$nextTick(() => { okText: '审核通过',
// 初始化地图 cancelText: '审核驳回',
this.map = echarts.init(this.$refs["mapEcharts"]); onOk() {
// 设置基础配置项 return auditPropertyApi({
const option = { id: record.id,
areaColor: "#97bff7", auditStatus: 'auditPass',
// 悬浮窗 }).then((res) => {
tooltip: { that.getDataStatistics()
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}`; onCancel() {
}, return auditPropertyApi({
borderColor: "#fff", id: record.id,
textStyle: { auditStatus: 'refuse',
//color: "#fff", }).then((res) => {
fontSize: "13" 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: { borderColor: '#fff',
type: "map", textStyle: {
map: "china", //color: "#fff",
//height: "100%", fontSize: '13',
top: 0,
width: "50%",
roam: true,
zoom: 1,
scaleLimit: {
//滚轮缩放的极限控制
min: 0.6, //最小的缩放值
max: 20
},
// 地图区域的样式设置
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
areaColor: "#c1dbff"
}
}, },
// 要显示的散点数据 },
series: [ geo: {
{ type: 'map',
name: "社区分布数量图", map: 'china',
type: "scatter", //height: "100%",
coordinateSystem: "geo", //设置坐标系为 geo top: 0,
data: this.mapData, width: '50%',
itemStyle: { roam: true,
color: function (params) { zoom: 1,
//根据不同数据显示不同颜色的标记 scaleLimit: {
if (params.data.text.customerAccount >= 100) { //滚轮缩放的极限控制
return "#67c23a"; min: 0.6, //最小的缩放值
} else { max: 20,
return "#409eff"; },
} // 地图区域的样式设置
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.circle-cust{ .map-box {
position: relative; background-color: #fff;
top: 28px; padding: 20px;
left: -100%;
}
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item { .dealt-with {
display: inline-block; width: 100%;
margin-right: 24px; max-width: 100%;
overflow-x: auto;
display: flex;
a { .box {
margin-left: 24px; border: 1px solid #f5f5f5;
}
}
}
/* 首页访问量统计 */
.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 { .box-title {
background-color: #fff; font-weight: bold;
padding: 20px; padding-bottom: 10px;
margin-bottom: 10px;
.dealt-with { border-bottom: 1px solid #f1f1f1;
width: 100%; }
max-width: 100%; .wait-box {
overflow-x: auto; background-color: #fff;
display: flex; padding: 20px;
.content {
.box { width: 100%;
border: 1px solid #f5f5f5; //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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论