fix

virgo.wzfrontend/console/src/components/work/operation/week/client.vue

@@ -3,28 +3,28 @@
 		<div class="content-test">
 			<div class="test-item blue">
 				<div class="label">总客户</div>
-				<div class="number alibaba">48</div>
+				<div class="number alibaba">{{clientCount.allNum}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-zongshuliang"></i>
 				</div>
 			</div>
 			<div class="test-item green">
 				<div class="label">新增客户</div>
-				<div class="number alibaba">44</div>
+				<div class="number alibaba">{{clientCount.type2}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-hege"></i>
 				</div>
 			</div>
 			<div class="test-item purple">
 				<div class="label">洽商客户</div>
-				<div class="number alibaba">4</div>
+				<div class="number alibaba">{{clientCount.type6}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-zhenggaizhong"></i>
 				</div>
 			</div>
 			<div class="test-item red">
 				<div class="label">流失客户</div>
-				<div class="number alibaba">0</div>
+				<div class="number alibaba">{{clientCount.type5}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-buhege"></i>
 				</div>
@@ -44,6 +44,10 @@
 					<span class="legend-page" style="background:#F04243;"></span>
 					<span class="legend-name">流失</span>
 				</div>
+				<div class="legend-item">
+					<span class="legend-page color-blue" style="background:#3A96FD;"></span>
+					<span class="legend-name">其他</span>
+				</div>
 			</div>
 			<div ref="chart1" class="chart-box"></div>
 		</div>
@@ -54,61 +58,29 @@
 					<div class="project-chart">
 						<div ref="chart2" class="pie-chart"></div>
 						<div class="chart-legend">
-							<div class="legend-item">
-								<span class="legend-bage"></span>
-								<span class="legend-label">金融业</span>
-								<span class="legend-label">
-									<span class="alibaba">3</span>
-									<span class="unit">家</span>
-								</span>
-							</div>
-							<div class="legend-item">
-								<span class="legend-bage blue"></span>
-								<span class="legend-label">建筑业</span>
-								<span class="legend-label">
-									<span class="alibaba">2</span>
-									<span class="unit">家</span>
-								</span>
-							</div>
-							<div class="legend-item">
-								<span class="legend-bage yellow"></span>
-								<span class="legend-label">互联网</span>
-								<span class="legend-label">
-									<span class="alibaba">1</span>
-									<span class="unit">家</span>
-								</span>
-							</div>
-							<div class="legend-item">
-								<span class="legend-bage orange"></span>
-								<span class="legend-label">信息科技</span>
+							<div class="legend-item" v-for="(item,index) in clientList" :key="index">
+								<span class="legend-bage" :style="'background:' + item.color + ';'"></span>
+								<span class="legend-label">{{item.name}}</span>
 								<span class="legend-label">
-									<span class="alibaba">1</span>
+									<span class="alibaba">{{item.value}}</span>
 									<span class="unit">家</span>
 								</span>
 							</div>
 						</div>
 					</div>
 					<div class="flow-view">
-						<div class="flow-title">客户列表（4）</div>
+						<div class="flow-title">客户列表（<span>{{dataList.length}}</span>）</div>
 						<div class="flow-box">
 							<div class="flow-list">
-								<div class="flow-item">
-									<div class="flow-content">
-										<div class="flow-name">
-											<span class="name">客户名称</span>
-										</div>
-										<div class="date">2020-01-01</div>
-									</div>
-									<span class="color-primary">查看详情</span>
-								</div>
-								<div class="flow-item">
+								<div class="flow-item" v-for="(item,index) in dataList" :key="item.id">
 									<div class="flow-content">
 										<div class="flow-name">
-											<span class="name">客户名称</span>
+											<span class="name">{{item.name}}</span>
 										</div>
-										<div class="date">2020-01-01</div>
+										<div class="date">{{item.visitingTime}}</div>
 									</div>
-									<span class="color-primary">查看详情</span>
+									<span class="color-primary" style="cursor: pointer;"
+										@click="lookCustomer(item)">查看详情</span>
 								</div>
 							</div>
 						</div>
@@ -116,35 +88,109 @@
 				</div>
 			</div>
 		</div>
+		<el-drawer title="客户详情" :visible.sync="drawer" :size="400" :append-to-body="true">
+			<detail v-if="drawer" :detailId="detailId"></detail>
+		</el-drawer>
 	</div>
 </template>
 
 <script>
+	import {
+		getWeekDetailByTypeId
+	} from '@/httpApi/operation'
+	import detail from '@/components/work/crm/customer/detail'
 	export default {
+		props: ['typeId', 'dateList'],
 		data() {
 			return {
-
+				dataList: [],
+				clientList: [],
+				clientCount: {
+					allNum: 0,
+					type2: 0,
+					type6: 0,
+					type5: 0
+				},
+				drawer: false,
+				detailId: ''
 			}
 		},
 		mounted() {
 			this.init()
 		},
+		components: {
+			detail
+		},
 		methods: {
 			init() {
-				this.chart(this.$refs.chart1, [
-					[1, 3, 2, 6, 1, 1, 3],
-					[2, 3, 1, 4, 4, 2, 3],
-					[3, 4, 3, 4, 5, 3, 2]
-				], ['#2DB85C', '#9D60FB', '#F04243'], ['2023-12-1', '2023-12-2', '2023-12-3',
-					'2023-12-4',
-					'2023-12-5', '2023-12-6', '2023-12-7'
-				])
-				this.charts(this.$refs.chart2);
+				getWeekDetailByTypeId(this.typeId).then(res => {
+					if (res.state) {
+						if (res.data.data) {
+							let data = JSON.parse(res.data.data);
+							this.dataList = data;
+							this.clientCount = {
+								allNum: data.length,
+								type2: data.filter(node => node.type === 2).length,
+								type6: data.filter(node => node.type === 6).length,
+								type5: data.filter(node => node.type === 5).length
+							}
+							this.lineChart(data);
+							this.pieData(data);
+						}
+					}
+				})
+			},
+			lineChart(data) {
+				let chartBox1 = [],
+					chartBox2 = [],
+					chartBox3 = [],
+					chartBox4 = [];
+				for (let i = 0; i < this.dateList.length; i++) {
+					chartBox1.push(data.filter(node => node.visitingTime === this.dateList[i] && node
+						.type === 2).length);
+					chartBox2.push(data.filter(node => node.visitingTime === this.dateList[i] && node
+						.type === 6).length);
+					chartBox3.push(data.filter(node => node.visitingTime === this.dateList[i] && node
+						.type === 5).length);
+					chartBox4.push(data.filter(node => node.visitingTime === this.dateList[i] &&
+						String('2,5,6').indexOf(node.type) === -1).length);
+				}
+				this.chart(this.$refs.chart1, [chartBox1, chartBox2, chartBox3, chartBox4], ['#2DB85C',
+					'#9D60FB', '#F04243', '#3A96FD'
+				], this.dateList);
+			},
+			pieData(data) {
+				const color = ['#73DEB3', '#73A0FA', '#F7C739', '#EB7E65', '#2DB85C', '#9D60FB', '#F04243', '#3A96FD',
+					'#73DEB3', '#73A0FA', '#F7C739', '#EB7E65', '#2DB85C', '#9D60FB', '#F04243', '#3A96FD'
+				];
+				let obj = {},
+					clientList = [];
+				for (let i = 0; i < data.length; i++) {
+					if (!obj[data[i].customerIndustry]) {
+						clientList.push({
+							name: data[i].customerIndustry,
+							value: 1
+						})
+						obj[data[i].customerIndustry] = 1;
+					} else {
+						clientList.find(node => node.name === data[i].name).value++;
+					}
+				}
+				clientList = clientList.map((node, index) => {
+					node['color'] = color[index];
+					return node
+				})
+				this.clientList = clientList;
+				let title = data.length === 0 ? '' : clientList[0].name;
+				let len = data.length === 0 ? '' : parseInt(clientList[0].value / data.length);
+				this.charts(this.$refs.chart2, title, len, clientList, color);
+			},
+			lookCustomer(item) {
+				this.detailId = item.id;
+				this.drawer = true;
 			},
-			charts(elem) {
+			charts(elem, title, len, data, color) {
 				let chart = echarts.init(elem);
-				let title = '周界报警',
-					len = "42.86"
 				let option = {
 					title: {
 						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
@@ -166,7 +212,7 @@
 							}
 						}
 					},
-					color: ['#73DEB3', '#73A0FA', '#F7C739', '#EB7E65'],
+					color: color,
 					series: [{
 						type: 'pie',
 						center: ['50%', '50%'],
@@ -205,23 +251,7 @@
 						labelLine: {
 							show: false
 						},
-						data: [{
-								value: 3,
-								name: "周界报警"
-							},
-							{
-								value: 2,
-								name: "电子巡更"
-							},
-							{
-								value: 1,
-								name: "消防设施"
-							},
-							{
-								value: 1,
-								name: "危险品"
-							}
-						]
+						data: data
 					}]
 				};
 				chart.setOption(option);

virgo.wzfrontend/console/src/components/work/operation/week/contract.vue

@@ -3,28 +3,28 @@
 		<div class="content-test">
 			<div class="test-item blue">
 				<div class="label">总合同</div>
-				<div class="number alibaba">48</div>
+				<div class="number alibaba">{{contractCount.allNum}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-zongshuliang"></i>
 				</div>
 			</div>
 			<div class="test-item green">
-				<div class="label">新增合同</div>
-				<div class="number alibaba">44</div>
+				<div class="label">签订中</div>
+				<div class="number alibaba">{{contractCount.type1}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-hege"></i>
 				</div>
 			</div>
 			<div class="test-item purple">
 				<div class="label">已生效</div>
-				<div class="number alibaba">4</div>
+				<div class="number alibaba">{{contractCount.type2}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-zhenggaizhong"></i>
 				</div>
 			</div>
 			<div class="test-item red">
 				<div class="label">已失效</div>
-				<div class="number alibaba">0</div>
+				<div class="number alibaba">{{contractCount.type3}}</div>
 				<div class="icon">
 					<i class="iconfont huifont-buhege"></i>
 				</div>
@@ -34,15 +34,15 @@
 			<div class="legend-box">
 				<div class="legend-item">
 					<span class="legend-page" style="background:#2DB85C;"></span>
-					<span class="legend-name">新增</span>
+					<span class="legend-name">签订中</span>
 				</div>
 				<div class="legend-item">
 					<span class="legend-page" style="background:#9D60FB;"></span>
-					<span class="legend-name">生效</span>
+					<span class="legend-name">已生效</span>
 				</div>
 				<div class="legend-item">
 					<span class="legend-page" style="background:#F04243;"></span>
-					<span class="legend-name">失效</span>
+					<span class="legend-name">已失效</span>
 				</div>
 			</div>
 			<div ref="chart1" class="chart-box"></div>
@@ -51,10 +51,19 @@
 </template>
 
 <script>
+	import {
+		getWeekDetailByTypeId
+	} from '@/httpApi/operation'
 	export default {
+		props: ['typeId', 'dateList'],
 		data() {
 			return {
-
+				contractCount: {
+					allNum: 0,
+					type1: 0,
+					type2: 0,
+					type3: 0
+				}
 			}
 		},
 		mounted() {
@@ -62,139 +71,37 @@
 		},
 		methods: {
 			init() {
-				this.chart(this.$refs.chart1, [
-					[1, 3, 2, 6, 1, 1, 3],
-					[2, 3, 1, 4, 4, 2, 3],
-					[3, 4, 3, 4, 5, 3, 2]
-				], ['#2DB85C', '#9D60FB', '#F04243'], ['2023-12-1', '2023-12-2', '2023-12-3',
-					'2023-12-4',
-					'2023-12-5', '2023-12-6', '2023-12-7'
-				])
-				this.charts(this.$refs.chart2);
-			},
-			charts(elem) {
-				let chart = echarts.init(elem);
-				let title = '周界报警',
-					len = "42.86"
-				let option = {
-					title: {
-						text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
-						left: 'center',
-						top: 'center',
-						textStyle: {
-							rich: {
-								name: {
-									color: "rgba(255,255,255,0.6)",
-									fontSize: 12,
-									lineHeight: 16
-								},
-								percent: {
-									color: "#fff",
-									fontSize: 28,
-									lineHeight: 34,
-									fontFamily: 'alibabaMedium'
-								},
-							}
-						}
-					},
-					color: ['#73DEB3', '#73A0FA', '#F7C739', '#EB7E65'],
-					series: [{
-						type: 'pie',
-						center: ['50%', '50%'],
-						radius: ['60%', '90%'],
-						avoidLabelOverlap: false,
-						itemStyle: {
-							borderColor: '#0E131C',
-							borderWidth: 5
-						},
-						label: {
-							show: false,
-							position: 'center'
-						},
-						emphasis: {
-							label: {
-								show: true,
-								formatter: (params) => {
-									return ("{name|" + params.name + "}" + "\n{percent|" +
-										params.percent.toFixed(2) + "}{name|%}");
-								},
-								rich: {
-									name: {
-										color: "rgba(255,255,255,0.6)",
-										fontSize: 12,
-										lineHeight: 16
-									},
-									percent: {
-										color: "#fff",
-										fontSize: 28,
-										lineHeight: 34,
-										fontFamily: 'alibabaMedium'
-									},
-								}
-							},
-						},
-						labelLine: {
-							show: false
-						},
-						data: [{
-								value: 3,
-								name: "周界报警"
-							},
-							{
-								value: 2,
-								name: "电子巡更"
-							},
-							{
-								value: 1,
-								name: "消防设施"
-							},
-							{
-								value: 1,
-								name: "危险品"
+				getWeekDetailByTypeId(this.typeId).then(res => {
+					if (res.state) {
+						if (res.data.data) {
+							let data = JSON.parse(res.data.data);
+							this.contractCount = {
+								allNum: data.length,
+								type1: data.filter(node => node.type === 1 || !node.type).length,
+								type2: data.filter(node => node.type === 2).length,
+								type3: data.filter(node => node.type === 3).length
 							}
-						]
-					}]
-				};
-				chart.setOption(option);
-				// 高亮时
-				chart.on('highlight', (e) => {
-					chart.setOption({
-						title: {
-							show: false
+							this.lineChart(data);
 						}
-					});
-				});
-				// 取消高亮时
-				chart.on('downplay', (e) => {
-					chart.setOption({
-						title: {
-							show: true
-						}
-					});
-				});
-				// 鼠标移入数据时
-				chart.on('mouseover', {
-					componentType: 'series',
-					seriesType: 'pie'
-				}, (params) => {
-					chart.setOption({
-						title: {
-							show: false
-						}
-					});
-				});
-				// 鼠标移出数据时
-				chart.on('mouseout', {
-					componentType: 'series',
-					seriesType: 'pie'
-				}, (params) => {
-					chart.setOption({
-						title: {
-							show: true
-						}
-					});
+					}
 				});
 			},
+			lineChart(data) {
+				let chartBox1 = [],
+					chartBox2 = [],
+					chartBox3 = [];
+				for (let i = 0; i < this.dateList.length; i++) {
+					chartBox1.push(data.filter(node => node.signingDate === this.dateList[i] &&
+						String('2,3').indexOf(node.type) === -1).length);
+					chartBox2.push(data.filter(node => node.signingDate === this.dateList[i] && node
+						.type === 2).length);
+					chartBox3.push(data.filter(node => node.signingDate === this.dateList[i] && node
+						.type === 3).length);
+				}
+				this.chart(this.$refs.chart1, [chartBox1, chartBox2, chartBox3], ['#2DB85C',
+					'#9D60FB', '#F04243'
+				], this.dateList);
+			},
 			chart(elem, data, color, x) {
 				let chart = echarts.init(elem);
 				let series = [];

virgo.wzfrontend/console/src/components/work/operation/week/device.vue

@@ -0,0 +1,313 @@
+<template>
+	<div class="content-box">
+		<div class="content-test">
+			<div class="test-item blue">
+				<div class="label">总数量</div>
+				<div class="number alibaba">48</div>
+				<div class="icon">
+					<i class="iconfont huifont-zongshuliang"></i>
+				</div>
+			</div>
+			<div class="test-item green">
+				<div class="label">已处理</div>
+				<div class="number alibaba">44</div>
+				<div class="icon">
+					<i class="iconfont huifont-hege"></i>
+				</div>
+			</div>
+			<div class="test-item purple">
+				<div class="label">处理中</div>
+				<div class="number alibaba">4</div>
+				<div class="icon">
+					<i class="iconfont huifont-zhenggaizhong"></i>
+				</div>
+			</div>
+			<div class="test-item red">
+				<div class="label">未处理</div>
+				<div class="number alibaba">0</div>
+				<div class="icon">
+					<i class="iconfont huifont-buhege"></i>
+				</div>
+			</div>
+		</div>
+		<div class="content-chart">
+			<div class="legend-box">
+				<div class="legend-item">
+					<span class="legend-page" style="background:#2DB85C;"></span>
+					<span class="legend-name">已处理</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#9D60FB;"></span>
+					<span class="legend-name">处理中</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#F04243;"></span>
+					<span class="legend-name">未处理</span>
+				</div>
+			</div>
+			<div ref="chart1" class="chart-box"></div>
+		</div>
+		<div class="project-list">
+			<div class="project-item">
+				<div class="project-item-title">创业园区-1号楼</div>
+				<div class="project-test">
+					<div class="test-item blue">
+						<span>总数量</span>
+						<span class="alibaba number color-blue">28</span>
+					</div>
+					<div class="test-item green">
+						<span>已处理</span>
+						<span class="alibaba number color-green">22</span>
+					</div>
+					<div class="test-item purple">
+						<span>处理中</span>
+						<span class="alibaba number color-purple">6</span>
+					</div>
+					<div class="test-item red">
+						<span>未处理</span>
+						<span class="alibaba number color-red">0</span>
+					</div>
+				</div>
+				<div class="project-flow">
+					<div class="project-chart">
+						<div ref="chart2" class="pie-chart"></div>
+						<div class="chart-legend">
+							<div class="legend-item">
+								<span class="legend-bage"></span>
+								<span class="legend-label">周界报警</span>
+								<span class="legend-label">
+									<span class="alibaba">3</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage blue"></span>
+								<span class="legend-label">电子巡更</span>
+								<span class="legend-label">
+									<span class="alibaba">2</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage yellow"></span>
+								<span class="legend-label">消防设施</span>
+								<span class="legend-label">
+									<span class="alibaba">1</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage orange"></span>
+								<span class="legend-label">危险品</span>
+								<span class="legend-label">
+									<span class="alibaba">1</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+						</div>
+					</div>
+					<div class="flow-view">
+						<div class="flow-title"> 设备管理（4）</div>
+						<div class="flow-box">
+							<div class="flow-test">
+								<div class="flow-test-item">
+									<div class="label">总数量</div>
+									<div class="alibaba number color-blue">7</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">已处理</div>
+									<div class="alibaba number color-green">7</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">处理中</div>
+									<div class="alibaba number color-purple">0</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">为处理</div>
+									<div class="alibaba number color-red">0</div>
+								</div>
+							</div>
+							<div class="flow-list">
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>1号楼</div>
+										<div>1F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>1号楼</div>
+										<div>2F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>1号楼</div>
+										<div>3F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="project-item">
+				<div class="project-item-title">创业园区-2号楼</div>
+				<div class="project-test">
+					<div class="test-item blue">
+						<span>总数量</span>
+						<span class="alibaba number color-blue">28</span>
+					</div>
+					<div class="test-item green">
+						<span>已处理</span>
+						<span class="alibaba number color-green">22</span>
+					</div>
+					<div class="test-item purple">
+						<span>处理中</span>
+						<span class="alibaba number color-purple">6</span>
+					</div>
+					<div class="test-item red">
+						<span>未处理</span>
+						<span class="alibaba number color-red">0</span>
+					</div>
+				</div>
+				<div class="project-flow">
+					<div class="project-chart">
+						<div ref="chart3" class="pie-chart"></div>
+						<div class="chart-legend">
+							<div class="legend-item">
+								<span class="legend-bage"></span>
+								<span class="legend-label">周界报警</span>
+								<span class="legend-label">
+									<span class="alibaba">3</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage blue"></span>
+								<span class="legend-label">电子巡更</span>
+								<span class="legend-label">
+									<span class="alibaba">2</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage yellow"></span>
+								<span class="legend-label">消防设施</span>
+								<span class="legend-label">
+									<span class="alibaba">1</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+							<div class="legend-item">
+								<span class="legend-bage orange"></span>
+								<span class="legend-label">危险品</span>
+								<span class="legend-label">
+									<span class="alibaba">1</span>
+									<span class="unit">条</span>
+								</span>
+							</div>
+						</div>
+					</div>
+					<div class="flow-view">
+						<div class="flow-title">设备管理（4）</div>
+						<div class="flow-box">
+							<div class="flow-test">
+								<div class="flow-test-item">
+									<div class="label">总数量</div>
+									<div class="alibaba number color-blue">7</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">已处理</div>
+									<div class="alibaba number color-green">7</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">处理中</div>
+									<div class="alibaba number color-purple">0</div>
+								</div>
+								<div class="flow-test-item">
+									<div class="label">为处理</div>
+									<div class="alibaba number color-red">0</div>
+								</div>
+							</div>
+							<div class="flow-list">
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>2号楼</div>
+										<div>1F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>2号楼</div>
+										<div>2F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+								<div class="flow-item">
+									<div class="flow-icon">
+										<div>2号楼</div>
+										<div>3F</div>
+									</div>
+									<div class="flow-content">
+										<div class="flow-name">
+											<span class="name">周界报警</span>
+											<div class="hui-tag hui-tag-success">合格</div>
+										</div>
+										<div class="date">2020-01-01</div>
+									</div>
+									<span class="color-primary">查看详情</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

virgo.wzfrontend/console/src/components/work/operation/week/house.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="content-box">
+		<div class="content-test">
+			<div class="test-item blue">
+				<div class="label">带看数</div>
+				<div class="number alibaba">48</div>
+				<div class="icon">
+					<i class="iconfont huifont-zongshuliang"></i>
+				</div>
+			</div>
+			<div class="test-item green">
+				<div class="label">预约数</div>
+				<div class="number alibaba">44</div>
+				<div class="icon">
+					<i class="iconfont huifont-hege"></i>
+				</div>
+			</div>
+			<div class="test-item purple">
+				<div class="label">成交数</div>
+				<div class="number alibaba">4</div>
+				<div class="icon">
+					<i class="iconfont huifont-zhenggaizhong"></i>
+				</div>
+			</div>
+			<div class="test-item red">
+				<div class="label">到期数</div>
+				<div class="number alibaba">0</div>
+				<div class="icon">
+					<i class="iconfont huifont-buhege"></i>
+				</div>
+			</div>
+		</div>
+		<div class="content-chart">
+			<div class="legend-box">
+				<div class="legend-item">
+					<span class="legend-page" style="background:#3A96FD;"></span>
+					<span class="legend-name">带看</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#2DB85C;"></span>
+					<span class="legend-name">预约</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#9D60FB;"></span>
+					<span class="legend-name">成交</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#F04243;"></span>
+					<span class="legend-name">到期</span>
+				</div>
+			</div>
+			<div ref="chart1" class="chart-box"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+	
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.chart(this.$refs.chart1, [
+					[1, 3, 2, 6, 1, 1, 3],
+					[2, 3, 1, 4, 4, 2, 3],
+					[3, 4, 3, 4, 5, 3, 2]
+				], ['#3A96FD', '#2DB85C', '#9D60FB', '#F04243'], ['2023-12-1', '2023-12-2', '2023-12-3',
+					'2023-12-4',
+					'2023-12-5', '2023-12-6', '2023-12-7'
+				])
+			},
+			chart(elem, data, color, x) {
+				let chart = echarts.init(elem);
+				let series = [];
+				for (var i = 0; i < data.length; i++) {
+					series = series.concat([{
+						data: data[i],
+						type: 'line',
+						symbolSize: 6,
+						color: color[i],
+						lineStyle: {
+							width: 1
+						},
+						z: 99
+					}, {
+						data: data[i],
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						lineStyle: {
+							width: 1
+						},
+						color: color[i],
+						z: 99
+					}]);
+				}
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '30',
+						right: '15',
+						bottom: '25',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: x,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						boundaryGap: true,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '数量',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 12,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: series
+				};
+				chart.setOption(option);
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

virgo.wzfrontend/console/src/components/work/operation/week/payment.vue

@@ -1,26 +1,201 @@
-<template>
-	<div class="project-test">
-		<div class="test-item blue">
-			<span>总数量</span>
-			<span class="alibaba number color-blue">28</span>
-		</div>
-		<div class="test-item green">
-			<span>已处理</span>
-			<span class="alibaba number color-green">22</span>
-		</div>
-		<div class="test-item purple">
-			<span>处理中</span>
-			<span class="alibaba number color-purple">6</span>
-		</div>
-		<div class="test-item red">
-			<span>未处理</span>
-			<span class="alibaba number color-red">0</span>
-		</div>
-	</div>
-</template>
-
-<script>
-</script>
-
-<style>
+<template>
+	<div class="week-payment content-box">
+		<div class="content-test">
+			<div class="test-item blue">
+				<div class="label">房租</div>
+				<div class="number alibaba">48</div>
+				<div class="icon">
+					<i class="iconfont huifont-zongshuliang"></i>
+				</div>
+			</div>
+			<div class="test-item green">
+				<div class="label">物业</div>
+				<div class="number alibaba">44</div>
+				<div class="icon">
+					<i class="iconfont huifont-hege"></i>
+				</div>
+			</div>
+			<div class="test-item purple">
+				<div class="label">水电</div>
+				<div class="number alibaba">4</div>
+				<div class="icon">
+					<i class="iconfont huifont-zhenggaizhong"></i>
+				</div>
+			</div>
+			<div class="test-item red">
+				<div class="label">其他</div>
+				<div class="number alibaba">0</div>
+				<div class="icon">
+					<i class="iconfont huifont-buhege"></i>
+				</div>
+			</div>
+		</div>
+		<div class="project-list" style="margin-top: 20px;">
+			<div class="project-item">
+				<div class="project-item-title">实收</div>
+				<div class="project-test">
+					<div class="test-item blue">
+						<span>房租</span>
+						<span class="alibaba number color-blue">28</span>
+					</div>
+					<div class="test-item green">
+						<span>物业</span>
+						<span class="alibaba number color-green">22</span>
+					</div>
+					<div class="test-item purple">
+						<span>水电</span>
+						<span class="alibaba number color-purple">6</span>
+					</div>
+					<div class="test-item red">
+						<span>其他</span>
+						<span class="alibaba number color-red">0</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="content-chart">
+			<div class="legend-box">
+				<div class="legend-item">
+					<span class="legend-page" style="background:#3A96FD;"></span>
+					<span class="legend-name">物业</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#2DB85C;"></span>
+					<span class="legend-name">物业</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#9D60FB;"></span>
+					<span class="legend-name">水电</span>
+				</div>
+				<div class="legend-item">
+					<span class="legend-page" style="background:#F04243;"></span>
+					<span class="legend-name">其他</span>
+				</div>
+			</div>
+			<div ref="chart1" class="chart-box"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.chart(this.$refs.chart1, [
+					[1, 3, 2, 6, 1, 1, 3],
+					[2, 3, 1, 4, 4, 2, 3],
+					[3, 4, 3, 4, 5, 3, 2],
+					[4, 2, 1, 5, 3, 1, 1]
+				], ['#3A96FD', '#2DB85C', '#9D60FB', '#F04243'], ['2023-12-1', '2023-12-2', '2023-12-3',
+					'2023-12-4', '2023-12-5', '2023-12-6', '2023-12-7'
+				])
+			},
+			chart(elem, data, color, x) {
+				let chart = echarts.init(elem);
+				let series = [];
+				for (var i = 0; i < data.length; i++) {
+					series = series.concat([{
+						data: data[i],
+						type: 'line',
+						symbolSize: 6,
+						color: color[i],
+						lineStyle: {
+							width: 1
+						},
+						z: 99
+					}, {
+						data: data[i],
+						type: 'line',
+						showSymbol: false,
+						label: {
+							show: true,
+							color: '#D0DEEE'
+						},
+						lineStyle: {
+							width: 1
+						},
+						color: color[i],
+						z: 99
+					}]);
+				}
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '30',
+						right: '15',
+						bottom: '25',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: x,
+						axisLabel: {
+							margin: 4,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						boundaryGap: true,
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '数量',
+						type: 'value',
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 12,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 12
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: series
+				};
+				chart.setOption(option);
+			}
+		}
+	}
+</script>
+
+<style>
 </style>

virgo.wzfrontend/console/src/httpApi/operation.js

@@ -198,16 +198,38 @@ export function getWeekList(projectId) {
 	})
 }
 /* 
- * 获取周报详情
+ * 获取周报类型列表
  * 
  * 
  */
 export function getWeekDetailById(id) {
+	return request({
+		url: `/api/weekly/detail/${id}`,
+		method: 'get'
+	})
+}
+/* 
+ * 获取周报类型列表
+ * 
+ * 
+ */
+export function getWeekTypeListById(id) {
 	return request({
 		url: `/api/weekly/type/${id}`,
 		method: 'get'
 	})
 }
+/* 
+ * 获取周报类型详情
+ * 
+ * 
+ */
+export function getWeekDetailByTypeId(id) {
+	return request({
+		url: `/api/weekly/typeId/${id}`,
+		method: 'get'
+	})
+}
 /* 
  * 获取提醒列表
  * 
@@ -273,7 +295,7 @@ export function getRemoteListByQuery(data) {
 		method: 'post',
 		data: data
 	})
-}
+}
 /* 
  * 更新远程提醒
  * 

virgo.wzfrontend/console/src/views/work/operation/week/detail.vue

@@ -15,34 +15,37 @@
 				<div class="content-title">
 					{{nowTitle.name}}
 				</div>
-				<client v-if="nowTitle.type === 1"></client>
-				<contract v-else></contract>
+				<client v-if="nowTitle.type === 1" :typeId="nowTitle.id" :dateList="dateList">
+				</client>
+				<contract v-else-if="nowTitle.type === 2" :typeId="nowTitle.id" :dateList="dateList">
+				</contract>
+				<payment v-else-if="nowTitle.type === 3"></payment>
+				<device v-else-if="nowTitle.type === 4"></device>
+				<house v-else-if="nowTitle.type === 5"></house>
 			</div>
 			<div class="week-common">
 				<div class="week-detail">
 					<div class="detail-title">
 						<div class="title">
-							<div class="icon">
-								第一周
-							</div>
-							<div class="name">项目工程周报</div>
+							<div class="icon">第<span>{{detail.number}}</span>周</div>
+							<div class="name">{{detail.name}}</div>
 						</div>
 						<div class="detail-date">
-							2023-10-31至2023-11-07
+							<span>{{$dayjs(detail.startDate).format('YYYY-MM-DD')}}</span>至<span>{{$dayjs(detail.endDate).format('YYYY-MM-DD')}}</span>
 						</div>
 					</div>
 					<div class="detail-list">
 						<div class="detail-item">
 							<div class="key">项目编号</div>
-							<div class="value">001</div>
+							<div class="value">{{detail.id}}</div>
 						</div>
 						<div class="detail-item">
 							<div class="key">编制单位</div>
-							<div class="value">温州新能源制造有限公司</div>
+							<div class="value">{{detail.organizationName}}</div>
 						</div>
 						<div class="detail-item">
 							<div class="key">生成日期</div>
-							<div class="value">2023年11月07日</div>
+							<div class="value">{{$dayjs(detail.createDate).format('YYYY年MM月DD日')}}</div>
 						</div>
 					</div>
 				</div>
@@ -67,9 +70,12 @@
 	import client from '@/components/work/operation/week/client';
 	import contract from '@/components/work/operation/week/contract';
 	import payment from '@/components/work/operation/week/payment';
+	import device from '@/components/work/operation/week/device';
+	import house from '@/components/work/operation/week/house';
 	import Crypto from '@/uitls/crypto'
 	import {
-		getWeekDetailById
+		getWeekDetailById,
+		getWeekTypeListById
 	} from '@/httpApi/operation'
 	import {
 		pinyin
@@ -77,35 +83,21 @@
 	export default {
 		data() {
 			return {
-				titleList: [{
-					type: 1,
-					name: "客户管理"
-				}, {
-					type: 2,
-					name: "合同管理"
-				}, {
-					type: 3,
-					name: "费用管理"
-				}, {
-					type: 4,
-					name: "设备管理"
-				}, {
-					type: 5,
-					name: "房源管理"
-				}],
-				nowTitle: {
-					type: 1,
-					name: "客户管理"
-				},
+				titleList: [],
+				nowTitle: {},
 				detailId: '',
-				weekWeatherList: []
+				weekWeatherList: [],
+				dateList: [],
+				detail: {}
 			}
 		},
 		components: {
 			weatherIcon,
 			client,
 			contract,
-			payment
+			payment,
+			device,
+			house
 		},
 		mounted() {
 			this.detailId = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.id), 'bosshand');
@@ -114,20 +106,39 @@
 		},
 		methods: {
 			init() {
-				getWeekDetailById(this.detailId).then(res => {
-					if (res.state) {
-						// console.log(res);
-						// let list = res.data.filter(node => node.name != '天气情况' && node.name != '周报文档')
-						// this.nowTitle = list[0];
-						// this.titleList = list;
-
-						if (res.data[0].data) {
-							let weather = JSON.parse(res.data[0].data).map(node => JSON.parse(node.weather));
-							this.weekWeatherList = weather;
-						}
-
+				getWeekDetailById(this.detailId).then(data => {
+					if (data.state) {
+						this.detail = data.data;
+						this.dateList = this.getDate();
+						getWeekTypeListById(this.detailId).then(res => {
+							if (res.state) {
+								let list = res.data.filter(node => node.name != '天气情况')
+								this.nowTitle = list[0];
+								this.titleList = list;
+								if (res.data[0].data) {
+									let weather = JSON.parse(res.data[0].data).map(node => JSON.parse(node
+										.weather));
+									this.weekWeatherList = weather;
+								}
+							}
+						})
 					}
 				})
+
+			},
+			getDate() {
+				// 定义开始日期和结束日期
+				const startDate = this.$dayjs(this.detail.startDate);
+				const endDate = this.$dayjs(this.detail.endDate);
+				// 存储中间日期的数组
+				const dates = [];
+				let currentDate = startDate;
+				while (currentDate.isBefore(endDate)) {
+					dates.push(currentDate.format('YYYY-MM-DD'));
+					currentDate = currentDate.add(1, 'day'); // 添加一天
+				}
+				dates.pop();
+				return dates;
 			},
 			returnWeatherPinYin(name) {
 				return pinyin(name, {