@@ -864,7 +864,7 @@ export function theCirculation(query) { | |||||
// 更新记录列表 | // 更新记录列表 | ||||
export function updateListApi(data) { | export function updateListApi(data) { | ||||
return request({ | return request({ | ||||
url: 'autoSR/api/zkMessage/messagePage', | url: 'autoSR/api/zkMessage/findByPage', | ||||
method: 'get', | method: 'get', | ||||
params: data | params: data | ||||
}) | }) | ||||
@@ -892,4 +892,23 @@ export function updateDelApi(params) { | |||||
method: 'get', | method: 'get', | ||||
params | params | ||||
}) | }) | ||||
} | |||||
// 升级公告 | |||||
export function messageList(params) { | |||||
return request({ | |||||
url: 'autoSR/api/zkMessage/messageList', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
// 升级公告更新阅读 | |||||
export function updateRead(params) { | |||||
return request({ | |||||
url: 'autoSR/api/zkMessage/updateFlag', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | } |
@@ -21,6 +21,10 @@ import basicContainer from './components/basic-container/main' | |||||
import api from './api' | import api from './api' | ||||
import 'echarts' | |||||
import ECharts from 'vue-echarts' | |||||
Vue.component('v-chart', ECharts) | |||||
import AudioPlayer from '@liripeng/vue-audio-player' | import AudioPlayer from '@liripeng/vue-audio-player' | ||||
// import '@liripeng/vue-audio-player/lib/vue-audio-player.css' | // import '@liripeng/vue-audio-player/lib/vue-audio-player.css' | ||||
@@ -88,23 +88,43 @@ | |||||
</div> | </div> | ||||
</el-tooltip> | </el-tooltip> | ||||
<!-- 暂时注释下一版本开发上线 --> | <!-- 暂时注释下一版本开发上线 --> | ||||
<!-- <el-popover placement="bottom" trigger="hover" width="350"> | <el-popover placement="bottom" trigger="hover" width="350" @show="getMessage"> | ||||
<el-table :data="gridData" @row-click="msgTap"> | <el-tabs v-model="activeName" @tab-click="handleClick"> | ||||
<el-table-column | <el-tab-pane label="接待报告" name="first"> | ||||
width="324" | <el-table :data="gridData" @row-click="msgTaps"> | ||||
property="date" | <el-table-column | ||||
:show-header="false" | width="324" | ||||
> | property="date" | ||||
<template slot-scope="scope"> | :show-header="false" | ||||
<div class="date"> | > | ||||
<span>{{ scope.row.dates }}</span> | <template slot-scope="scope"> | ||||
<span>{{ scope.row.date }}</span> | <div class="date"> | ||||
</div> | <span>{{ scope.row.dates }}</span> | ||||
</template> | <span>{{ scope.row.date }}</span> | ||||
</el-table-column> | </div> | ||||
</el-table> | </template> | ||||
<i slot="reference" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i> | </el-table-column> | ||||
</el-popover> --> | </el-table> | ||||
</el-tab-pane> | |||||
<el-tab-pane label="升级公告" name="second"> | |||||
<el-table :data="gridData" @row-click="msgTap"> | |||||
<el-table-column | |||||
width="324" | |||||
property="date" | |||||
:show-header="false" | |||||
> | |||||
<template slot-scope="scope"> | |||||
<div class="date"> | |||||
<span>{{ scope.row.title }}</span> | |||||
<span>{{ scope.row.createTime }}</span> | |||||
</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
</el-tab-pane> | |||||
</el-tabs> | |||||
<i slot="reference" @click="toMessageList" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i> | |||||
</el-popover> | |||||
<el-tooltip | <el-tooltip | ||||
v-if="showTheme" | v-if="showTheme" | ||||
@@ -188,40 +208,8 @@ export default { | |||||
companyName: localStorage.getItem("topName"), | companyName: localStorage.getItem("topName"), | ||||
orgType: localStorage.getItem("orgType"), | orgType: localStorage.getItem("orgType"), | ||||
info: {}, | info: {}, | ||||
gridData: [ | activeName: 'first', | ||||
{ | gridData: [], // 消息列表 | ||||
date: '121', | |||||
dates: '阿达萨达撒', | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '122' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '132' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '125' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '126' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '172' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '182' | |||||
}, | |||||
{ | |||||
dates: '阿达萨达撒', | |||||
date: '120' | |||||
}, | |||||
] | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -254,12 +242,45 @@ export default { | |||||
this.info = getStore({ name: "userInfo" }); | this.info = getStore({ name: "userInfo" }); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
handleClick() {}, | |||||
// 获取升级消息列表 | |||||
getMessage() { | |||||
// 固定获取当前的项目的 | |||||
let paramsData = { | |||||
id: '', // | |||||
num: 1, // 第几页 | |||||
size: 10, // 条数 | |||||
} | |||||
this.$api.http.messageList(paramsData).then(res => { | |||||
console.log(res, 'asdkdakl;asdadl;skdasl;adskl;sadkl;dsak;ldsa;lksd') | |||||
if (res.success) { | |||||
this.gridData = res.data.list.records | |||||
} | |||||
}).catch(e => { | |||||
console.log(e) | |||||
}) | |||||
}, | |||||
// 跳转公告列表页面 | |||||
toMessageList() { | |||||
this.$router.push('/message') | |||||
}, | |||||
// 弹窗消息点击触发事件 | |||||
msgTaps(e) { | |||||
console.log(e, 'asdjilksajl') | |||||
return | |||||
// 日报 | |||||
// this.$router.push('/reportExcel/dayReport') | |||||
// 周报 | |||||
// this.$router.push('/reportExcel/weekReport') | |||||
}, | |||||
// 弹窗消息点击触发事件 | // 弹窗消息点击触发事件 | ||||
msgTap(e) { | msgTap(e) { | ||||
console.log(e, 'asdjilksajl') | console.log(e, 'asdjilksajl') | ||||
this.$router.push('/message') | this.$store.commit('setMessage', e) | ||||
this.$router.push('/message/detail') | |||||
}, | }, | ||||
handleScreen() { | handleScreen() { | ||||
@@ -14,12 +14,36 @@ export default [{ | |||||
path: '/wel', | path: '/wel', | ||||
component: Layout, | component: Layout, | ||||
redirect: '/wel/index', | redirect: '/wel/index', | ||||
children: [{ | children: [ | ||||
path: 'index', | { | ||||
name: '首页', | path: 'index', | ||||
component: () => | name: '首页', | ||||
import(/* webpackChunkName: "views" */ '@/page/wel') | component: () => | ||||
}] | import(/* webpackChunkName: "views" */ '@/page/wel') | ||||
}, | |||||
{ | |||||
path: '/message', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/msg/index'), | |||||
name: '公告列表', | |||||
}, | |||||
{ | |||||
path: '/message/detail', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/msg/detail'), | |||||
name: '公告详情', | |||||
}, | |||||
{ | |||||
path: '/reportExcel/dayReport', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/reportExcel/dayReport'), | |||||
name: '报告详情', // 日报 | |||||
}, | |||||
{ | |||||
path: '/reportExcel/weekReport', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/reportExcel/weekReport'), | |||||
name: '报告详情', // 周报 | |||||
} | |||||
] | |||||
}, | }, | ||||
{ | { | ||||
path: '/lock', | path: '/lock', | ||||
@@ -134,17 +158,4 @@ export default [{ | |||||
isAuth: false | isAuth: false | ||||
} | } | ||||
}, | }, | ||||
{ | |||||
path: '/message', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/msg/index'), | |||||
name: '公告列表', | |||||
}, | |||||
{ | |||||
path: '/message/detail', | |||||
component: () => import(/* webpackChunkName: "views" */ '@/views/msg/detail'), | |||||
name: '公告详情', | |||||
} | |||||
] | ] |
@@ -22,6 +22,6 @@ const getters = { | |||||
menuAll: state => state.user.menuAll, | menuAll: state => state.user.menuAll, | ||||
logsList: state => state.logs.logsList, | logsList: state => state.logs.logsList, | ||||
logsLen: state => state.logs.logsList.length || 0, | logsLen: state => state.logs.logsList.length || 0, | ||||
logsFlag: (state, getters) => getters.logsLen === 0 | logsFlag: (state, getters) => getters.logsLen === 0, | ||||
} | } | ||||
export default getters | export default getters |
@@ -8,13 +8,22 @@ import getters from './getters' | |||||
Vue.use(Vuex) | Vue.use(Vuex) | ||||
const store = new Vuex.Store({ | const store = new Vuex.Store({ | ||||
state: { | |||||
messageObj: {}, // 信息对象 | |||||
}, | |||||
modules: { | modules: { | ||||
user, | user, | ||||
common, | common, | ||||
logs, | logs, | ||||
tags | tags | ||||
}, | }, | ||||
getters | getters, | ||||
mutations: { | |||||
// 储存消息详情 | |||||
setMessage(state, obj) { | |||||
state.messageObj = obj | |||||
} | |||||
} | |||||
}) | }) | ||||
export default store | export default store |
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div class="box-center"> | <div class="box-center"> | ||||
<div class="edit_container" style="margin-top:50px;"> | <div class="edit_container" style="margin-top: 50px"> | ||||
<div id="editor"></div> | <div id="editor"></div> | ||||
</div> | </div> | ||||
<div style="margin-top: 10px"> | <div style="margin-top: 10px"> | ||||
@@ -15,7 +15,7 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
content: ``, | content: ``, | ||||
editor:null, | editor: null, | ||||
}; | }; | ||||
}, | }, | ||||
@@ -26,16 +26,16 @@ export default { | |||||
editor.config.placeholder = "placeholder"; | editor.config.placeholder = "placeholder"; | ||||
// 配置 server 接口地址 | // 配置 server 接口地址 | ||||
// editor.config.uploadImgServer = "/upload-img"; | // editor.config.uploadImgServer = "/upload-img"; | ||||
editor.config.uploadImgShowBase64 = true | editor.config.uploadImgShowBase64 = true; | ||||
editor.config.zIndex = 500 | editor.config.zIndex = 500; | ||||
editor.create(); | editor.create(); | ||||
this.editor=editor | this.editor = editor; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
upload(){ | upload() { | ||||
let str=this.editor.txt.html() | let str = this.editor.txt.html(); | ||||
console.log(str); | console.log(str); | ||||
} | }, | ||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -46,5 +46,38 @@ export default { | |||||
padding: 15px; | padding: 15px; | ||||
min-width: 1000px; | min-width: 1000px; | ||||
padding-bottom: 100px; | padding-bottom: 100px; | ||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
} | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.div-lab { | |||||
display: flex; | |||||
margin: 5px; | |||||
} | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.cen-tab { | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #ffffff; | |||||
margin-top: 15px; | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -1,24 +1,16 @@ | |||||
<template> | <template> | ||||
<div class="app-container calendar-list-container"> | <div class="app-container calendar-list-container"> | ||||
<!-- 顶部导航栏 --> | |||||
<div class="avue-layout"> | |||||
<div class="avue-left"> | |||||
<!-- 左侧导航栏 --> | |||||
<logo /> | |||||
</div> | |||||
</div> | |||||
<div class="avue-header"> | |||||
<top /> | |||||
</div> | |||||
<basic-container> | <basic-container> | ||||
<template> <div v-html="detail"></div> </template> | <div class="top"> | ||||
<span class="big">{{ objData.title }}</span> | |||||
<span class="desc">{{ objData.createTime }}</span> | |||||
</div> | |||||
<template> <div v-html="objData.content"></div> </template> | |||||
</basic-container> | </basic-container> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import top from "@/page/index/top/"; | |||||
import logo from "@/page/index/logo"; | |||||
export default { | export default { | ||||
name: "Index", | name: "Index", | ||||
provide() { | provide() { | ||||
@@ -27,16 +19,32 @@ export default { | |||||
}; | }; | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return {}; | ||||
detail: "详情内容<br/>文章内容巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉", | |||||
}; | |||||
}, | |||||
components: { | |||||
top, | |||||
logo, | |||||
}, | }, | ||||
computed: { | |||||
objData() { | |||||
return this.$store.state.messageObj | |||||
} | |||||
} | |||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped></style> | <style lang="scss" scoped> | ||||
.top { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.big { | |||||
font-size: 18px; | |||||
font-weight: bold; | |||||
} | |||||
.desc { | |||||
margin-top: 1em; | |||||
font-size: 14px; | |||||
color: #999999; | |||||
} | |||||
} | |||||
</style> |
@@ -1,16 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="app-container calendar-list-container"> | <div class="app-container calendar-list-container"> | ||||
<!-- 顶部导航栏 --> | |||||
<div class="avue-layout"> | |||||
<div class="avue-left"> | |||||
<!-- 左侧导航栏 --> | |||||
<logo /> | |||||
</div> | |||||
</div> | |||||
<div class="avue-header"> | |||||
<top /> | |||||
</div> | |||||
<basic-container> | <basic-container> | ||||
<template> | <template> | ||||
<!-- 内容盒子 --> | <!-- 内容盒子 --> | ||||
@@ -24,11 +13,11 @@ | |||||
<el-table-column> | <el-table-column> | ||||
<template slot-scope="scope"> | <template slot-scope="scope"> | ||||
<div class="line-box"> | <div class="line-box"> | ||||
<div class="title point">{{ scope.row.address }}</div> | <div class="title" :class="{point: scope.row.readFlag == 0}">{{ scope.row.title }}</div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
</el-table-column> | </el-table-column> | ||||
<el-table-column prop="date" width="300"> </el-table-column> | <el-table-column prop="createTime" width="300"> </el-table-column> | ||||
</el-table> | </el-table> | ||||
</div> | </div> | ||||
@@ -37,11 +26,11 @@ | |||||
<el-pagination | <el-pagination | ||||
@size-change="handleSizeChange" | @size-change="handleSizeChange" | ||||
@current-change="handleCurrentChange" | @current-change="handleCurrentChange" | ||||
:current-page="currentPage4" | :current-page="currentPage" | ||||
:page-sizes="[10, 20, 30, 40]" | :page-sizes="[10, 20, 30, 40]" | ||||
:page-size="10" | :page-size="paramsObj.size" | ||||
layout="total, sizes, prev, pager, next, jumper" | layout="total, sizes, prev, pager, next, jumper" | ||||
:total="100" | :total="total" | ||||
> | > | ||||
</el-pagination> | </el-pagination> | ||||
</div> | </div> | ||||
@@ -52,74 +41,69 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import top from "@/page/index/top/"; | |||||
import logo from "@/page/index/logo"; | |||||
export default { | export default { | ||||
components: { | name: "Index", | ||||
top, | |||||
logo, | |||||
}, | |||||
name: 'Index', | |||||
provide() { | provide() { | ||||
return { | return { | ||||
Index: this | Index: this, | ||||
}; | }; | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
currentPage4: 1, | currentPage: 1, | ||||
tableData: [ | tableData: [], // 数据列表数据 | ||||
{ | paramsObj: { | ||||
date: "2016-05-02", | // 当前页面的参数 | ||||
name: "王小虎", | num: 1, | ||||
province: "上海", | size: 10, | ||||
city: "普陀区", | }, | ||||
address: "上海市普陀区金沙江路 1518 弄", | pageObj: {}, // 当前列表页的全部数据 | ||||
zip: 200333, | |||||
tag: "家", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
province: "上海", | |||||
city: "普陀区", | |||||
address: "上海市普陀区金沙江路 1517 弄", | |||||
zip: 200333, | |||||
tag: "公司", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
province: "上海", | |||||
city: "普陀区", | |||||
address: "上海市普陀区金沙江路 1519 弄", | |||||
zip: 200333, | |||||
tag: "家", | |||||
}, | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
province: "上海", | |||||
city: "普陀区", | |||||
address: "上海市普陀区金沙江路 1516 弄", | |||||
zip: 200333, | |||||
tag: "公司", | |||||
}, | |||||
], | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | |||||
// 数据总条数 | |||||
total() { | |||||
return this.pageObj.list.total | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.getMessageList() | |||||
}, | |||||
methods: { | methods: { | ||||
// 获取公告列表 | |||||
getMessageList() { | |||||
this.$api.http | |||||
.messageList(this.paramsObj) | |||||
.then((res) => { | |||||
if (res.success) { | |||||
this.tableData = res.data.list.records; | |||||
this.pageObj = res.data | |||||
} | |||||
}) | |||||
.catch((e) => { | |||||
console.log(e); | |||||
}); | |||||
}, | |||||
// 跳转详情页面 | // 跳转详情页面 | ||||
toDetail(item) { | toDetail(item) { | ||||
console.log(item, "123"); | this.$store.commit('setMessage', item) | ||||
this.$router.push("/message/detail"); | this.$router.push("/message/detail"); | ||||
}, | }, | ||||
// 改变当前分页条数 | |||||
handleSizeChange(val) { | handleSizeChange(val) { | ||||
console.log(`每页 ${val} 条`); | console.log(`每页 ${val} 条`); | ||||
this.paramsObj.size = val | |||||
this.getMessageList() | |||||
}, | }, | ||||
handleCurrentChange(val) { | handleCurrentChange(val) { | ||||
console.log(`当前页: ${val}`); | this.paramsObj.num = val | ||||
this.getMessageList() | |||||
}, | }, | ||||
}, | }, | ||||
}; | }; | ||||
@@ -0,0 +1,229 @@ | |||||
<template> | |||||
<div class="pages"> | |||||
<div class="page-box"> | |||||
<div class="head-box"> | |||||
<p class="h-item"> | |||||
<span class="titles">桃源山庄数智工牌日报</span> | |||||
<span>01月24日</span> | |||||
</p> | |||||
<p class="h-item" style="padding: 8px 0 0 0"> | |||||
<span class="times">生成时间:2022-01-30 8:00</span> | |||||
</p> | |||||
</div> | |||||
<!-- 内容部分 --> | |||||
<div class="page-contanier"> | |||||
<div class="item"> | |||||
<span class="serial">01</span> | |||||
<div class="texts">接待量 100</div> | |||||
<div class="texts">有效接待 80</div> | |||||
<div class="texts">有效接待率 80</div> | |||||
<div class="texts">对比昨天 -5%</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">02</span> | |||||
<div class="texts">销讲执行率 100</div> | |||||
<div class="texts">对比昨天 -5%</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">03</span> | |||||
<div class="texts">销讲执行率 100</div> | |||||
<div class="texts">对比昨天 -5%</div> | |||||
</div> | |||||
<div class="item littles"> | |||||
<span class="serial">04</span> | |||||
<div class="texts">销讲维度执行前三:</div> | |||||
<div class="list"> | |||||
<div class="list-item"> | |||||
<span class="left">1</span> | |||||
<span class="right">产品设计(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">2</span> | |||||
<span class="right">沙盘讲解(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">3</span> | |||||
<span class="right">品牌介绍(100%)</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="item littles"> | |||||
<span class="serial">05</span> | |||||
<div class="texts">销讲维度执行弱项前三:</div> | |||||
<div class="list"> | |||||
<div class="list-item"> | |||||
<span class="left">1</span> | |||||
<span class="right">产品设计(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">2</span> | |||||
<span class="right">沙盘讲解(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">3</span> | |||||
<span class="right">品牌介绍(100%)</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="item littles"> | |||||
<span class="serial">06</span> | |||||
<div class="texts">置业顾问平均执行率排名:</div> | |||||
<div class="list"> | |||||
<div class="list-item"> | |||||
<span class="left">1</span> | |||||
<span class="right">产品设计(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">2</span> | |||||
<span class="right">沙盘讲解(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">3</span> | |||||
<span class="right">品牌介绍(100%)</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="item littles"> | |||||
<span class="serial">07</span> | |||||
<div class="texts">置业顾问平均接访录音排名:</div> | |||||
<div class="list"> | |||||
<div class="list-item"> | |||||
<span class="left">1</span> | |||||
<span class="right">产品设计(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">2</span> | |||||
<span class="right">沙盘讲解(100%)</span> | |||||
</div> | |||||
<div class="list-item"> | |||||
<span class="left">3</span> | |||||
<span class="right">品牌介绍(100%)</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">08</span> | |||||
<div class="texts">执行率最低的顾问:孙俊 34%</div> | |||||
<div class="texts">对比昨天 -5%</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">09</span> | |||||
<div class="texts">客户画像触达: 897</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">10</span> | |||||
<div class="texts">未标记接待数: 15</div> | |||||
</div> | |||||
<div class="item"> | |||||
<span class="serial">11</span> | |||||
<div class="texts">设备情况:在线15 离线4</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return {}; | |||||
}, | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.pages { | |||||
margin: 20px 0 0 0; | |||||
padding: 0 16px; | |||||
width: 100%; | |||||
.page-box { | |||||
padding: 16px 18px; | |||||
background: #fff; | |||||
.head-box { | |||||
padding: 0 0 16px 0; | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
.h-item { | |||||
margin: 0; | |||||
.titles { | |||||
margin: 0 16px 0 0; | |||||
font-size: 18px; | |||||
font-weight: 500; | |||||
} | |||||
.times { | |||||
font-size: 14px; | |||||
color: #666666; | |||||
} | |||||
} | |||||
} | |||||
.page-contanier { | |||||
padding: 20px 0 0 0; | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
.item { | |||||
margin: 0 0 20px 0; | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
&.littles { | |||||
width: 25%; | |||||
flex-wrap: wrap; | |||||
.list { | |||||
margin: 12px 0 0 38px; | |||||
width: 75%; | |||||
.list-item { | |||||
margin-bottom: 12px; | |||||
display: flex; | |||||
align-content: center; | |||||
.left { | |||||
margin-right: 8px; | |||||
width: 20px; | |||||
height: 20px; | |||||
border-radius: 50%; | |||||
color: #fff; | |||||
background: #2671e2; | |||||
text-align: center; | |||||
line-height: 20px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.serial { | |||||
padding: 4px; | |||||
border: 1px solid #999999; | |||||
font-size: 16px; | |||||
color: #333; | |||||
font-weight: 500; | |||||
border-radius: 4px; | |||||
} | |||||
.texts { | |||||
margin-left: 10px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,209 @@ | |||||
<template> | |||||
<div class="pages"> | |||||
<div class="page-box"> | |||||
<div class="head-box"> | |||||
<p class="h-item"> | |||||
<span class="titles">桃源山庄数智工牌日报</span> | |||||
<span>01月24日</span> | |||||
</p> | |||||
<p class="h-item" style="padding: 8px 0 0 0"> | |||||
<span class="times">生成时间:2022-01-30 8:00</span> | |||||
</p> | |||||
</div> | |||||
</div> | |||||
<!-- 简报 --> | |||||
<div class="simple"> | |||||
<div class="simple-title">数据简报</div> | |||||
<div class="simple-box"> | |||||
<template v-for="(data, index) in 8"> | |||||
<div class="simple-item" :key="index"> | |||||
<div class="top-text">接待量 (次)</div> | |||||
<div class="middle-text">0</div> | |||||
<div class="bottom-text"> | |||||
<span>对比上周:0</span> | |||||
<span class="b-t-text">--</span> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
</div> | |||||
</div> | |||||
<!-- 排名 --> | |||||
<div class="ranking"> | |||||
<div class="ranking-title">销讲场景执行排名</div> | |||||
<div class="ranking-box"> | |||||
<div class="echart" id="mychart" :style="myChartStyle"></div> | |||||
</div> | |||||
<div class="ranking-desc"> | |||||
销讲场景平均执行对比上周下跌12%,其中【送客执行】最强为99%,【区位介绍】执行最弱为25%; | |||||
</div> | |||||
</div> | |||||
<!-- 简报 --> | |||||
<div class="simple"> | |||||
<div class="simple-title">顾问工作统计</div> | |||||
<div class="simple-boxs"> | |||||
</div> | |||||
</div> | |||||
<div class="bottom"></div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import * as echarts from "echarts"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 | |||||
yData: [23, 24, 18, 25, 27, 28, 25], //数据 | |||||
myChartStyle: { width: "100%", height: "400px" }, //图表样式 | |||||
}; | |||||
}, | |||||
mounted() { | |||||
this.initEcharts(); | |||||
}, | |||||
methods: { | |||||
initEcharts() { | |||||
// 基本柱状图 | |||||
const option = { | |||||
xAxis: { | |||||
data: this.xData, | |||||
}, | |||||
yAxis: {}, | |||||
series: [ | |||||
{ | |||||
type: "bar", //形状为柱状图 | |||||
barWidth: '40', | |||||
data: this.yData, | |||||
}, | |||||
], | |||||
}; | |||||
const myChart = echarts.init(document.getElementById("mychart")); | |||||
myChart.setOption(option); | |||||
//随着屏幕大小调节图表 | |||||
window.addEventListener("resize", () => { | |||||
myChart.resize(); | |||||
}); | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.pages { | |||||
margin: 20px 0 0 0; | |||||
padding: 0 16px; | |||||
width: 100%; | |||||
.page-box { | |||||
padding: 16px 18px; | |||||
background: #fff; | |||||
.head-box { | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
.h-item { | |||||
margin: 0; | |||||
.titles { | |||||
margin: 0 16px 0 0; | |||||
font-size: 18px; | |||||
font-weight: 500; | |||||
} | |||||
.times { | |||||
font-size: 14px; | |||||
color: #666666; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.simple { | |||||
margin: 16px 0 0 0; | |||||
padding: 16px 18px; | |||||
width: 100%; | |||||
background: #fff; | |||||
.simple-title { | |||||
font-size: 16px; | |||||
font-weight: 500; | |||||
} | |||||
.simple-box { | |||||
margin-top: 16px; | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
.simple-item { | |||||
position: relative; | |||||
margin: 0 20px 16px 0; | |||||
padding: 20px; | |||||
width: 370px; | |||||
height: 150px; | |||||
border: 1px solid #e0e0e0; | |||||
border-radius: 4px; | |||||
overflow: hidden; | |||||
&::before { | |||||
content: ""; | |||||
display: block; | |||||
position: absolute; | |||||
z-index: 1; | |||||
right: -40px; | |||||
bottom: -40px; | |||||
width: 125px; | |||||
height: 125px; | |||||
border-radius: 50%; | |||||
border: 30px solid rgba($color: #2671e2, $alpha: 0.06); | |||||
} | |||||
&:nth-of-type(4n) { | |||||
margin: 0 0 16px 0; | |||||
} | |||||
.middle-text { | |||||
margin: 18px 0; | |||||
font-size: 32px; | |||||
font-weight: bold; | |||||
} | |||||
.bottom-text { | |||||
.b-t-text { | |||||
margin-left: 20px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.ranking { | |||||
margin-top: 20px; | |||||
width: 100%; | |||||
background: #fff; | |||||
.ranking-title { | |||||
padding: 16px 18px; | |||||
border-bottom: 1px solid #e0e0e0; | |||||
font-size: 16px; | |||||
font-weight: 600; | |||||
} | |||||
.ranking-desc { | |||||
padding: 0 0 20px 0; | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
.bottom { | |||||
height: 100px; | |||||
} | |||||
} | |||||
</style> |
@@ -9,7 +9,7 @@ | |||||
// const url = 'http://192.168.31.100:9999' //王笑 | // const url = 'http://192.168.31.100:9999' //王笑 | ||||
// const url = 'http://62.234.122.43:9999' //正式 | // const url = 'http://62.234.122.43:9999' //正式 | ||||
// const url = 'http://81.70.55.170:9999' // 新测试服务器IP | // const url = 'http://81.70.55.170:9999' // 新测试服务器IP | ||||
// const url = 'http://192.168.31.89:9999' //sh | // const url = 'http://192.168.31.86:9999' // 胜浩本地ip WiFi tuopu_new | ||||
// const url = 'https://zanyong.hfju.com' // 正式域名 | // const url = 'https://zanyong.hfju.com' // 正式域名 | ||||
const url = 'http://81.70.55.170:9999' // 新测试 | const url = 'http://81.70.55.170:9999' // 新测试 | ||||
// const url = 'http://82.156.35.22:9999' // 新正式ip | // const url = 'http://82.156.35.22:9999' // 新正式ip | ||||