2023.7.23

ruoyi-ui/src/views/bigScreen/resources/components/OrgInfo.vue

@@ -1,214 +0,0 @@
-<template>
-	<div>
-		<el-dialog :visible.sync="isOpen" width="1200px" @close="handleClose" append-to-body>
-			<el-scrollbar wrapClass="scroll-wrap">
-				<article>
-					<header>
-						<h4>首开寸草养老照料中心</h4>
-						<div class="tag-content line">
-							<div class="rate">
-								<span class="star-text">星级</span>
-								<span class="stars">
-									<svg-icon class="star star2" icon-class="star2" />
-									<svg-icon class="star star2" icon-class="star2" />
-									<svg-icon class="star star2" icon-class="star2" />
-									<svg-icon class="star star1" icon-class="star1" />
-									<svg-icon class="star star1" icon-class="star1" />
-								</span>
-							</div>
-							<div class="tags">
-								<span>民办</span>
-								<span>自理</span>
-								<span>失能</span>
-								<span>内设医疗机构</span>
-								<span>医疗机构合作</span>
-							</div>
-						</div>
-						<div class="price-content">
-							<div class="total line">
-								<p class="price">
-									<span>总费用</span><b>¥3560 - ¥7060</b>
-								</p>
-								<span>(月参考价由机构提供，如与实际收费存在出入，请与机构联系确认)</span>
-							</div>
-							<div class="cate line">
-								<p class="price">
-									<span>床位费</span><b>¥2000 - ¥2800</b>
-								</p>
-								<p class="price">
-									<span>护理费</span><b>¥660 - ¥3060</b>
-								</p>
-								<p class="price">
-									<span>餐费</span><b>¥900 - ¥1200</b>
-								</p>
-								<span>(温馨提示：月价格仅供参考)</span>
-							</div>
-						</div>
-					</header>
-					<section>
-						<div class="part1">
-							<el-carousel trigger="click" height="150px">
-								<el-carousel-item><img src="@/assets/images/home/gzt_01.png" alt=""></el-carousel-item>
-								<el-carousel-item><img src="@/assets/images/home/gzt_02.png" alt=""></el-carousel-item>
-								<el-carousel-item><img src="@/assets/images/home/gzt_03.png" alt=""></el-carousel-item>
-							</el-carousel>
-							<div class="info">
-
-							</div>
-						</div>
-						<div class="part2"></div>
-					</section>
-				</article>
-			</el-scrollbar>
-		</el-dialog>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'OrgInfo',
-	props: {
-		id: {
-			type: String,
-			required: true
-		},
-		visible: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			isOpen: true
-		}
-	},
-	computed: {},
-	watch: {
-		visible(newVal) {this.isOpen = newVal},
-		id: {
-			immediate: true,
-			deep: true,
-			handler(newVal) {
-				if (newVal) {
-					console.log(newVal)
-				}
-			}
-		}
-	},
-	methods: {
-		handleClose() {
-			this.$emit('update:visible', this.isOpen)
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-
-.line {
-	height: 26px;
-	line-height: 26px;
-	margin-bottom: 12px;
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-}
-
-::v-deep .el-dialog {
-	.el-dialog__header {}
-
-	.el-dialog__body {
-		.scroll-wrap {
-			height: 82vh;
-		}
-	}
-}
-
-header {
-	h4 {
-		font-size: 24px;
-		font-weight: 700;
-		line-height: 42px;
-		margin-bottom: 8px;
-	}
-
-	.tag-content {
-		.rate {
-			margin-right: 10px;
-
-			span {display: inline-block;}
-
-			.star-text {
-				font-size: 16px;
-				font-weight: 700;
-				color: #fff;
-				background: #f08c02;
-				margin-right: 8px;
-				padding: 0 10px;
-				border-radius: 3px;
-			}
-
-			.stars {
-				.star {
-					height: 24px;
-					width: 24px;
-					vertical-align: -7px;
-				}
-
-				.star1 {
-					color: #e1e1e1;
-				}
-
-				.star2 {
-					color: #f08c02;
-				}
-			}
-		}
-
-		.tags {
-			span {
-				display: inline-block;
-				border-radius: 4px;
-				margin-left: 12px;
-				padding: 1px 12px;
-				background-color: rgb(255, 237, 195);
-				color: rgb(182, 129, 0);
-			}
-		}
-	}
-
-	.price-content {
-		.price {
-			display: flex;
-			font-size: 22px;
-			color: #f13014;
-			white-space: nowrap;
-
-			span {
-				display: inline-block;
-				background: linear-gradient(180deg, #fdf3df, #f1cd83);
-				border-radius: 4px;
-				color: #65420a;
-				font-size: 16px;
-				font-weight: 700;
-				margin-right: 8px;
-				text-align: center;
-				width: 64px;
-			}
-		}
-
-		.total {
-			gap: 24px;
-			>span{
-				color: #f08c02;
-				font-size: 16px;
-			}
-		}
-
-		.cate {
-			gap: 24px;
-		}
-	}
-}
-
-</style>

ruoyi-ui/src/views/bigScreen/resources/details/MonitorInfo.vue

@@ -0,0 +1,86 @@
+<template>
+	<div>
+		<el-dialog :visible.sync="isOpen" width="800px" @close="handleClose" append-to-body>
+			<el-scrollbar wrapClass="scroll-wrap">
+				<article>
+					<p>唯一编号：WWER12312389</p>
+					<p>归属机构：首开寸草养老照料中心</p>
+				</article>
+			</el-scrollbar>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'MonitorInfo',
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		visible: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isOpen: false,
+		};
+	},
+	computed: {},
+	watch: {
+		visible(newVal) {this.isOpen = newVal;},
+		id: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				if (newVal) {
+					console.log(newVal);
+				}
+			}
+		}
+	},
+	methods: {
+		handleClose() {
+			this.$emit('update:visible', this.isOpen);
+		},
+	}
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog {
+	.el-dialog__header {
+		padding: 0;
+	}
+
+	.el-dialog__headerbtn {
+		top: 10px;
+		right: 10px;
+		z-index: 1;
+		font-size: 24px;
+	}
+
+	.el-dialog__body {
+		padding: 20px 10px 20px 20px;
+
+		.scroll-wrap {
+			height: 30vh;
+			padding-right: 10px;
+		}
+	}
+}
+article {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	font-size: 16px;
+
+	p {
+		width: 33%;
+		margin-bottom: 10px;
+	}
+}
+</style>

