Merge branch 'nan' of sckj/mz-cloud into master

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

@@ -2,81 +2,133 @@
 	<div class="org-info">
 		<div class="card">
 			<h5 class="c-tit">养老机构</h5>
-			<div class="total">总数：<count-to :start-val="0" :end-val="Number(yljgObj.total)" :duration="duration" />家</div>
+			<div class="total">总数：
+				<count-to :start-val="0" :end-val="+yljgObj.total" :duration="duration" />
+				家
+			</div>
 			<div class="flex">
 				<div class="f-item1">
-					<div class="percent">7%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(yljgObj.data1,yljgObj.total)" :duration="duration" suffix="%" />
+					</div>
 					<p>公办</p>
-					<p><count-to :start-val="0" :end-val="Number(yljgObj.data1)" :duration="duration" /></p>
+					<p>
+						<count-to :start-val="0" :end-val="+yljgObj.data1" :duration="duration" />
+					</p>
 				</div>
 				<div class="f-item1">
-					<div class="percent">7%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(yljgObj.data2,yljgObj.total)" suffix="%" :duration="duration" />
+					</div>
 					<p>民办</p>
-					<p><count-to :start-val="0" :end-val="Number(yljgObj.data2)" :duration="duration" /></p>
+					<p>
+						<count-to :start-val="0" :end-val="+yljgObj.data2" :duration="duration" />
+					</p>
 				</div>
 				<div class="f-item1">
-					<div class="percent">92%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(yljgObj.data3,yljgObj.total)" suffix="%" :duration="duration" />
+					</div>
 					<p>公办民营</p>
-					<p><count-to :start-val="0" :end-val="Number(yljgObj.data3)" :duration="duration" /></p>
+					<p>
+						<count-to :start-val="0" :end-val="+yljgObj.data3" :duration="duration" />
+					</p>
 				</div>
 			</div>
 			<div class="flex1">
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_09.png" alt="">
-					<p class="i-text"><count-to :start-val="0" :end-val="Number(yljgObj.data4)" :duration="duration" />张</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+yljgObj.data4" :duration="duration" />
+						张
+					</p>
 					<p class="i-text">床位总数</p>
 				</div>
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_08.png" alt="">
-					<p class="i-text"><count-to :start-val="0" :end-val="Number(yljgObj.data5)" :duration="duration" />人</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+yljgObj.data5" :duration="duration" />
+						人
+					</p>
 					<p class="i-text">入住老年人数</p>
 				</div>
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_09.png" alt="">
-					<p class="i-text"><count-to :start-val="0" :end-val="Number(yljgObj.data6)" :duration="duration" />人</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+yljgObj.data6" :duration="duration" />
+						人
+					</p>
 					<p class="i-text">从业人员总数</p>
 				</div>
 			</div>
 		</div>
 		<div class="card">
 			<h5 class="c-tit">社区养老机构</h5>
-			<div class="total">总数：<span>34092</span>家</div>
+			<div class="total">总数：
+				<count-to :start-val="0" :end-val="+sqyljgObj.total" :duration="duration" />
+				家
+			</div>
 			<div class="flex">
 				<div class="f-item1">
-					<div class="percent">7%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(sqyljgObj.data1,sqyljgObj.total)" :duration="duration" suffix="%" />
+					</div>
 					<p>公办自营</p>
-					<p>2550</p>
+					<p>
+						<count-to :start-val="0" :end-val="+sqyljgObj.data1" :duration="duration" />
+					</p>
 				</div>
 				<div class="f-item1">
-					<div class="percent">7%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(sqyljgObj.data2,sqyljgObj.total)" :duration="duration" suffix="%" />
+					</div>
 					<p>公办民营</p>
-					<p>2550</p>
+					<p>
+						<count-to :start-val="0" :end-val="+sqyljgObj.data2" :duration="duration" />
+					</p>
 				</div>
 				<div class="f-item1">
-					<div class="percent">92%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(sqyljgObj.data3,sqyljgObj.total)" :duration="duration" suffix="%" />
+					</div>
 					<p>民办自营</p>
-					<p>31532</p>
+					<p>
+						<count-to :start-val="0" :end-val="+sqyljgObj.data3" :duration="duration" />
+					</p>
 				</div>
 				<div class="f-item1">
-					<div class="percent">92%</div>
+					<div class="percent">
+						<count-to :start-val="0" :end-val="percent(sqyljgObj.data4,sqyljgObj.total)" :duration="duration" suffix="%" />
+					</div>
 					<p>民办公助</p>
