|
- <template>
- <view class="pages">
- <!-- 日报内容部分 -->
- <view class="container">
- <!-- 头部日报卡 -->
- <view class="c-head-card">
- <view class="c-title-text">
- {{ projectName || '' }}数智工牌周报
- </view>
- <text class="date">{{ weekObj.createTimeName }}</text>
- <view class="creative-time">
- 生成时间:{{ weekObj.createTime || '--' }}
- </view>
- </view>
- </view>
- <view class="nodata-box" v-if="nodata">
- <image class="img" src="/static/images/nodata.png" mode="" />
- <view class="text">此项目本周还没有接待量哦~</view>
- </view>
- <view v-if="!nodata">
- <!-- 简报 -->
- <view class="briefing">
- <view class="briefing-title">
- 简报
- </view>
- <!-- 简报表格部分 -->
- <view class="briefing-box">
- <block v-for="(data, index) in numlist" :key="index">
- <view class="briefing-box-item">
- <view class="tops" :class="[data.class || '']">
- {{ data.name }}
- </view>
- <view class="middle" :class="[data.class || '']">
- {{ data.num || 0 }}
- </view>
- <view class="bottom">
- 对比上周: {{ data.preNum || 0 }}
- <text class="b-text"
- :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent || '0' }}</text>
- <template v-if="data.percent != 0">
- <text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;"
- :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text>
- </template>
- </view>
- </view>
- </block>
- </view>
- </view>
-
- <!-- 销讲场景执行排名 -->
- <view class="execution-ranking" v-if="!weekObj.orgCode">
- <view class="execution-ranking-title">
- 销讲场景执行排名
- </view>
- <template v-if="isShowXJTop1List">
- <view class="execution-ranking-desc" v-if="false">
- <text>销讲场景平均执行对比上周</text>
- <text>{{ rankTop('fractionPKName') }}</text>
- <text>{{ rankTop('fractionPK') }}</text>
- <text>%</text>
- <template v-if="rankTop('fractionBastValue') > 0">
- <text>,其中【{{ rankTop('fractionBastName') }}】最强为</text>
- <text class="up">{{ rankTop('fractionBastValue') }}</text>
- <text>%</text>
- </template>
- <template v-if="rankTop('fractionLastValue') < 0">
- <text>,【{{ rankTop('fractionLastName') }}】执行最弱为</text>
- <text class="down">{{ rankTop('fractionLastValue') }}</text>
- <text>%;</text>
- </template>
- </view>
-
- <!-- 排名百分比列表 -->
- <view class="ranking-box" @click="toTrendAnalysis('销讲数据')">
- <block v-for="(percent, index) in weekObj.XJTop1List" :key="index">
- <view class="ranking-item">
- <view class="left">{{ percent.title }}</view>
- <view class="middle">
- <u-line-progress :active-color="$options.filters.setColor(index)"
- inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">
- </u-line-progress>
- </view>
- <view class="right"> {{ percent.value || '0' }} %</view>
- </view>
- </block>
- </view>
- </template>
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <!-- 接待统计 -->
- <view class="statistics">
- <view class="statistics-title">
- 接待统计
- </view>
- <template v-if="isShowStatistics">
- <view class="statistics-desc" v-if="false">
- <text>
- 顾问平均执行率对比上周
- </text>
- <text>
- {{ rankTop('ranktype') || '' }}
- </text>
- <text :class="[rankTop('class')]">{{ rankTop('people') || '' }}</text>
- <text class="">
- 人,其中{{ rankTop('topName') || '' }}上升
- </text>
- <text class="up">{{ rankTop('topPk') || '0' }}</text>
- <text class="">
- %为最高,{{ rankTop('lastName') || '' }}下降
- </text>
- <text class="down">{{ rankTop('lastPk') || '0' }}</text>
- <text class="">
- %降幅最大。
- </text>
- </view>
- <view class="table">
- <view class="thead">
- <block v-for="(head, headIndex) in tableHead" :key="headIndex">
- <view class="thead-item"
- :style="[(weekObj.orgCode && head.title2) ? head.style1 : head.style]">
- <template v-if="weekObj.orgCode && head.title2">
- {{ head.title2 }}
- </template>
- <template v-else>
- {{ head.title }}
- </template>
- </view>
- </block>
- </view>
-
- <view class="tbody" @click="toEmployeesstatistics('顾问排名')">
- <block v-for="(data, index) in weekObj.customerInfo1" :key="index">
- <view class="tbody-item">
- <template v-if="!weekObj.orgCode">
- <view class="tbody-items name">{{ data.name }}</view>
- </template>
- <template v-else>
- <view class="tbody-items time">{{ data.houseName }}</view>
- </template>
-
- <view class="tbody-items nums">{{ data.activeCustomer }}</view>
- <template v-if="!weekObj.orgCode">
- <view class="tbody-items time">{{ tofixed2(data.avgDuration)}}m</view>
- </template>
- <template v-else>
- <view class="tbody-items time">{{ tofixed2(data.avgDuration/60) }}m</view>
- </template>
- <view class="tbody-items percent">{{ data.fraction }}%</view>
- <template v-if="!weekObj.orgCode">
- <view class="tbody-items week" :class="{up: data.pk > 0, down: data.pk < 0}">
- <template v-if="data.pk">
- {{ data.pk > 0 ? `+${data.pk}` : data.pk }}%
- </template>
- </view>
- </template>
- <template v-else>
- <view class="tbody-items week"
- :class="{up: data.fractionContrast > 0, down: data.fractionContrast < 0}">
- <template v-if="data.fractionContrast">
- {{ data.fractionContrast > 0 ? `+${data.fractionContrast}` : data.fractionContrast }}%
- </template>
- <template v-else>--</template>
- </view>
- </template>
- </view>
- </block>
- </view>
- </view>
- </template>
-
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <!-- 顾问销讲执行率排名 -->
- <view class="guwen-ranking">
- <view class="guwen-ranking-title">
- <template v-if="!weekObj.orgCode">
- 顾问销讲执行率排名(TOP10)
- </template>
- <template v-else>
- 项目统计排名(TOP10)
- </template>
- </view>
- <template v-if="isShowZXLTopList">
- <!-- 排名百分比列表 -->
- <view class="ranking-box">
- <block v-for="(percent, index) in weekObj.ZXLTopList" :key="index">
- <view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">
- <view class="left">{{ percent.title }}</view>
- <view class="middle">
- <u-line-progress :active-color="$options.filters.setColor(index)"
- inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">
- </u-line-progress>
- </view>
- <view class="right"> {{ percent.value || '0' }}%</view>
- </view>
- </block>
- </view>
- </template>
-
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <!-- 顾问接待量排名 -->
- <view class="guwen-ranking">
- <view class="guwen-ranking-title">
- <template v-if="!weekObj.orgCode">
- 顾问接待量排名(TOP10)
- </template>
- <template v-else>
- 项目有效接待排名(TOP10)
- </template>
- </view>
-
- <template v-if="isShowJDLTopList">
- <!-- 排名百分比列表 -->
- <view class="ranking-box">
- <block v-for="(percent, index) in weekObj.JDLTopList" :key="index">
- <view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">
- <view class="left">{{ percent.title }}</view>
- <view class="middle">
- <u-line-progress :active-color="$options.filters.setColor(index)"
- inactive-color="#F2F2F2" :show-percent="false" :percent="percent.values">
- </u-line-progress>
- </view>
- <view class="right"> {{ percent.value || '0' }} </view>
- </view>
- </block>
- </view>
- </template>
-
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <!-- 顾问接待量排名 -->
- <view class="guwen-ranking" v-if="weekObj.level1List">
- <view class="guwen-ranking-title">
- 画像一级触达排名(TOP10)
- </view>
-
- <template v-if="weekObj.level1List">
- <!-- 排名百分比列表 -->
- <view class="ranking-box">
- <block v-for="(percent, index) in weekObj.level1List" :key="index">
- <view class="ranking-item">
- <view class="left">{{ percent.name }}</view>
- <view class="middle">
- <u-line-progress :active-color="$options.filters.setColor(index)"
- inactive-color="#F2F2F2" :show-percent="false" :percent="percent.percent">
- </u-line-progress>
- </view>
- <view class="right"> {{ percent.total || '0' }} </view>
- </view>
- </block>
- </view>
- </template>
-
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <view class="guwen-ranking" v-if="weekObj.level2List">
- <view class="guwen-ranking-title">
- 画像关键词触达排名(TOP10)
- </view>
-
- <template v-if="weekObj.level2List">
- <!-- 排名百分比列表 -->
- <view class="ranking-box">
- <block v-for="(percent, index) in weekObj.level2List" :key="index">
- <view class="ranking-item">
- <view class="left">{{ percent.name }}</view>
- <view class="middle">
- <u-line-progress :active-color="$options.filters.setColor(index)"
- inactive-color="#F2F2F2" :show-percent="false" :percent="percent.percent">
- </u-line-progress>
- </view>
- <view class="right"> {{ percent.total || '0' }} </view>
- </view>
- </block>
- </view>
- </template>
-
- <template v-else>
- <view class="empity">
- 暂无数据
- </view>
- </template>
- </view>
-
- <!-- 使用建议 -->
- <view class="proposal" v-if="weekObj.suggest">
- <view class="proposal-title">
- 使用建议
- </view>
- <!-- 建议的文字 -->
- <view class="proposal-box">
- <u-parse class="ql-editor" :content="weekObj.suggest" />
- </view>
- </view>
-
- <!-- 底部按钮 -->
- <view class="nav-footer">
-
- <view class="footer-item" @click="toHome">
- 回到管理端
- </view>
-
- <view class="footer-item full" style="margin-left: 24rpx;" @tap="forShare">
- <button open-type="share" class="fulls">
- 一键转发
- </button>
- </view>
- </view>
- </view>
- </view>
- </template>
-
- <script>
- import uParse from '@/components/gaoyia-parse/parse.vue'
- export default {
-
- components: {
- uParse
- },
- data() {
- return {
- nodata: false,
- tableHead: [{
- title: '顾问',
- title2: '项目名称',
- style: {
- flex: 1
- },
- style1: {
- flex: 2
- },
- },
- {
- title: '接待量',
- style: {
- flex: 1
- }
- },
- {
- title: '平均接待时长',
- style: {
- flex: 2
- }
- },
- {
- title: '平均执行率',
- style: {
- flex: 2
- }
- },
- {
- title: '对比上周',
- style: {
- flex: 1.5
- }
- },
- ],
- id: '', // id
-
- needList: ['JDLTop', 'ZXLTop', 'XJTop1'], // 需要转换数组的内容
-
- // 简报
- numlist: [{
- name: '接待量 (次)',
- num: '',
- setName: 'receptionCount1',
- percent: '',
- percentName: 'receptionCountPK',
- preNum: '', // 上周数量
- preNumName: 'receptionCount2', //
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh', // 参数
- auth: '接待记录', //
-
- }, {
- name: '有效接待 (次)',
- num: '',
- setName: 'activeCustomer1',
- percent: '',
- percentName: 'activeCustomerPK',
- preNum: '', // 上周数量
- preNumName: 'activeCustomer2', //
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
- auth: '接待记录', //
- },
- {
- name: '平均执行率(%)',
- num: '',
- setName: 'fraction1',
- percent: '',
- percentName: 'fractionPK',
- preNum: '', // 上周数量
- preNumName: 'fraction2', //
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
- auth: '接待记录', //
- },
- {
- name: '平均接待时长(分)',
- num: '',
- setName: 'avgDuration1',
- percent: '',
- percentName: 'avgDurationPK',
- preNum: '', // 上周数量
- preNumName: 'avgDuration2', //
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
- auth: '接待记录', //
- },
- {
- name: '违禁接待 (次)',
- num: '',
- setName: 'prohibitedNum1',
- percent: '',
- percentName: 'prohibitedNumPK',
- preNum: '', // 上周数量
- preNumName: 'prohibitedNum2', //
- class: 'down',
- path: '/pages/center/prohibited/index',
- pathParms: '?activeTotal=4&violatedStatus=1&refresh=refresh', // 参数
- auth: '违禁记录',
- },
- {
- name: '客户画像触达 (次)',
- num: '',
- setName: 'reachSum1',
- percent: '',
- percentName: 'reachSumPK',
- preNum: '', // 上周数量
- preNumName: 'reachSum2', //
- path: '/pages/center/Piabodata/Userinsightinto',
- pathParms: '?activeTotal=3', // 参数
- auth: '销讲数据',
- },
- {
- name: '已标记',
- num: '',
- setName: 'labelledReceptionNum1',
- percent: '',
- percentName: 'labelledReceptionNumPK',
- preNum: '', // 上周数量
- preNumName: 'labelledReceptionNum2', //
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=1', // 参数
- auth: '接待记录', //
- },
- {
- name: '未标记',
- num: '',
- setName: 'unlabelledReceptionNum1',
- percent: '',
- percentName: 'unlabelledReceptionNumPK',
- preNum: '', // 上周数量
- preNumName: 'unlabelledReceptionNum2', //
- class: 'down',
- path: '/pages/center/records/index',
- pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=0', // 参数
- auth: '接待记录', //
- },
- ],
-
- // 周报详情
- weekObj: {},
- projectName: '', // 项目名称
- }
- },
-
-
- computed: {
- // 获取本地存储的权限列表
- menuList() {
- return uni.getStorageSync('weapp_session_Menu_data')
- },
-
- // 排名最高与最低
- rankTop() {
- return name => {
- let obj = {}
- try {
-
- if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {
- obj.ranktype = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) >
- 0 ? '上升' : '下降'
- obj.people = Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2
- .length)
- }
-
- if (this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0) {
- obj.topName = this.weekObj.customerInfo1[0].name
- obj.topPk = Math.abs(this.weekObj.customerInfo1[0].pk)
- obj.lastName = this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1].name,
- obj.lastPk = Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1]
- .pk)
- }
-
- if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {
- obj.class = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ?
- 'up' : 'down'
- }
-
- if (this.weekObj.fractionPK) {
- obj.fractionPKName = this.weekObj.fractionPK > 0 ? '上涨' : '下跌'
- obj.fractionPK = Math.abs(this.weekObj.fractionPK)
- }
-
- if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {
- obj.fractionBastName = this.weekObj.XJTop1List[0].title
- obj.fractionBastValue = this.weekObj.XJTop1List[0].value
- }
-
- if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {
- obj.fractionLastName = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].title
- obj.fractionLastValue = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].value
- }
-
- return obj[name] || ''
- } catch (e) {
- console.log(e)
- return ''
- }
- }
- },
-
- // 接待统计
- isShowStatistics() {
- // return this.rankTop('ranktype') && this.rankTop('class') && this.rankTop('people') && this.rankTop('topName') && this.rankTop('topPk') && this.rankTop('lastName') && this.rankTop('lastPk') && this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0
- return this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0
- },
-
- isShowXJTop1List() {
- // return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0 && this.rankTop('fractionPKName') && this.rankTop('fractionPK') && this.rankTop('fractionBastName') && this.rankTop('fractionBastValue') && this.rankTop('fractionLastName') && this.rankTop('fractionLastName') && this.rankTop('fractionLastValue')
- return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0
- },
-
- isShowZXLTopList() {
- return this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0
- },
-
- isShowJDLTopList() {
- return this.weekObj.JDLTopList && this.weekObj.JDLTopList.length > 0
- },
- },
-
- onLoad(option) {
- if (option.id) this.id = option.id
- this.getMessage()
- },
-
-
- onShareAppMessage() {
- return {
- title: `${this.projectName}数智工牌周报`,
- path: `/pages/reportExcel/weekReport?id=${this.id}`
- }
- },
-
- methods: {
- tofixed2(time){
- if(time){
- return time.toFixed(2)
- }else{
- return 0
- }
- },
- forShare() {
- this.$u.get("/zkMessage/shareMessage", {
- id: this.id,
- houseId: uni.getStorageSync('buildingID').id
- })
- },
-
- // 趋势分析
- toTrendAnalysis(name) {
- return
- let date = this.weekObj.weekDate.split('~')
- let [t1, t2] = [date[0], date[1]]
- let time1 = new Date(t1.replace(/-/g, '/'))
- let time2 = new Date(t2.replace(/-/g, '/'))
- time1.setDate(time1.getDate() - 7)
- time2.setDate(time2.getDate() - 7)
- let res1 = `${time1.getFullYear()}-${time1.getMonth() + 1}-${time1.getDate()}`
- let res2 = `${time2.getFullYear()}-${time2.getMonth() + 1}-${time2.getDate()}`
- if (this.isPassWatch(name)) {
- uni.navigateTo({
- url: `/pages/center/Piabodata/TrendAnalysis?type=1&staTime=${date[0]}&endtime=${date[1]}&staTime1=${res1}&endtime1=${res2}`
- })
- } else {
- uni.showToast({
- title: '暂无权限',
- icon: "none"
- })
- }
- },
-
- // 顾问排名
- toEmployeesstatistics(name) {
- let date = this.weekObj.weekDate.split('~')
- let [t1, t2] = [date[0], date[1]]
- if (this.isPassWatch(name)) {
- uni.navigateTo({
- url: `/pages/center/Piabodata/Employeesstatistics?type=1&staTime=${date[0]}&endtime=${date[1]}`
- })
- } else {
- uni.showToast({
- title: '暂无权限',
- icon: "none"
- })
- }
- },
-
- // 员工分析
- toStaffAnalysis(name, data) {
- let obj = this.weekObj.customerInfo1.find(item => {
- return item.name == data.title
- })
- console.log(obj)
- let time = this.weekObj.weekDate.split('~')
- if (this.isPassWatch(name)) {
- uni.navigateTo({
- url: `/pages/center/Piabodata/StaffAnalysis?type=1&id=${obj.id}&startDate=${time[0]}&endDate=${time[1]}`
- });
- } else {
- uni.showToast({
- title: '暂无权限',
- icon: "none"
- })
- }
- },
-
- // 跳转对应页面
- toAuthPage(data) {
- if (!uni.getStorageSync('weapp_session_login_data').token) {
- this.toHome()
- return
- }
- if (this.isPassWatch(data.auth)) {
- let time = this.weekObj.weekDate.split('~')
- data.pathParms = `${data.pathParms}&staTime=${time[0]}&endtime=${time[1]}`
- uni.navigateTo({
- url: `${data.path}${data.pathParms}`
- })
- } else {
- uni.showToast({
- title: '暂无权限',
- icon: "none"
- })
- }
- },
-
-
- // 是否有权限观看
- isPassWatch(name) {
- return this.menuList.findIndex(item => {
- return item.name == name
- }) == -1 ? false : true
- },
-
- // 跳转首页
- toHome() {
- uni.navigateTo({
- url: '/pages/index/guide'
- })
- },
- // 获取周报详情
- getMessage() {
- this.$u.get('/zkMessage/findByProjectId', {
- id: this.id,
- houseId: uni.getStorageSync('buildingID').id
- }).then(res => {
- // console.log(res)
- let data = {}
- if (res.zkMessage.content) {
- data = JSON.parse(res.zkMessage.content)
- this.bubbleSort(data.customerInfo1 || [], 'pk')
- this.bubbleSort(data.customerInfo2 || [], 'pk')
- data.customerInfo1 && data.customerInfo1.reverse()
- data.customerInfo2 && data.customerInfo2.reverse()
- this.weekObj = {
- ...res.zkMessage,
- ...data
- }
- } else {
- this.nodata = true
- this.weekObj = {
- ...res.zkMessage,
- }
- }
-
- if (this.weekObj.level1List && this.weekObj.level2List) {
- if (this.weekObj.level1List[0] && this.weekObj.level1List[0].total) {
- let max1 = this.weekObj.level1List[0].total || 1
- this.weekObj.level1List.forEach(item => {
- item.percent = Math.floor((item.total / max1) * 100)
- })
- } else {
- this.weekObj.level1List.forEach(item => {
- item.percent = 0
- })
- }
-
- if (this.weekObj.level2List[0] && this.weekObj.level2List[0].total) {
- let max2 = this.weekObj.level2List[0].total || 1
-
- this.weekObj.level2List.forEach(item => {
- item.percent = Math.floor((item.total / max2) * 100)
- })
- } else {
- this.weekObj.level2List.forEach(item => {
- item.percent = 0
- })
- }
- }
-
- this.weekObj.createTimeName = this.getTimeLines(this.weekObj.weekDate, 1)
- console.log(this.weekObj, 'this.weekObj')
- this.projectName = res.projectName
- this.numlist.forEach(item => {
- if (data[item.setName]) {
- item.num = data[item.setName]
- }
- if (data[item.percentName]) {
- item.percent = data[item.percentName]
- }
- if (data[item.preNumName]) {
- item.preNum = data[item.preNumName]
- }
- })
- this.init()
- }).catch(e => {
- console.log(e)
- })
- },
-
-
- // 把对象转成数组并在后续的步骤方便处理
- init() {
- console.log(this.weekObj, 'this.weekObj')
- this.needList.forEach(item => {
- console.log(item)
- if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
- this.weekObj[item + 'List'] = [] // 销讲执行
- for (let i in this.weekObj[item]) {
- this.weekObj[item + 'List'].push({
- title: i,
- value: this.weekObj[item][i]
- })
- }
- } else {
- this.weekObj[item + 'List'] = []
- }
- })
- this.sortInitArr()
- },
-
- // 排序对象转换后的数组
- sortInitArr() {
- this.needList.forEach(item => {
- if (this.weekObj[item + 'List']) {
- console.log(item)
- this.bubbleSort(this.weekObj[item + 'List'])
- this.weekObj[item + 'List'] = this.dealData(this.weekObj[item + 'List'])
- }
- })
-
- this.reverseList()
- },
-
- // 反转数组
- reverseList() {
- this.needList.forEach(item => {
- if (this.weekObj[item + 'List']) {
- this.weekObj[item + 'List'].reverse()
- }
- })
- console.log(this.weekObj, '12312312312')
- },
-
- // 冒泡排序
- bubbleSort(arr, keys = 'value') {
- console.log(arr, 'keys', keys)
- for (let i = 0; i < arr.length - 1; i += 1) {
- //通过 arr.length 次把第一位放到最后,完成排序
- //-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位
- for (let j = 0; j < arr.length - 1 - i; j += 1) {
- if (arr[j][keys] > arr[j + 1][keys]) {
- const temp = arr[j];
- arr[j] = arr[j + 1];
- arr[j + 1] = temp;
- }
- }
- }
- },
- // 定义一个公共方法对数据进行处理
- dealData(arr) {
- // 获取最大值
- let num = Math.max.apply(Math, arr.map((o) => {
- return o.value
- }))
- arr.map(item => {
- item.values = Math.floor(item.value / num * 100)
- })
- return arr
-
- },
-
- // 转换时间
- getTimeLine(date, type = 1) {
- let resu = '--'
- if (!date) return resu
- let time = new Date(date.replace(/-/g, '/'))
- time.setDate(time.getDate() - 7)
- let arr = date.split(' ')
- let str = arr[0]
- let result = str.split('-')
-
- let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
- let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
-
- if (type == 1) {
- resu = `${m}.${d}-${result[1]}.${result[2]}`
- } else {
- resu = `${m}月${d}日~${result[1]}月${result[2]}日`
- }
- return resu
- },
-
- // 转换时间
- getTimeLines(date) {
- if (!date) return ''
- let arr = date.split('~')
- let str0 = arr[0].split('-')
- let str1 = arr[1].split('-')
-
- return `${str0[1]}月${str0[2]}日~${str1[1]}月${str1[2]}日`
- },
-
-
- },
-
- filters: {
- // 时间格式转换
- fomatDate(date) {
- if (!date) return '--'
- let arr = date.split(' ')
- let str = arr[0]
- let result = str.split('-')
- return `${result[1]}-${result[2]}`
- },
-
- // 转换时间
- getTimeLine(date, type = 1) {
- if (!date) return '--'
- console.log(date.replace(/-/g, '/'))
- let time = new Date(date.replace(/-/g, '/'))
- time.setDate(time.getDate() - 7)
- let arr = date.split(' ')
- let str = arr[0]
- let result = str.split('-')
-
- let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
- let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
-
- if (type == 1) {
- return `${m}.${d}-${result[1]}.${result[2]}`
- } else {
- return `${m}月${d}日~${result[1]}月${result[2]}日`
- }
- },
-
- // 设置颜色
- setColor(index) {
- let color = ''
- switch (index) {
- case 0:
- color = '#E7483C';
- break;
- case 1:
- color = '#FF8C13';
- break;
- case 2:
- color = '#FFCC00';
- break;
- default:
- color = '#4FC78F';
- break;
- }
- return color
- },
- }
- }
- </script>
-
- <style lang="scss" scoped>
- @import '@/static/css/quill/quill.core.css';
- @import '@/static/css/quill/quill.snow.css';
- @import '@/static/css/quill/quill.bubble.css';
-
- .pages {
- width: 100vw;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- background: #F8F8F8;
-
- .nav-header {
- flex-shrink: 0;
- }
-
- .container {
- padding: 30rpx 30rpx 40rpx;
- display: flex;
- flex-direction: column;
- background: #fff;
-
- .c-head-card {
- padding: 30rpx;
- width: 100%;
- min-height: 252rpx;
- border: 2rpx solid #000000;
- border-radius: 12rpx;
- box-shadow: 10rpx 10rpx #2671E2;
- display: flex;
- flex-direction: column;
-
- .c-title-text {
- // position: relative;
- flex-grow: 1;
- font-size: 48rpx;
- font-weight: bold;
- color: #303030;
- }
-
- .date {
- // position: absolute;
- // right: 0;
- // bottom: 6rpx;
- font-size: 30rpx;
- color: #303030;
- }
-
- .creative-time {
- margin: 20rpx 0 0 0;
- flex-shrink: 0;
- }
- }
- }
-
- .nodata-box {
- width: 750rpx;
- flex: 1;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-color: #fff;
-
- .img {
- width: 400rpx;
- height: 400rpx;
- }
-
- .text {
- text-align: center;
- font-size: 28rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #666666;
- line-height: 40rpx;
- }
- }
-
- .briefing {
- background: #fff;
-
- .briefing-title {
- padding: 0 30rpx;
- height: 90rpx;
- display: flex;
- align-items: center;
- border: 1rpx solid #E0E0E0;
- font-size: 32rpx;
- font-weight: bold;
- }
-
- .briefing-box {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
-
- .briefing-box-item {
- padding: 20rpx 30rpx;
- width: 50%;
- height: 186rpx;
- border: 1px solid #E0E0E0;
- border-left: none;
- border-top: none;
-
- &:nth-of-type(2n) {
- border-right: none;
- }
-
- .top {
- font-size: 28rpx;
- }
-
- .middle {
- margin: 14rpx 0 12rpx;
- font-size: 32rpx;
- font-weight: 600;
- color: #333333;
- }
-
- .bottom {
- font-size: 26rpx;
- color: #666666;
-
- .b-text {
- margin-left: 20rpx;
-
-
- &.down {
- color: #E7483C;
- font-size: 34rpx;
- }
-
- &.up {
- font-size: 34rpx;
- color: #43CD80;
- }
- }
- }
- }
- }
- }
-
-
- .execution-ranking {
- margin: 20rpx 0 0 0;
- padding: 30rpx;
- background: #fff;
-
- .execution-ranking-title {
- font-size: 32rpx;
- font-weight: bold;
- }
-
- .execution-ranking-desc {
- margin-top: 20rpx;
- font-size: 30rpx;
- }
-
- .ranking-box {
- margin: 30rpx 0 0 0;
-
- .ranking-item {
- margin-bottom: 18rpx;
- display: flex;
-
- &:nth-last-of-type(1) {
- margin-bottom: 0;
- }
-
- .left {
- flex-shrink: 0;
- width: 270rpx;
- font-size: 30rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .middle {
- flex-grow: 1;
- }
-
- .right {
- flex-shrink: 0;
- width: 118rpx;
- font-size: 30rpx;
- text-align: center;
- }
- }
- }
- }
-
- .statistics {
- margin: 20rpx 0 0 0;
- background: #fff;
-
- .statistics-title {
- padding: 30rpx 30rpx 0;
- width: 100%;
- font-size: 32rpx;
- font-weight: bold;
- }
-
- .statistics-desc {
- padding: 0 30rpx;
- margin-top: 20rpx;
- }
-
- .table {
- margin: 30rpx 0 0 0;
-
- .thead {
- padding: 0 30rpx;
- width: 100%;
- height: 72rpx;
- display: flex;
- align-items: center;
- border: 1rpx solid #E0E0E0;
- border-left: none;
- border-right: none;
- font-size: 26rpx;
-
- .thead-item {
- text-align: center;
- }
- }
-
- .tbody {
-
- .tbody-item {
- padding: 0 30rpx;
- display: flex;
- align-items: center;
- height: 72rpx;
- background: #FAFCFF;
-
- &:nth-of-type(2n) {
- background: #FFFFFF;
- }
-
- .tbody-items {
- flex: 1;
- display: flex;
- justify-content: center;
- }
-
- .name {
- justify-content: flex-start;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .time {
- flex: 2;
- }
-
- .percent {
- flex: 2;
- }
-
- .week {
- flex: 1.5;
- }
- }
- }
-
- .tbottom {
- width: 100%;
- height: 72rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 30rpx;
- color: #2671E2;
- background: #FAFCFF;
- }
- }
- }
-
- .guwen-ranking {
- margin: 20rpx 0 0 0;
- width: 100%;
- padding: 30rpx;
- background: #fff;
-
- .guwen-ranking-title {
- font-size: 32rpx;
- font-weight: 500;
- }
-
- .guwen-ranking-desc {
- margin-top: 20rpx;
- font-size: 30rpx;
- }
-
- .ranking-box {
- margin: 30rpx 0 0 0;
-
- .ranking-item {
- margin-bottom: 18rpx;
- display: flex;
-
- &:nth-last-of-type(1) {
- margin-bottom: 0;
- }
-
- .left {
- flex-shrink: 0;
- width: 270rpx;
- font-size: 30rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .middle {
- flex-grow: 1;
- }
-
- .right {
- flex-shrink: 0;
- width: 118rpx;
- font-size: 30rpx;
- text-align: center;
- }
- }
- }
- }
-
- .proposal {
- margin: 20rpx 0 0 0;
- padding: 30rpx;
- background: #fff;
-
- .proposal-title {
- font-size: 32rpx;
- font-weight: 500;
- }
-
- .proposal-box {
- margin: 30rpx 0 0 0;
-
- .proposal-item {
- margin: 20rpx 0 0 0;
- display: flex;
-
- .lside {
- flex-shrink: 0;
- margin: 0 12rpx 0 0;
- width: 44rpx;
- height: 44rpx;
- border-radius: 50%;
- background: #2671E2;
- text-align: center;
- line-height: 44rpx;
- color: #fff;
- }
-
- .rside {
-
- .rside-title {
- font-size: 32rpx;
- }
-
- .rside-box {
- margin: 16rpx 0 0 0;
- }
- }
- }
- }
-
- }
-
-
-
- .nav-footer {
- position: sticky;
- bottom: 0;
- padding: 32rpx;
- width: 100%;
- display: flex;
- justify-content: center;
- background: #fff;
-
- .footer-item {
- flex: 1;
- height: 88rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- color: #2671E2;
- border: 2rpx solid #2671E2;
- border-radius: 8rpx;
- overflow: hidden;
- font-size: 32rpx;
-
- &.full {
- background: #2671E2;
- color: #fff;
-
- .fulls {
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- background: transparent;
- color: #fff;
- font-size: 32rpx;
- font-weight: normal;
- line-height: 88rpx;
- }
- }
- }
-
- }
-
-
-
- .up {
- color: #43CD80 !important;
- }
-
- .down {
- color: #E6273A !important;
- }
-
- .empity {
- width: 100%;
- height: 300rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 28rpx;
- color: #666666;
- }
- }
- </style>
|