ruoyi-ui/src/views/bigScreen/resources/details/OldmanInfo.vue

@@ -0,0 +1,90 @@
+<template>
+	<div>
+		<el-dialog :visible.sync="isOpen" width="800px" @close="handleClose" append-to-body>
+			<el-scrollbar wrapClass="scroll-wrap">
+				<article>
+					<p>老人姓名：柰女</p>
+					<p>出生日期：1960-1-14</p>
+					<p>家庭地址：英雄街道108号</p>
+					<p>联系电话：18812341234</p>
+					<p>身体状况：半失能</p>
+				</article>
+			</el-scrollbar>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'OldmanInfo',
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		visible: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isOpen: false,
+		};
+	},
+	computed: {},
+	watch: {
+		visible(newVal) {this.isOpen = newVal;},
+		id: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				if (newVal) {
+					console.log(newVal);
+				}
+			}
+		}
+	},
+	methods: {
+		handleClose() {
+			this.$emit('update:visible', this.isOpen);
+		},
+	}
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog {
+	.el-dialog__header {
+		padding: 0;
+	}
+
+	.el-dialog__headerbtn {
+		top: 10px;
+		right: 10px;
+		z-index: 1;
+		font-size: 24px;
+	}
+
+	.el-dialog__body {
+		padding: 20px 10px 20px 20px;
+
+		.scroll-wrap {
+			height: 30vh;
+			padding-right: 10px;
+		}
+	}
+}
+
+article {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	font-size: 16px;
+
+	p {
+		width: 33%;
+		margin-bottom: 10px;
+	}
+}
+</style>

