添加下拉选择

src/components/container.vue

@@ -31,38 +31,31 @@
 		<!-- </template> -->
 	</div>
 </template>
-<script>
-import { computed, defineComponent, inject, nextTick, onMounted, onUnmounted, ref } from 'vue'
+<script setup>
+import { computed, inject, nextTick, onMounted, onUnmounted, ref } from 'vue'
 
-export default defineComponent({
-	name:"container",
-	props:{
+	var props=defineProps({
 		bg:{
 			type:String,
 			default:""
 		}
-	},
-	install(Vue,opt){
-		Vue.component(this.name,this)
-	},
-	setup(props,ctx) {
+	})
+	
 	var {getters}=inject("store")
 
-		var _data={
-			containerDom:ref(null),
-			ready:ref(false),
-			loading:computed(()=>getters['data/loading']),
-		}
+	var containerDom=ref()
+	var ready=ref(false)
+	var loading=computed(()=>getters['data/loading'])
 
 	function reserveScale(){
 		var width=1920//window.screen.availWidth
 		var height=1080//window.screen.availHeight
-			_data.containerDom.value.style.width=width+'px'
-			_data.containerDom.value.style.height=height+'px'
+		containerDom.value.style.width=width+'px'
+		containerDom.value.style.height=height+'px'
 
 		const widthScale=window.innerWidth / width
 		const heightScale=window.innerHeight / height
-			_data.containerDom.value.style.transform=`scale(${widthScale}, ${heightScale})`
+		containerDom.value.style.transform=`scale(${widthScale}, ${heightScale})`
 	}
 	onMounted(()=>{
 		reserveScale()
@@ -70,14 +63,11 @@ export default defineComponent({
 		window.addEventListener("resize", reserveScale)
 		nextTick(()=>{
 			setTimeout(()=>{
-					_data.ready.value=true
+				ready.value=true
 			},1000)
 		})
 	})
 	onUnmounted(() => {
 		window.removeEventListener("resize", reserveScale)
 	})
-		return _data;
-	},
-})
 </script>

src/config/unit.js

@@ -3,3 +3,28 @@ export const center=function(lnglat){
 	var lat=[Math.min(...lnglat.map(v=>v[1])),Math.max(...lnglat.map(v=>v[1]))]
 	return [lng[0]+(lng[1]-lng[0])/2, lat[0]+(lat[1]-lat[0])/2]
 }
+
+export const downFile=function(file,type,filename){
+	// 创建blob对象，解析流数据
+	const blob = new Blob([file], {
+	// 设置返回的文件类型
+	// type: 'application/pdf;charset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
+	   type: type
+	})
+	 // 这里就是创建一个a标签，等下用来模拟点击事件
+	 const a = document.createElement('a')
+	 // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
+	 const URL = window.URL || window.webkitURL
+	 // 根据解析后的blob对象创建URL 对象
+	 const herf = URL.createObjectURL(blob)
+	 // 下载链接
+	 a.href = herf
+	 // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
+	 a.download = filename
+	 document.body.appendChild(a)
+	 // 点击a标签，进行下载 
+	 a.click()
+	 // 收尾工作，在内存中移除URL 对象
+	 document.body.removeChild(a)
+	 window.URL.revokeObjectURL(herf)
+}

src/view/home/index.vue

@@ -124,7 +124,7 @@
 		<template #ready>
 			<div class="content">
 				<div class="title">资源动态时间轴</div>
-				<search v-model="roomId" v-model:date="date" @reSet="reSet"/>
+				<search v-model="roomId" v-model:date="date" @reSet="reSet" v-model:type="type"/>
 				<div class="time"/>
 				<div class="info">
 					<div class="title">房间人员信息</div>
@@ -132,8 +132,8 @@
 				</div>
 				<div class="result">
 					<div class="title">本次查询结果</div>
-					<span class="amount" data-title="当前欠款(元)" @click="toPage('http://192.168.100.204:37799/webroot/decision/link/AdDS')">{{data?.chargeAmount||0}}</span>
-					<span class="num" data-title="工单统计(条)" @click="toPage('http://192.168.100.204:37799/webroot/decision/link/JhhE')">{{data?.workOrderCount||0}}</span>
+					<span class="amount" data-title="当前欠款(元)" @click="data?.chargeAmount>0&&outData('0')">{{data?.chargeAmount||0}}</span>
+					<span class="num" data-title="工单统计(条)"  @click="data?.workOrderCount>0&&outData('1')">{{data?.workOrderCount||0}}</span>
 				</div>
 				<v-echarts :option="option" autoresize ref="echart" @mousedown="mouseDown=true" @mouseup="mouseDown=false"/>
 			</div>
@@ -144,11 +144,13 @@
 import request from '@/config/request'
 import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import search from './search.vue'
+import {downFile} from '@/config/unit'
 
 	var msg=inject("msg")
 
-	var roomId=ref('')//1603212861432179257
+	var roomId=ref('')
 	var date=ref(null)
+	var type=ref("")
 
 	var scrollBoard=ref()
 	var config=reactive({
@@ -160,8 +162,13 @@ import search from './search.vue'
 		evenRowBGC:"transpatent",
 	})
 	var data=shallowRef({})
-	var upData=computed(()=>data.value?.timeInfo?.filter?.((v,k)=>k%2==1)||[])
-	var downData=computed(()=>data.value?.timeInfo?.filter?.((v,k)=>k%2==0)||[])
+	var list=computed(()=>{
+		var arr=data.value?.timeInfo?.filter?.(v=>!type.value||v.type==type.value)||[]
+		if(arr.length%2==1)return arr.concat({type:"none"})
+		else return arr
+	})
+	var upData=computed(()=>list.value.filter((v,k)=>k%2==1))
+	var downData=computed(()=>list.value.filter((v,k)=>k%2==0))
 	
 	function color(status){
 		if(/已收款/.test(status))return "#1CF162"
@@ -175,7 +182,7 @@ import search from './search.vue'
 			type:"inside",
 			startValue:0,
 			endValue: max.value,
-			xAxisIndex: data.value?.timeInfo?.length>12?[0,1]:[],
+			xAxisIndex: list.value.length>12?[0,1]:[],
 			zoomOnMouseWheel:false,
 			moveOnMouseMove:true,
 			moveOnMouseWheel:true,
@@ -203,7 +210,7 @@ import search from './search.vue'
 				axisLine:{show:false},
 				axisTick:{show:false},
 				axisLabel:{show:false},
-				max: data.value?.timeInfo?.length>12?null:5,
+				max: upData.value?.length>6?null:5,
 				data: upData.value.map(v=>'')
 			},
 			{
@@ -212,7 +219,7 @@ import search from './search.vue'
 				axisLine:{show:false},
 				axisTick:{show:false},
 				axisLabel:{show:false},
-				max: data.value?.timeInfo?.length>12?null:5,
+				max: downData.value?.length>6?null:5,
 				data: downData.value.map(v=>'')
 			}
 		],
@@ -378,9 +385,6 @@ import search from './search.vue'
 			})
 			if(res.statu){
 				data.value=res.data
-				if(data.value.timeInfo.length%2==1){
-					data.value.timeInfo.push({type:"none"})
-				}
 			}else{
 				msg.error(res.msg||"获取费用工单失败！")
 			}