-					<p>31532</p>
+					<p>
+						<count-to :start-val="0" :end-val="+sqyljgObj.data4" :duration="duration" />
+					</p>
 				</div>
 			</div>
 			<div class="flex1">
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_09.png" alt="">
-					<p class="i-text"><span>12819</span>张</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+sqyljgObj.data5" :duration="duration" />
+						张
+					</p>
 					<p class="i-text">床位总数</p>
 				</div>
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_08.png" alt="">
-					<p class="i-text"><span>4195</span>人</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+sqyljgObj.data6" :duration="duration" />
+						人
+					</p>
 					<p class="i-text">入住老年人数</p>
 				</div>
 				<div class="f-item">
 					<img src="@/assets/images/sjhome/img_09.png" alt="">
-					<p class="i-text"><span>17318</span>人</p>
+					<p class="i-text">
+						<count-to :start-val="0" :end-val="+sqyljgObj.data7" :duration="duration" />
+						人
+					</p>
 					<p class="i-text">从业人员总数</p>
 				</div>
 			</div>
@@ -107,7 +159,7 @@ export default {
 	name: 'Organization',
 	data() {
 		return {
-			duration:2000,    // 数字滚动时间
+			duration: 2000,    // 数字滚动时间
 			queryParams: {
 				dictType: 'DP001',
 				para2: null    // 区划ID locationCode
@@ -121,12 +173,11 @@ export default {
 		...mapState(['user'])
 	},
 	created() {
-		console.log(this.user)
 		this.queryParams.para2 = this.user.userData.dept.locationCode
-	},
-	mounted() {
 		this.getYljgList()
 		this.getSqyljgList()
+	},
+	mounted() {
 		this.$nextTick(() => {
 			this.echartsInit()
 		})
@@ -134,6 +185,8 @@ export default {
 	methods: {
 		echartsInit() {
 			this.orgChart = this.$echarts.init(document.getElementById('echarts'), 'dark')
+			console.log(this.sqyljgObj)
+			const list = this.sqyljgObj
 			this.orgChart.setOption({
 				title: {},
 				grid: {
@@ -160,7 +213,7 @@ export default {
 					nameTextStyle: {
 						color: '#36a3f7'
 					},
-					data: ['60+老人', '70+老人', '80+老人', '90+老人', '100+老人']
+					data: ['综合嵌入式', '日间照料', '社区中心', '养老大院', '互助院', '老年食堂']
 				},
 				yAxis: {
 					axisLine: {
@@ -170,8 +223,8 @@ export default {
 				series: [
 					{
 						type: 'bar',
-						name: '男',
-						data: [10086, 9000, 6000, 2569, 1006],
+						// name: '男',
+						data: [list.data8, list.data9, list.data10, list.data11, list.data12, list.data13],
 						barMaxWidth: '30%',
 						label: {
 							show: true,
@@ -181,22 +234,9 @@ export default {
 						itemStyle: {
 							color: '#36a3f7'
 						}
-					},
-					{
-						type: 'bar',
-						name: '女',
-						data: [11201, 6504, 5412, 1250, 1005],
-						barMaxWidth: '30%',
-						label: {
-							show: true,
-							position: 'top',
-							color: '#fff'
-						},
-						itemStyle: {
-							color: '#ff00d2'
-						}
 					}
 				]
+
 				// dataset: {
 				// 	dimensions: this.dimensions,
 				// 	source: data
@@ -208,7 +248,7 @@ export default {
 			const retdata = await getstatisticaldata(this.queryParams)
 			if (retdata.code === 200) {
 				const data = this.$DBRetToObjA(retdata.data)
-				console.log('getYljgList',data)
+				console.log('getYljgList', data)
 				this.yljgObj = data[0].vales[0]
 			}
 		},
@@ -217,9 +257,13 @@ export default {
 			const retdata = await getstatisticaldata(this.queryParams)
 			if (retdata.code === 200) {
 				const data = this.$DBRetToObjA(retdata.data)
-				console.log('getSqyljgList',data)
+				console.log('getSqyljgList', data)
 				this.sqyljgObj = data[0].vales[0]
+				console.log('sqyljgObj', this.sqyljgObj)
 			}
+		},
+		percent(a, b) {
+			return parseInt((a / b * 100).toFixed())
 		}
 	}
 }