ruoyi-ui/src/views/bigScreen/resources/details/SmartInfo.vue

@@ -0,0 +1,88 @@
+<template>
+	<div>
+		<el-dialog :visible.sync="isOpen" width="800px" @close="handleClose" append-to-body>
+			<el-scrollbar wrapClass="scroll-wrap">
+				<article>
+					<p>设备类型：手环</p>
+					<p>唯一编号：SADFF12312313</p>
+					<p>穿戴人：小高峰</p>
+				</article>
+			</el-scrollbar>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SmartInfo',
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		visible: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isOpen: false,
+		};
+	},
+	computed: {},
+	watch: {
+		visible(newVal) {this.isOpen = newVal;},
+		id: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				if (newVal) {
+					console.log(newVal);
+				}
+			}
+		}
+	},
+	methods: {
+		handleClose() {
+			this.$emit('update:visible', this.isOpen);
+		},
+	}
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog {
+	.el-dialog__header {
+		padding: 0;
+	}
+
+	.el-dialog__headerbtn {
+		top: 10px;
+		right: 10px;
+		z-index: 1;
+		font-size: 24px;
+	}
+
+	.el-dialog__body {
+		padding: 20px 10px 20px 20px;
+
+		.scroll-wrap {
+			height: 30vh;
+			padding-right: 10px;
+		}
+	}
+}
+
+article {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	font-size: 16px;
+
+	p {
+		width: 33%;
+		margin-bottom: 10px;
+	}
+}
+</style>

ruoyi-ui/src/views/bigScreen/resources/index.vue

@@ -90,7 +90,11 @@
         <smart v-if="sideActive === 4"></smart>
       </el-scrollbar>
     </div>
-    <org-info :id="jgId" :visible.sync="isShowInfo"></org-info>
+	  <oldman-info v-if="sideActive === 0" :id="jgId" :visible.sync="isShowInfo"></oldman-info>
+	  <org-info v-if="sideActive === 1" :id="jgId" :visible.sync="isShowInfo"></org-info>
+	  <service-info v-if="sideActive === 2" :id="jgId" :visible.sync="isShowInfo"></service-info>
+	  <monitor-info v-if="sideActive === 3" :id="jgId" :visible.sync="isShowInfo"></monitor-info>
+	  <smart-info v-if="sideActive === 4" :id="jgId" :visible.sync="isShowInfo"></smart-info>
   </div>
 </template>
 
@@ -100,18 +104,23 @@ import { mapState } from 'vuex'
 import { getstatisticaldata } from '@/api/system/dict/type'
 import { getOldmanMarkers, getOrgMarkers, getServiceMarkers, getMonitorMarkers, getSmartMarkers, getRegion } from '@/api/bigScreen'
 
-
+// 页面右边小组件
 import Oldman from './components/Oldman.vue'
 import Organization from './components/Organization.vue'
 import Service from './components/Service.vue'
 import Monitor from './components/Monitor.vue'
 import Smart from './components/Smart.vue'
 