@@ -390,8 +394,21 @@ import search from './search.vue'
 	})
 	var echart=ref()
 
-	function toPage(url){
-		window.open(url)
+	async function outData(fileType){
+		var res=await request("/fileOutPut",{
+			responseType:"blob",
+			params:{
+				roomId: roomId.value,
+				startData: date.value?.[0]?.format?.('yyyy-MM-dd'),
+				endDate: date.value?.[1]?.format?.('yyyy-MM-dd'),
+				fileType,
+			}
+		})
+		if(res.status==200){
+			downFile(res.data,'excel', '当前欠费.xls')
+		}else{
+			msg.error(res.msg||"导出数据失败！")
+		}
 	}
 
 	onMounted(()=>{

src/view/home/search.vue

@@ -72,6 +72,15 @@
 			end-placeholder="结束时间"
 			v-model="date"
 			@change="emit('update:date',$event)"/>
+		<el-select
+			:model-value="props.type"
+			@change="emit('update:type',$event)"
+			popper-class="search-popper"
+			placeholder="选择消息类型"
+			clearable>
+			<el-option value="工单" label="工单"/>
+			<el-option value="账单" label="账单"/>
+		</el-select>
 		<el-button @click="reSet">重置</el-button>
 	</div>
 </template>
@@ -81,6 +90,12 @@ import { inject, onMounted, reactive, ref, shallowRef, watch } from "vue"
 
 	var emit=defineEmits()
 	var msg=inject("msg")
+	var props=defineProps({
+		type:{
+			type:String,
+			default:"",
+		}
+	})
 
 	var formData=reactive({
 		villageId:"",