reactor:市民画像样式调整;

src/components/Hotspot/index.vue

@@ -105,6 +105,7 @@ const state = reactive<any>({
 const filterText = ref('');
 const lazyShow = ref(true);
 const loading = ref(false);
+// 懒加载
 const loadNode = async (node: any, resolve: any) => {
 	if (node.isLeaf) return resolve([]);
 	try {
@@ -125,7 +126,7 @@ const loadNode = async (node: any, resolve: any) => {
 		loading.value = false;
 	}
 };
-
+// 查询的时候取消懒加载
 watch(
 	filterText,
 	throttle((val) => {
@@ -157,11 +158,12 @@ watch(
 		}
 	}, 300)
 );
-
+// 查询
 const filterNode = (value: string, data: any) => {
 	if (!value) return true;
 	return data.hotSpotFullName.includes(value);
 };
+// 单选
 const selectRef = ref<RefType>();
 const nodeClick = async (val: any, e: any) => {
 	if (props.showCheckbox) return;

src/views/business/citizen/components/Tags-edit.vue

@@ -8,19 +8,19 @@
 						<div class="info-form">
 							<p class="form-item">
 								<span class="form-label">联系电话:</span>
-								{{ formData.citizen.phoneNumber }}
+								<span class="flex-1">{{ formData.citizen.phoneNumber }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">姓名:</span>
-								{{ formData.citizen.name }}
+								<span class="flex-1">{{ formData.citizen.name }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">首次联系:</span>
-								{{ formatDate(formData.citizen.firstCallTime, 'YYYY-mm-dd HH:MM:SS') }}
+								<span class="flex-1">{{ formatDate(formData.citizen.firstCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">上次联系:</span>
-								{{ formatDate(formData.lastCallTime, 'YYYY-mm-dd HH:MM:SS') }}
+								<span class="flex-1">{{ formatDate(formData.lastCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 							</p>
 						</div>
 					</el-card>
@@ -29,19 +29,19 @@
 						<div class="info-form">
 							<p class="form-item">
 								<span class="form-label">全部工单:</span>
-								{{ formData.order.allOrderNum }}
+								<span class="flex-1">{{ formData.order.allOrderNum }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">已办工单:</span>
-								{{ formData.order.endOrderNum }}
+								<span class="flex-1">{{ formData.order.endOrderNum }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">在办工单:</span>
-								{{ formData.order.handOrderNum }}
+								<span class="flex-1">{{ formData.order.handOrderNum }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">不满意工单:</span>
-								{{ formData.order.dissatisfactionNum }}
+								<span class="flex-1">{{ formData.order.dissatisfactionNum }}</span>
 							</p>
 						</div>
 					</el-card>
@@ -50,7 +50,7 @@
 					<el-card class="w100" shadow="never">
 						<p class="citizen-title mb10">市民画像</p>
 						<div class="citizen-img-box">
-              <img v-lazy="getImageUrl('citizen.png')" alt="" />
+							<img v-lazy="getImageUrl('citizen.png')" alt="" />
 						</div>
 					</el-card>
 				</el-col>
@@ -60,15 +60,15 @@
 						<div class="info-form">
 							<p class="form-item">
 								<span class="form-label">来电次数:</span>
-								{{ formData.callHistory.allCallNum }}
+								<span class="flex-1">{{ formData.callHistory.allCallNum }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">接通次数:</span>
-								{{ formData.callHistory.connectNum }}
+								<span class="flex-1">{{ formData.callHistory.connectNum }}</span>
 							</p>
 							<p class="form-item">
 								<span class="form-label">回拨次数:</span>
-								{{ formData.callHistory.callBackNum }}
+								<span class="flex-1">{{ formData.callHistory.callBackNum }}</span>
 							</p>
 						</div>
 					</el-card>
@@ -112,7 +112,7 @@ import { reactive, ref } from 'vue';
 import { formatDate } from '@/utils/formatTime';
 import { citizenDetailByPhone, citizenLabelAdd, citizenLabelDelete } from '@/api/business/citizen';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
-import {getImageUrl, throttle} from '@/utils/tools';
+import { getImageUrl, throttle } from '@/utils/tools';
 
 const emit = defineEmits(['updateList']);
 // 定义变量内容
@@ -161,7 +161,7 @@ const getDetail = async (phone: string) => {
 	try {
 		const { result } = await citizenDetailByPhone(phone);
 		formData.lastCallTime = result.lastCallTime; // 上次联系时间
-		formData.hotspotNames = result.hotspotNames.split(','); // 关注诉求
+		formData.hotspotNames = result.hotspotNames ? result.hotspotNames.split(',') : []; // 关注诉求
 		formData.order = result.order; // 工单历史
 		formData.callHistory = result.callHistory; // 来电历史
 		formData.citizen = result.citizen; // 市民信息
@@ -224,6 +224,9 @@ defineExpose({
 .order-accept-citizen-portrait {
 	.el-card {
 		background-color: var(--el-color-info-light-9);
+		:deep(.el-card__body) {
+			padding: 20px 15px;
+		}
 		.info-form {
 			.form-item {
 				display: flex;
@@ -235,6 +238,9 @@ defineExpose({
 					text-align: right;
 					margin-right: 3px;
 				}
+				.flex-1 {
+					flex: 1;
+				}
 				&:last-child {
 					margin-bottom: 0;
 				}

src/views/todo/seats/accept/Citizen-portrait.vue

@@ -7,19 +7,19 @@
 					<div class="info-form">
 						<p class="form-item">
 							<span class="form-label">联系电话:</span>
-							{{ state.orderInfo.contact }}
+							<span class="flex-1">{{ state.orderInfo.contact }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">姓名:</span>
-							{{ state.citizen.name }}
+							<span class="flex-1">{{ state.citizen.name }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">首次联系:</span>
-							{{ formatDate(state.citizen.firstCallTime, 'YYYY-mm-dd HH:MM:SS') }}
+							<span class="flex-1">{{ formatDate(state.citizen.firstCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">上次联系:</span>
-							{{ formatDate(state.lastCallTime, 'YYYY-mm-dd HH:MM:SS') }}
+							<span class="flex-1">{{ formatDate(state.lastCallTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 						</p>
 					</div>
 				</el-card>
@@ -28,19 +28,19 @@
 					<div class="info-form">
 						<p class="form-item">
 							<span class="form-label">全部工单:</span>
-							{{ state.order.allOrderNum }}
+							<span class="flex-1">{{ state.order.allOrderNum }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">已办工单:</span>
-							{{ state.order.endOrderNum }}
+							<span class="flex-1">{{ state.order.endOrderNum }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">在办工单:</span>
-							{{ state.order.handOrderNum }}
+							<span class="flex-1">{{ state.order.handOrderNum }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">不满意工单:</span>
-							{{ state.order.dissatisfactionNum }}
+							<span class="flex-1">{{ state.order.dissatisfactionNum }}</span>
 						</p>
 					</div>
 				</el-card>
@@ -59,15 +59,15 @@
 					<div class="info-form">
 						<p class="form-item">
 							<span class="form-label">来电次数:</span>
-							{{ state.callHistory.allCallNum }}
+							<span class="flex-1">{{ state.callHistory.allCallNum }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">接通次数:</span>
-							{{ state.callHistory.connectNum }}
+							<span class="flex-1">{{ state.callHistory.connectNum }}</span>
 						</p>
 						<p class="form-item">
 							<span class="form-label">回拨次数:</span>
-							{{ state.callHistory.callBackNum }}
+							<span class="flex-1">{{ state.callHistory.callBackNum }}</span>
 						</p>
 					</div>
 				</el-card>
@@ -105,7 +105,7 @@
 	</div>
 </template>
 <script setup lang="ts" name="orderAcceptCitizenPortrait">
-import {computed, reactive, ref, watch} from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { citizenDetailByPhone, citizenAdd, citizenLabelAdd, citizenLabelDelete } from '@/api/business/citizen';
 import { formatDate } from '@/utils/formatTime';
@@ -170,7 +170,7 @@ const getDetail = async (phone: string) => {
 		if (result.citizen) {
 			// 有市民信息
 			state.lastCallTime = result.lastCallTime; // 上次联系时间
-			state.hotspotNames = result.hotspotNames.split(','); // 关注诉求
+			state.hotspotNames = result.hotspotNames ? result.hotspotNames.split(',') : []; // 关注诉求
 			state.order = result.order; // 工单历史
 			state.callHistory = result.callHistory; // 来电历史
 			state.citizen = result.citizen; // 市民信息
@@ -236,12 +236,12 @@ const closeTag = (item: any) => {
 		.catch(() => {});
 };
 watch(
-  () => props.orderInfo,
-  (newVal: any) => {
-    state.orderInfo = newVal;
-    getCitizen();
-  },
-  { immediate: true }
+	() => props.orderInfo,
+	(newVal: any) => {
+		state.orderInfo = newVal;
+		getCitizen();
+	},
+	{ immediate: true }
 );
 defineExpose({
 	getCitizen,
@@ -252,6 +252,9 @@ defineExpose({
 .order-accept-citizen-portrait {
 	.el-card {
 		background-color: var(--el-color-info-light-9);
+		:deep(.el-card__body) {
+			padding: 20px 15px;
+		}
 		.info-form {
 			.form-item {
 				display: flex;
@@ -263,6 +266,9 @@ defineExpose({
 					text-align: right;
 					margin-right: 3px;
 				}
+				.flex-1 {
+					flex: 1;
+				}
 				&:last-child {
 					margin-bottom: 0;
 				}