-import OrgInfo from './components/OrgInfo.vue'
+// leftside对应详情
+import OldmanInfo from './details/OldmanInfo.vue'
+import OrgInfo from './details/OrgInfo.vue'
+import ServiceInfo from './details/ServiceInfo.vue'
+import MonitorInfo from './details/MonitorInfo.vue'
+import SmartInfo from './details/SmartInfo.vue'
 
 export default {
   name: 'Resources',
-  components: { Oldman, Organization, Service, Monitor, Smart, OrgInfo },
+  components: { Oldman, Organization, Service, Monitor, Smart, OldmanInfo, OrgInfo, ServiceInfo, MonitorInfo, SmartInfo },
   data() {
     return {
       duration: 2000,    // 数字滚动时间
@@ -141,6 +150,16 @@ export default {
 
       showDrawer: false,  // 右侧模块显隐
       pattern: 0,   // 模式选择
+	    // 获取点位图参数
+	    PTParams: {
+		    code: null,   // 默认选账号loacationCode，区域下钻模式会改变
+	    },
+
+	    // 区划下钻模式的接口参数
+	    RegionParams: {
+		    code: null, // 本级code
+		    parentCode: null  // 下级code
+	    },
 
       // 地图相关参数
       jgId: '',
@@ -175,7 +194,6 @@ export default {
     })
   },
   created() {
-
     this.deptlevel=this.user.dept.locationFilter.split(",").length;
     if  (this.deptlevel==1)
     {
@@ -196,7 +214,6 @@ export default {
     this.deptcurrxzqh=this.deptxzqh;
     this.deptcurrlevel=this.deptlevel;
     this.queryParams.para2 = this.user.dept.locationCode;
-    console.log(this.user.dept);
     this.getTotalList()
     this.clickScreen()
     this.getMarkerList()
@@ -552,7 +569,8 @@ export default {
       AMapLoader.load({
         key: '0445c169f4b9ffcf20cb016aa8e9f165',
         version: '2.0',
-        plugins: ['AMap.ToolBar',
+        plugins: [
+					'AMap.ToolBar',
           'AMap.ControlBar',
           'AMap.DistrictSearch',
           'AMap.HeatMap' ,
@@ -797,7 +815,6 @@ export default {
     markerClick(e) {
       this.jgId = e.target._opts.label.extData
       this.isShowInfo = true
-      console.log(e.target._opts)
     },
 
     clickScreen() {
@@ -849,10 +866,6 @@ export default {
         this.clearMap();
         // this.map.add(this.setMarker(this.querydata,this.sideActive))
       }
-
-
-
-      console.log(value)
     },
     handleClose() {
       this.drawer = false
@@ -878,7 +891,6 @@ $drawerWidth: 450px;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
-  border-radius: .25rem;
   width: 22rem;
   border-width: 0;
   border-radius: 0.4rem;
@@ -919,7 +931,7 @@ $drawerWidth: 450px;
   /* ie9*/
   -moz-text-align-last: justify;
   /*ff*/
-  -webkit-text-align-last: justify;
+  //-webkit-text-align-last: justify;
   /*chrome 20+*/
   -ms-flex-align: center;
   align-items: center;
@@ -928,13 +940,10 @@ $drawerWidth: 450px;
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
-  text-align: center;
   white-space: nowrap;
   background-color: #e9ecef;
   border: 1px solid #ced4da;
-  border-radius: .25rem;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+	border-radius: .25rem 0 0 .25rem;
 }
 
 .wrap {
@@ -943,8 +952,9 @@ $drawerWidth: 450px;
   .top {
     width: 100%;
     color: #fff;
-    //background-image: linear-gradient(to bottom, #bde0ed 30%, transparent);
-    //background-color: #bde0ed;
+    background-image: linear-gradient(to bottom, #548cd6, #033447 200%);
+	  box-shadow: 0 0 20px 0 #275a85;
+	  //background-color: #4c83c8;
     position: absolute;
     top: 0;
     left: 0;
@@ -1064,11 +1074,15 @@ $drawerWidth: 450px;
 }
 
 .bottom-group {
-  width: calc(100% - #{$drawerWidth});
+	background-color: rgba(0, 0, 0, .8);
+	box-shadow: 0 0 5px 0 #000;
+	padding: 10px;
+  //width: calc(100% - #{$drawerWidth});
   text-align: center;
   position: absolute;
   bottom: 2%;
-  left: 0;
+  left: 36%;
+	transform: translateX(-50%);
 
   &.hide {
     width: 100%;
@@ -1084,7 +1098,7 @@ $drawerWidth: 450px;
   width: 0;
   font-size: 14px;
   color: #fff;
-  box-shadow: 0px 0 20px 0 rgb(76 132 201);
+  box-shadow: 0 0 20px 0 rgb(76 132 201);
   background-image: linear-gradient(to bottom, #4c83c8, #033447 20%);
   padding: 60px 0 20px;
   position: absolute;