From 77946261ec663aa1fe7f6f97e550532ed879f982 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期五, 06 六月 2025 13:47:46 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/2.0.1' into 2.0.1
---
admin/src/views/roomStatus/index.vue | 519 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 318 insertions(+), 201 deletions(-)
diff --git a/admin/src/views/roomStatus/index.vue b/admin/src/views/roomStatus/index.vue
index 3ef5bef..0bdccb2 100644
--- a/admin/src/views/roomStatus/index.vue
+++ b/admin/src/views/roomStatus/index.vue
@@ -17,7 +17,8 @@
<span class="custom-tree-node" style="width: 100%; display: flex; align-items: center; justify-content: space-between;" slot-scope="{ node, data }">
<span>{{ data.name }}</span>
<span style="color: #2080f7;" v-if="data.lv === 3">
- {{data.leaseStatus === 0 ? '寰呯璧�' : data.leaseStatus === 1 ? '宸茬璧�' : data.leaseStatus === 2 ? '鏈紑鍚璧�' : ''}}
+ <img src="@/assets/icons/ic_key_green.png" style="width: 16px; height: 16px;" v-if="data.leaseStatus === 1" />
+<!-- <img src="@/assets/icons/ic_key_yellow.png" style="width: 16px; height: 16px;" v-else-if="data.leaseStatus === 2" />-->
</span>
</span>
</el-tree>
@@ -33,34 +34,30 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="椤圭洰姒傚喌" name="first" v-if="lv === 0">
<div class="xm">
- <el-card>
- <div class="xm_one">
- <div class="xm_one_row">
- <span>鍦ㄧ鍚堝悓鏁�</span>
- <span>{{projectNums.leaseContractAmount}}</span>
- <span>鍦ㄧ鎴挎簮鏁帮細{{projectNums.leaseRoomAmount}}</span>
- </div>
- <div class="xm_one_row">
- <span>鍙嫑鍟嗛潰绉�</span>
- <span>{{projectNums.investmentArea}}銕�</span>
- <span>鍙嫑鍟嗘埧婧愭暟锛歿{projectNums.investmentRoomAmount}}</span>
- </div>
- <div class="xm_one_row">
- <span>鍦ㄧ瀹炴椂鍧囦环</span>
- <span>{{projectNums.leasePrice}}鍏�/m虏路澶�</span>
- <span>鍦ㄧ闈㈢Н锛歿{projectNums.leaseArea}}m虏</span>
- </div>
- <div class="xm_one_row">
- <span>鍑虹鐜�</span>
- <span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
- <span>寰呯闈㈢Н锛歿{projectNums.investmentArea - projectNums.leaseArea}}m虏</span>
- </div>
+ <div class="xm_one">
+ <div class="xm_one_row">
+ <span>鍦ㄧ鍚堝悓鏁�</span>
+ <span>{{projectNums.leaseContractAmount}}</span>
+ <span>鍦ㄧ鎴挎簮鏁帮細{{projectNums.leaseRoomAmount}}</span>
</div>
- </el-card>
- <el-card style="margin-top: 20px;">
- <div slot="header" class="clearfix">
- <span>椤圭洰淇℃伅</span>
+ <div class="xm_one_row">
+ <span>鍙嫑鍟嗛潰绉�</span>
+ <span>{{projectNums.investmentArea}}銕�</span>
+ <span>鍙嫑鍟嗘埧婧愭暟锛歿{projectNums.investmentRoomAmount}}</span>
</div>
+ <div class="xm_one_row">
+ <span>鍦ㄧ瀹炴椂鍧囦环</span>
+ <span>{{projectNums.leasePrice}}鍏�/m虏路澶�</span>
+ <span>鍦ㄧ闈㈢Н锛歿{projectNums.leaseArea}}m虏</span>
+ </div>
+ <div class="xm_one_row">
+ <span>鍑虹鐜�</span>
+ <span>{{rentalRate()}}%</span>
+ <span>寰呯闈㈢Н锛歿{projectNums.investmentArea - projectNums.leaseArea}}m虏</span>
+ </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div style="font-size: 16px; color: #000000; font-weight: 500; margin-bottom: 20px;">椤圭洰淇℃伅</div>
<div class="xm_info">
<div class="xm_info_row" style="width: 25%;">
<span>椤圭洰鍚嶇О</span>
@@ -79,15 +76,13 @@
<span>{{projectInfo.remark}}</span>
</div>
</div>
- </el-card>
- <el-card style="margin-top: 20px;">
- <div slot="header" class="clearfix">
- <span>褰撳墠鍦ㄧ鍚堝悓</span>
- </div>
+ </div>
+ <div style="margin-top: 20px;">
+ <div style="font-size: 16px; color: #000000; font-weight: 500; margin-bottom: 20px;">褰撳墠鍦ㄧ鍚堝悓</div>
<div class="xm_table">
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input>
- <el-button type="primary" @click="getFetchList">鎼滅储</el-button>
+ <el-button type="primary" @click="getFetchList(1)">鎼滅储</el-button>
<el-button @click="clear">閲嶇疆</el-button>
</div>
<el-table
@@ -98,7 +93,7 @@
<el-table-column
label="鍚堝悓缂栧彿">
<template slot-scope="{row}">
- <el-button type="text">{{row.code}}</el-button>
+ <el-button type="text" @click="$refs.ContractDetailRef.open('鍚堝悓璇︽儏', row.id)">{{row.code}}</el-button>
</template>
</el-table-column>
<el-table-column
@@ -146,7 +141,7 @@
</el-pagination>
</div>
</div>
- </el-card>
+ </div>
</div>
</el-tab-pane>
<el-tab-pane label="鎴挎簮淇℃伅" name="houseinfo" v-if="[3].includes(lv)">
@@ -199,73 +194,73 @@
</el-tab-pane>
<el-tab-pane label="绉熷鍚堝悓" name="project" v-if="[3].includes(lv)">
<div class="xm">
- <el-card style="margin-top: 20px;">
- <div slot="header" class="clearfix">
- <span>褰撳墠鍦ㄧ鍚堝悓</span>
+ <div class="xm_table">
+ <div style="display: flex; align-items: center; margin-bottom: 15px;">
+ <el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input>
+ <el-button type="primary" @click="getFetchList(1)">鎼滅储</el-button>
+ <el-button @click="clear">閲嶇疆</el-button>
</div>
- <div class="xm_table">
- <div style="display: flex; align-items: center; margin-bottom: 15px;">
- <el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input>
- <el-button type="primary" @click="getFetchList">鎼滅储</el-button>
- <el-button @click="clear">閲嶇疆</el-button>
- </div>
- <el-table
- :data="tableData"
- border
- v-loading="loading"
- style="width: 100%">
- <el-table-column
- label="鍚堝悓缂栧彿">
- <template slot-scope="{row}">
- <el-button type="text">{{row.code}}</el-button>
- </template>
- </el-table-column>
- <el-table-column
- prop="renterName"
- label="绉熷">
- </el-table-column>
- <el-table-column
- label="绉熻祦鍗曚环">
- <template slot-scope="{row}">
- <div style="display: flex; align-items: center;">
- <span>{{row.leasePrice || 0}}鍏�/銕÷峰ぉ</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column
- prop="leaseDays"
- label="绉熻祦澶╂暟">
- </el-table-column>
- <el-table-column
- label="绉熻祦闈㈢Н">
- <template slot-scope="{row}">
- {{row.totalArea}}銕�
- </template>
- </el-table-column>
- <el-table-column
- label="鎴挎簮">
- <template slot-scope="{row}">
- <div style="display: flex; flex-direction: column;">
- <span v-for="(item, index) in row.roomList" :key="index">
- {{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}}
- </span>
- </div>
- </template>
- </el-table-column>
- </el-table>
- <div class="xm_table_f">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="page"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="pageTotal"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total">
- </el-pagination>
- </div>
+ <el-table
+ :data="tableData"
+ border
+ v-loading="loading"
+ style="width: 100%">
+ <el-table-column
+ label="鍚堝悓缂栧彿">
+ <template slot-scope="{row}">
+ <el-button type="text" @click="$refs.ContractDetailRef.open('鍚堝悓璇︽儏', row.id)">{{row.code}}</el-button>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="绉熷">
+ <template slot-scope="{row}">
+ <div style="display: flex; align-items: center;">
+ {{row.renterName}}
+ <el-tag type="success" v-if="[1,2,3].includes(row.status)">褰撳墠绉熸埛</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="绉熻祦鍗曚环">
+ <template slot-scope="{row}">
+ <div style="display: flex; align-items: center;">
+ <span>{{row.leasePrice || 0}}鍏�/銕÷峰ぉ</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="leaseDays"
+ label="绉熻祦澶╂暟">
+ </el-table-column>
+ <el-table-column
+ label="绉熻祦闈㈢Н">
+ <template slot-scope="{row}">
+ {{row.totalArea}}銕�
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="鎴挎簮">
+ <template slot-scope="{row}">
+ <div style="display: flex; flex-direction: column;">
+ <span v-for="(item, index) in row.roomList" :key="index">
+ {{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}}
+ </span>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="xm_table_f">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="page"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="pageTotal"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
- </el-card>
+ </div>
</div>
</el-tab-pane>
<el-tab-pane label="鎴挎�佺鐞�" name="house" v-if="[1,2].includes(lv)">
@@ -287,23 +282,30 @@
</div>
<div class="xm_house_list" v-for="(item, index) in roomStatus" :key="index">
<div class="xm_house_list_left">
- <div class="xm_house_list_left_row">
+ <div class="xm_house_list_left_row" :style="{ height: (item.roomsList.length * 100) + ((item.roomsList.length - 1) * 10) + 'px' }">
<span>{{item.floorName}}</span>
<span>{{item.floorArea}}銕�</span>
</div>
</div>
<div class="xm_house_list_right">
- <div class="xm_house_list_right_row" :style="{ width: ifWidth(child.roomRentArea), backgroundColor: ifBackground(child.roomStatus) }" v-for="(child, i) in item.ywRoomStatusDataVOList" :key="i">
- <div class="ft">
- <span>{{child.roomCode}}</span>
- <span>锛坽{child.roomRentArea}}銕★級</span>
+ <template v-for="(child, i) in item.roomsList" :key="i">
+ <div class="xm_house_list_right_row" v-for="(childThree, a) in child" :key="a" :style="{ width: childThree.width + 'px', backgroundColor: ifBackground(childThree.roomStatus) }">
+ <div class="ft">
+ <span>{{childThree.roomCode}}</span>
+ <span>锛坽{childThree.roomRentArea}}銕★級</span>
+ </div>
+ <div class="xm_house_list_right_row_info" v-if="childThree.roomStatus !== 0">
+ <div style="display: flex; align-items: center;">
+ <span style="margin-right: 5px;">{{childThree.customerName}}</span>
+ <img src="@/assets/icons/ic_key_green.png" style="width: 16px; height: 16px;" v-if="childThree.roomStatus === 1" />
+ <img src="@/assets/icons/ic_key_yellow.png" style="width: 16px; height: 16px;" v-else-if="childThree.roomStatus === 2" />
+ </div>
+ <span :style="{ color: returnColor(childThree.overData.substring(0, 10)) ? 'red' : '' }">{{childThree.overData.substring(0, 10)}}{{returnColor(childThree.overData.substring(0, 10)) ? '宸�' : ''}}鍒版湡</span>
+ </div>
+ <div class="xm_house_list_right_row_day" v-if="childThree.roomStatus === 0">鏈嚭绉燂綔绌虹疆{{childThree.freeDayAmount}}澶�</div>
</div>
- <div class="xm_house_list_right_row_info" v-if="child.roomStatus !== 0">
- <span>{{child.customerName}}</span>
- <span>{{child.overData.substring(0, 10)}}鍒版湡</span>
- </div>
- <div class="xm_house_list_right_row_day" v-if="child.roomStatus === 0">鏈嚭绉燂綔绌虹疆{{child.freeDayAmount}}澶�</div>
- </div>
+ </template>
+
</div>
</div>
</div>
@@ -330,7 +332,7 @@
</div>
<div class="xm_one_row">
<span>鍑虹鐜�</span>
- <span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
+ <span>{{rentalRate()}}%</span>
<span>寰呯闈㈢Н锛歿{projectNums.investmentArea - projectNums.leaseArea}}m虏</span>
</div>
</div>
@@ -362,7 +364,7 @@
</div>
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
<span>寤虹瓚闈㈢Н</span>
- <span>{{buildingInfo.cqArea}}銕�</span>
+ <span>{{buildingInfo.area}}銕�</span>
</div>
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
<span>璁＄闈㈢Н</span>
@@ -389,7 +391,7 @@
<div class="xm_table">
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="璇疯緭鍏ュ悎鍚岀紪鍙�"></el-input>
- <el-button type="primary" @click="getFetchList">鎼滅储</el-button>
+ <el-button type="primary" @click="getFetchList(1)">鎼滅储</el-button>
<el-button @click="clear">閲嶇疆</el-button>
</div>
<el-table
@@ -400,7 +402,7 @@
<el-table-column
label="鍚堝悓缂栧彿">
<template slot-scope="{row}">
- <el-button type="text">{{row.code}}</el-button>
+ <el-button type="text" @click="$refs.ContractDetailRef.open('鍚堝悓璇︽儏', row.id)">{{row.code}}</el-button>
</template>
</el-table-column>
<el-table-column
@@ -555,23 +557,27 @@
<div class="xm">
<div class="xm_chat">
<el-card class="xm_chat_row">
- <div id="chat1"></div>
+ <div class="xm_chat_row_info">
+ <span>鎬昏</span>
+ <span>{{amount}}</span>
+ </div>
+ <div id="chat1" v-if="activeName === 'third'"></div>
</el-card>
<el-card class="xm_chat_row">
- <div id="chat2"></div>
+ <div id="chat2" v-if="activeName === 'third'"></div>
</el-card>
</div>
<el-card style="margin-top: 20px;">
<div class="xm_table">
<div class="xm_table_search">
<div class="xm_table_search_left">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ澶囧悕绉�/缂栫爜" style="width: 150px; margin-right: 15px;"></el-input>
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ澶囧悕绉�/缂栫爜" style="width: 200px; margin-right: 15px;"></el-input>
<el-select v-model="form.status" style="width: 150px; margin-right: 15px;" placeholder="璁惧鐘舵��">
<el-option label="姝ｅ父" :value="0"></el-option>
<el-option label="鎹熷潖" :value="1"></el-option>
<el-option label="鎶ュ簾" :value="2"></el-option>
</el-select>
- <el-button type="primary" @click="getDevicePage">鏌ヨ</el-button>
+ <el-button type="primary" @click="getDevicePage(1)">鏌ヨ</el-button>
<el-button @click="clear">娓呯┖</el-button>
</div>
<el-button type="primary" @click="handleEdit">鏂板</el-button>
@@ -584,7 +590,7 @@
<el-table-column
label="璁惧缂栫爜">
<template slot-scope="{row}">
- <el-button type="text">{{row.code}}</el-button>
+ <el-button type="text" @click="handledeviveDetail(row.id)">{{row.code}}</el-button>
</template>
</el-table-column>
<el-table-column
@@ -641,6 +647,10 @@
<Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" />
<!-- 鏂板缓璁惧 -->
<Edit v-if="showEdit1" ref="EditRef" @success="getDevicePage" @close="showEdit1 = false" />
+ <!-- 鍚堝悓璇︽儏 -->
+ <ContractDetail ref="ContractDetailRef" />
+ <!-- 璁惧璇︽儏 -->
+ <deviceDetail ref="deviceDetail" />
</div>
</template>
@@ -656,9 +666,11 @@
import Detail from '../workorder/components/detail'
import { fetchList as devicePage, getDeviceCateData, getDeviceStatus } from '@/api/Inspection/device'
import Edit from '../operation/components/deviceEdit'
+ import ContractDetail from '../contract/components/contractDetail'
+ import deviceDetail from '../operation/components/deviceDetail'
export default {
name: 'index',
- components: { OperaYwWorkorderWindow, Detail, Edit },
+ components: { OperaYwWorkorderWindow, Detail, Edit, ContractDetail, deviceDetail },
data() {
return {
showDetail: false,
@@ -699,7 +711,10 @@
roomInfo: {},
loading: false,
lv: 0,
- leaseStatus: ''
+ leaseStatus: '',
+ amount: 0,
+ project: '',
+ widthNum: ''
}
},
created () {
@@ -711,6 +726,11 @@
}
},
methods: {
+ handledeviveDetail(id) {
+ this.$refs.deviceDetail.visible = true
+ this.$refs.deviceDetail.id = id
+ this.$refs.deviceDetail.getDetail()
+ },
nodeClick(e) {
this.tableData = []
this.pageSize = 10
@@ -725,6 +745,7 @@
if (e.lv === 0) {
this.activeName = 'first'
this.form.project = e.id
+ this.project = e.id
this.getProjectByIds()
} else if (e.lv === 1) {
this.activeName = 'house'
@@ -741,10 +762,29 @@
this.roomDetailByIds()
}
},
+ returnColor(date) {
+ let date1 = Number(date.replace(/-/g, ''))
+ let date2 = Number(this.getDay().replace(/-/g, ''))
+ return date2 > date1
+ },
+ getDay() {
+ const now = new Date();
+ const year = now.getFullYear();
+ let month = now.getMonth() + 1; // 鏈堜唤浠�0寮�濮嬶紝鎵�浠ヨ鍔�1
+ let day = now.getDate();
+ const padZero = (num) => num < 10 ? '0' + num : num;
+ month = padZero(month);
+ day = padZero(day);
+ return `${year}-${month}-${day}`;
+ },
// 鎼滅储鏍�
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
+ },
+ // 鍑虹鐜�
+ rentalRate() {
+ return ((this.projectNums.leaseArea / this.projectNums.investmentArea) * 100).toFixed(2)
},
// 鍒ゆ柇鎴挎�佸搴�
ifWidth(num) {
@@ -793,7 +833,52 @@
buildingId: this.form.buildingId,
floor: this.form.floorId
}).then(res => {
+ // 鏁扮粍鍒嗗壊
+ res.forEach(item => {
+ item.ywRoomStatusDataVOList = item.ywRoomStatusDataVOList ? item.ywRoomStatusDataVOList : []
+ const chunkedArray = [];
+ for (let i = 0; i < item.ywRoomStatusDataVOList.length; i += 4) {
+ chunkedArray.push(item.ywRoomStatusDataVOList.slice(i, i + 4));
+ }
+ item.roomsList = chunkedArray
+ })
+ // 璁＄畻瀹藉害
+ res.forEach(item => {
+ item.roomsList.forEach(one => {
+ let num = one.map(three => three.roomRentArea)
+ let total = num.reduce((sum, value) => sum + value, 0)
+ let width = 950
+ if (one.length > 1) {
+ width = 950 - ((one.length - 1) * 10)
+ }
+ one.forEach(two => {
+ two.width = Number(Math.max((two.roomRentArea / total) * width, 150).toFixed(0))
+ })
+ })
+ })
+ // 鍑忓幓骞冲潎澶氫綑鐨勫搴�
+ res.forEach(item => {
+ item.roomsList.forEach(one => {
+ let num = one.map(three => three.width)
+ let total = num.reduce((sum, value) => sum + value, 0)
+ let countGreaterThan150 = one.filter(num => num.width > 150).length;
+ let width = 950
+ if (one.length > 1) {
+ width = 950 - ((one.length - 1) * 10)
+ }
+ if (total > width) {
+ let cha = total - width
+ let deleNum = Math.floor(cha / countGreaterThan150)
+ one.forEach(two => {
+ if (two.width > 150) {
+ two.width = two.width - deleNum
+ }
+ })
+ }
+ })
+ })
this.roomStatus = res
+ console.log(this.roomStatus)
})
},
// 鑾峰彇璁惧鐘舵��
@@ -808,9 +893,10 @@
this.$nextTick(() => {
this.deviceList = [
{ value: res.workAmount || 0, name: '姝ｅ父' },
- { value: res.exceptionAmount || 0, name: '寮傚父' },
+ { value: res.exceptionAmount || 0, name: '鎹熷潖' },
{ value: res.errAmount || 0, name: '鎶ュ簾' }
]
+ this.amount = res.amount
this.reand()
})
})
@@ -829,14 +915,19 @@
})
})
},
- handleEdit(row) {
+ handleEdit() {
this.showEdit1 = true
this.$nextTick(() => {
+ this.$refs.EditRef.param.projectId = this.project
this.$refs.EditRef.isShowModal = true
+ this.$refs.EditRef.changeProject()
})
},
// 鑾峰彇璁惧鍒嗛〉
- getDevicePage() {
+ getDevicePage(type) {
+ if (type === 1) {
+ this.page = 1
+ }
this.loading = true
devicePage({
capacity: this.pageTotal,
@@ -943,6 +1034,7 @@
})
},
clear() {
+ this.page = 1
this.form.code = ''
this.form.name = ''
this.form.status = ''
@@ -958,7 +1050,10 @@
}
},
// 鑾峰彇褰撳墠鍦ㄧ鍚堝悓
- getFetchList() {
+ getFetchList(type) {
+ if (type === 1) {
+ this.page = 1
+ }
this.loading = true
fetchList({
capacity: this.pageSize,
@@ -968,7 +1063,8 @@
buildingId: this.form.buildingId,
floorId: this.form.floorId,
roomId: this.form.roomId,
- code: this.form.code
+ code: this.form.code,
+ statusList: this.lv !== 3 ? [0,1,2,3] : null
}
}).then(res => {
this.tableData = res.records
@@ -982,6 +1078,7 @@
.then(res => {
this.addParamToArray(res)
this.form.project = res[0].id
+ this.project = res[0].id
this.title = res[0].name
this.houseList = res
this.getProjectByIds()
@@ -1016,13 +1113,7 @@
{
name: '璁惧鐘舵��',
type: 'pie',
- radius: ['40%', '80%'],
- label: {
- show: true,
- position: 'center',
- fontWeight: 'bold',
- fontSize: 22
- },
+ radius: ['50%', '80%'],
data: this.deviceList
}
]
@@ -1033,53 +1124,25 @@
var chartDom = document.getElementById('chat2');
var myChart = echarts.init(chartDom);
var option;
- const rawData = [
- [100, 302, 301, 334, 390, 330, 320],
- [320, 132, 101, 134, 90, 230, 210],
- [220, 182, 191, 234, 290, 330, 310],
- [150, 212, 201, 154, 190, 330, 410],
- [820, 832, 901, 934, 1290, 1330, 1320]
- ];
- const totalData = [];
- for (let i = 0; i < rawData[0].length; ++i) {
- let sum = 0;
- for (let j = 0; j < rawData.length; ++j) {
- sum += rawData[j][i];
- }
- totalData.push(sum);
- }
- const series = [
- 'Direct',
- 'Mail Ad',
- 'Affiliate Ad',
- 'Video Ad',
- 'Search Engine'
- ].map((name, sid) => {
- return {
- name,
- type: 'bar',
- stack: 'total',
- barWidth: '60%',
- data: rawData[sid].map((d, did) =>
- totalData[did] <= 0 ? 0 : d / totalData[did]
- )
- };
- });
- let seriesArr = this.categaryList.map(item => {
- return {
- name: item.cateName,
- type: 'bar',
- stack: 'total',
- barWidth: '60%',
- data: item.ywDeviceCateDataVOList.map((child) =>
- child.deviceAmount
- )
- }
+ let seriesArr = []
+ this.categaryList.forEach((one, index) => {
+ one.ywDeviceCateDataVOList.forEach(two => {
+ let data = []
+ this.categaryList.forEach(item => {
+ data.push(0)
+ })
+ data[index] = two.deviceAmount
+ seriesArr.push({
+ name: two.cateName,
+ type: 'bar',
+ barGap:-1,
+ stack: one.cateName,
+ data
+ })
+ })
})
let xAxisData = this.categaryList.map(item => item.cateName)
- console.log(series)
console.log(seriesArr)
- console.log(xAxisData)
option = {
title: {
text: '璁惧鏁伴噺鍒嗙被缁熻'
@@ -1094,15 +1157,30 @@
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ formatter: params => {
+ var res = `${params[0].name} <br/>`
+ for (const item of params) {
+ if (item.value !== 0) {
+ res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} 锛�${item.value}<br/>`
+ }
+ }
+ return res
}
},
- yAxis: {
- type: 'value'
- },
- xAxis: {
- type: 'category',
- data: xAxisData
- },
+ xAxis: [
+ {
+ type: 'category',
+ position: 'bottom',
+ data: xAxisData
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ data: Array.from({ length: 100 }, (_, i) => i + 1)
+ }
+ ],
series: seriesArr
};
@@ -1114,7 +1192,7 @@
this.getFetchList()
} else if (this.activeName === 'second') {
this.getWorkOrderList()
- } else if (tab.name === 'third') {
+ } else if (this.activeName === 'third') {
this.getDevicePage()
}
},
@@ -1215,17 +1293,17 @@
.xm_house_list {
width: 100%;
display: flex;
- align-items: center;
- margin-top: 10px;
+ align-items: self-start;
.xm_house_list_left {
flex-shrink: 0;
width: 100px;
display: flex;
margin-right: 15px;
flex-direction: column;
+ margin-bottom: 10px;
.xm_house_list_left_row {
width: 100px;
- height: 100px;
+ /*height: 100px;*/
background: #F4F7FC;
padding: 20px 0;
box-sizing: border-box;
@@ -1233,7 +1311,7 @@
display: flex;
align-items: center;
flex-direction: column;
- justify-content: space-between;
+ justify-content: center;
&:last-child {
margin-bottom: 0;
}
@@ -1253,8 +1331,11 @@
}
}
.xm_house_list_right {
+ width: 950px;
display: flex;
align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
.xm_house_list_right_row {
height: 100px;
padding: 12px 15px;
@@ -1262,10 +1343,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- margin-right: 10px;
- &:last-child {
- margin: 0 !important;
- }
+ margin-bottom: 10px;
.ft {
display: flex;
align-items: center;
@@ -1308,6 +1386,7 @@
.xm_house_tips {
display: flex;
align-items: center;
+ margin-bottom: 10px;
.xm_house_tips_row {
display: flex;
align-items: center;
@@ -1335,6 +1414,28 @@
.xm_chat_row {
width: 49%;
height: 300px;
+ position: relative;
+ .xm_chat_row_info {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ span {
+ &:nth-child(1) {
+ font-size: 20px;
+ color: #222222;
+ }
+ &:nth-child(2) {
+ font-size: 28px;
+ color: #222222;
+ font-weight: bold;
+ }
+ }
+ }
#chat1 {
width: 100%;
height: 260px;
@@ -1352,17 +1453,30 @@
justify-content: space-between;
.xm_one_row {
flex: 1;
+ margin-right: 20px;
display: flex;
flex-direction: column;
+ justify-content: space-between;
+ height: 120px;
+ background: #F4F7FC;
+ border-radius: 8px;
+ padding: 15px 20px;
+ box-sizing: border-box;
+ &:last-child {
+ margin: 0;
+ }
span {
font-size: 16px;
color: black;
&:nth-child(2) {
- font-weight: bold;
- margin: 15px 0;
+ font-weight: 600;
+ font-size: 24px;
+ color: #3E80EF;
}
&:nth-child(3) {
- color: #666666;
+ font-weight: 400;
+ font-size: 14px;
+ color: #888888;
}
}
}
@@ -1412,13 +1526,16 @@
display: flex;
flex-direction: column;
span {
- font-size: 16px;
&:nth-child(1) {
- color: #666666;
+ font-weight: 400;
+ font-size: 13px;
+ color: #888888;
}
&:nth-child(2) {
- color: #000000;
- margin-top: 15px;
+ font-weight: 400;
+ font-size: 14px;
+ color: #222222;
+ margin-top: 7px;
}
}
}
--
Gitblit v1.9.3