2023/03/28

src/components/assembly/imgOpenseadragon.vue

@@ -2,7 +2,7 @@
   <div class="app">
 	  <div id="openseadragon1" class="openseadragon1"></div>
 	  <div class='button-background'>
-		  <el-upload :action="exportExcelOneURL" :data="householdcxData" :headers="tokenData" :show-file-list="false" :on-success="householdcxSucces">
+		  <el-upload style="float: inline-start;" :action="exportExcelOneURL" :data="householdcxData" :headers="tokenData" :show-file-list="false" :on-success="householdcxSucces">
 			  <el-button>导入地图</el-button>
 		  </el-upload>
 		<el-button @click='mapParametercontrol=true'>地图参数</el-button>
@@ -159,6 +159,7 @@
 	width: 100%;
 	height: 100%;
 	position: relative;
+	overflow: hidden;
 	/* background-color: #fff; */
 }
 .openseadragon1{
@@ -168,8 +169,7 @@
 .button-background{
 	position: absolute;
 	top: 15px;
-	right: 20px;
-	display: flex;
+	left: calc(100% - 245px);
 }
 .button-background>>>.el-upload{
 	margin-right: 10px;

src/components/assembly/mapOpenlayers.vue

@@ -1,14 +1,16 @@
 <template>
     <div id="mapApp">
         <div ref="maps" id="map"></div>
-        <!-- <el-upload
-            class="enterBtn"
-            action=""
-            :show-file-list="false"
-            :auto-upload="false"
-            :on-change="enterBtn">
-            <el-button slot="trigger" size="small">导入文件</el-button>
-        </el-upload> -->
+		<div class='button-background'>
+			<el-upload
+				class="enterBtn"
+				action=""
+				:show-file-list="false"
+				:auto-upload="false"
+				:on-change="enterBtn">
+				<el-button slot="trigger" size="small">导入红线图</el-button>
+			</el-upload>
+		</div>
     </div>
 </template>
 
@@ -264,9 +266,9 @@
     #map >>> .ol-rotate.ol-hidden{
         display: none;
     }
-    .enterBtn{
+    .button-background{
         position: absolute;
-        right:20px;
+        left:45px;
         top:20px;
         display:inline-block;
     }

src/components/subject/ResettlementManagement/CollectiveResettlement/CollectiveResettlementSurvey.vue

@@ -31,7 +31,7 @@
 					</div>
 
 					<div class="left-right">
-						<div class="" id="chart1"></div>
+						<div class="" id="chart1" ref="chart1"></div>
 					</div>
 				</div>
 				<!-- 中间栏图表 -->
@@ -49,7 +49,7 @@
 					</div>
 
 					<div class="center-right">
-						<div class="" id="chart2"></div>
+						<div class="" id="chart2" ref="chart2"></div>
 					</div>
 				</div>
 				<!-- 右侧栏图表 -->
@@ -68,7 +68,7 @@
 						<div class="arrange-item"></div>
 					</div>
 					<div class="right-right">
-						<div id="chart3"></div>
+						<div id="chart3" ref="chart3"></div>
 					</div>
 				</div>
 			</div>
@@ -97,7 +97,7 @@
 							<div class="content-item street">
 								<span ref="str">{{ `${item.street}` }}</span>
 							</div>
-							
+
 							<div class="content-item">{{ item.totalResettlement }}</div>
 							<div class="content-item">{{ item.resettlement }}</div>
 							<div class="content-item blue">
@@ -130,11 +130,11 @@
 							<!-- <div class="content-item ">
 								<span ref="str">{{ `${item.street}` }}</span>
 							</div> -->
-							
+
 							<div class="content-item ">
 								<span ref="str">{{ item.street }}</span>
 							</div>
-							
+
 							<div class="content-item">{{ item.totalTransition }}</div>
 							<div class="content-item">{{ item.inTransition }}</div>
 
@@ -153,56 +153,56 @@
 	export default {
 		data() {
 			return {
-				
+
 				// 安置列表
 				arrangeList: [{
 						id: 0,
 						img: require("@/assets/ResettlementManagement/survey_one.png"),
 						num: 0,
 						name: "总户数",
-						AttributeName:'totalResettlementSum'
+						AttributeName: 'totalResettlementSum'
 					},
 					{
 						id: 1,
 						img: require("../../../../assets/ResettlementManagement/survey_two.png"),
 						num: 0,
 						name: "已安置",
-						AttributeName:'resettlementSum'
+						AttributeName: 'resettlementSum'
 					},
 					{
 						id: 2,
 						img: require("../../../../assets/ResettlementManagement/survey_three.png"),
 						num: 0,
 						name: "未安置",
-						AttributeName:'notResettlementSum'
+						AttributeName: 'notResettlementSum'
 					},
 					{
 						id: 3,
 						img: require("../../../../assets/ResettlementManagement/survey_four.png"),
 						num: 0,
 						name: "部分安置",
-						AttributeName:'partResettlementSum'
+						AttributeName: 'partResettlementSum'
 					},
 					{
 						id: 5,
 						img: require("../../../../assets/ResettlementManagement/survey_four.png"),
 						num: 0,
 						name: "安置房套数",
-						AttributeName:'resettlementHouseTotalSum'
+						AttributeName: 'resettlementHouseTotalSum'
 					},
 					{
 						id: 6,
 						img: require("../../../../assets/ResettlementManagement/survey_five.png"),
 						num: 0,
 						name: "已安置套数",
-						AttributeName:'resettlementHouseSum'
+						AttributeName: 'resettlementHouseSum'
 					},
 					{
 						id: 7,
 						img: require("../../../../assets/ResettlementManagement/survey_six.png"),
 						num: 0,
 						name: "未安置套数",
-						AttributeName:'notResettlementHouseSum'
+						AttributeName: 'notResettlementHouseSum'
 					}
 				],
 				// 图表1
@@ -470,25 +470,25 @@
 				],
 
 				Project: {}, //项目信息
-				
-				arrangeForAssemble:{},//安置信息总
-				arrangeForStreet:[],//安置信息街道
-				
+
+				arrangeForAssemble: {}, //安置信息总
+				arrangeForStreet: [], //安置信息街道
+
 				transitionAssemble: {}, //过渡信息总
 				transitionStreet: [] //过渡信息街道
-				
-				
+
+
 			};
 		},
 		mounted() {
-			var myChart1 = this.$echarts.init(document.getElementById("chart1"));
-			myChart1.setOption(this.options1);
+			// var myChart1 = this.$echarts.init(document.getElementById("chart1"));
+			// myChart1.setOption(this.options1);
 
-			var myChart2 = this.$echarts.init(document.getElementById("chart2"));
-			myChart2.setOption(this.options2);
+			// var myChart2 = this.$echarts.init(document.getElementById("chart2"));
+			// myChart2.setOption(this.options2);
 
-			var myChart3 = this.$echarts.init(document.getElementById("chart3"));
-			myChart3.setOption(this.options3);
+			// var myChart3 = this.$echarts.init(document.getElementById("chart3"));
+			// myChart3.setOption(this.options3);
 		},
 		computed: {},
 		methods: {
@@ -528,6 +528,8 @@
 								thit.arrangeForStreet.push(data[key])
 							}
 						});
+						this.getchart1()
+						this.getchart2()
 					} else {
 						this.$message.error('获取失败!');
 					}
@@ -548,11 +550,285 @@
 								thit.transitionStreet.push(data[key])
 							}
 						});
+						this.getchart3()
 					} else {
 						this.$message.error('获取失败!');
 					}
 				});
 			},
+			// 安置图表1
+			getchart1() {
+				var colorLine = ["#f175a2", "#f5bc00", "#ac45f7"]
+				var data = [{
+						name: '已安置',
+						value: this.arrangeForAssemble.resettlementSum
+					},
+					{
+						name: '未安置',
+						value: this.arrangeForAssemble.notResettlementSum
+					},
+					{
+						name: '部分安置',
+						value: this.arrangeForAssemble.partResettlementSum
+					}
+				]
+				//每个图表文字提示配置单独颜色
+				function getRich() {
+					let result = {}
+					colorLine.forEach((v, i) => {
+						result[`a${i}`] = {
+							color: colorLine[i],
+							lineHeight: 22,
+							align: 'center',
+							fontSize: 14,
+						}
+						result[`hr${i}`] = {
+							borderColor: colorLine[i],
+							width: '100%',
+							borderWidth: 1,
+							height: 0,
+						}
+						result[`b${i}`] = {
+							color: colorLine[i],
+							fontWeight: 'bold',
+							lineHeight: 24,
+							align: 'center',
+							fontSize: 13
+						}
+					})
+					return result
+				}
+
+				const chart1 = this.$refs.chart1; //通过ref获取到DOM节点
+				if (chart1) {
+					const thisChart = this.$echarts.init(chart1); //利用原型调取Echarts的初始化方法
+					const option = {
+						color: colorLine,
+						legend: {
+							right: 0,
+							top: 0,
+							orient: "vertical",
+							// itemGap: 24,
+							icon: "circle"
+						},
+						series: [{
+								type: "pie",
+								radius: ["40%", "70%"],
+								center: ["50%", "50%"],
+								roseType: "radius",
+								label: {
+									// formatter: '{b|{d}%}\n{hr|}\n{a|{c}m²}',
+									formatter: params => {
+										var index = params.dataIndex
+										return `{b${index}|${params.percent==undefined?0:params.percent}%}\n{a${index}|${params.value}户}`
+									},
+									borderWidth: 10,
+									borderRadius: 0,
+									fontSize: 13,
+									padding: [0, -40],
+									rich: getRich(),
+								},
+								labelLine: {
+									normal: {
+										show: true,
+										length: 20,
+										length2: 40,
+										lineStyle: {
+											width: 1
+										},
+										position: "outer"
+									},
+									emphasis: {
+										show: true
+									}
+								},
+								data: data
+							},
+							{
+								type: "pie",
+								selectedMode: "single",
+								radius: ["0%", "25%"],
+								center: ["50%", "50%"],
+								label: {
+									show: false
+								},
+								labelLine: {
+									show: false
+								},
+								data: data
+							}
+						]
+					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
+					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
+					window.addEventListener("resize", function() {
+						thisChart.resize(); //页面大小变化后Echarts也更改大小
+					});
+				}
+			},
+			// 安置图表2
+			getchart2() {
+				var colorLine = ["#f06e00", "#48aac7", "#324fdc"]
+				var data = [{
+						name: '已安置套数',
+						value: this.arrangeForAssemble.resettlementHouseSum
+					},
+					{
+						name: '未安置套数',
+						value: this.arrangeForAssemble.notResettlementHouseSum
+					}
+				]
+				//每个图表文字提示配置单独颜色
+				function getRich() {
+					let result = {}
+					colorLine.forEach((v, i) => {
+						result[`a${i}`] = {
+							color: colorLine[i],
+							lineHeight: 22,
+							align: 'center',
+							fontSize: 14,
+						}
+						result[`b${i}`] = {
+							color: colorLine[i],
+							fontWeight: 'bold',
+							lineHeight: 24,
+							align: 'center',
+							fontSize: 13
+						}
+					})
+					return result
+				}
+
+				const chart2 = this.$refs.chart2; //通过ref获取到DOM节点
+				if (chart2) {
+					const thisChart = this.$echarts.init(chart2); //利用原型调取Echarts的初始化方法
+					const option = {
+						color: colorLine,
+						legend: {
+							right: 0,
+							top: 0,
+							orient: "vertical",
+							// itemGap: 24,
+							icon: "circle"
+						},
+						series: [{
+								type: "pie",
+								radius: ["40%", "70%"],
+								center: ["50%", "50%"],
+								roseType: "radius",
+								label: {
+									// formatter: '{b|{d}%}\n{hr|}\n{a|{c}m²}',
+									formatter: params => {
+										var index = params.dataIndex
+										return `{b${index}|${params.percent==undefined?0:params.percent}%}\n{a${index}|${params.value}套}`
+									},
+									borderWidth: 10,
+									borderRadius: 0,
+									fontSize: 13,
+									padding: [0, -40],
+									rich: getRich(),
+								},
+								labelLine: {
+									normal: {
+										show: true,
+										length: 20,
+										length2: 40,
+										lineStyle: {
+											width: 1
+										},
+										position: "outer"
+									},
+									emphasis: {
+										show: true
+									}
+								},
+								data: data
+							},
+							{
+								type: "pie",
+								selectedMode: "single",
+								radius: ["0%", "25%"],
+								center: ["50%", "50%"],
+								label: {
+									show: false
+								},
+								labelLine: {
+									show: false
+								},
+								data: data
+							}
+						]
+					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
+					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
+					window.addEventListener("resize", function() {
+						thisChart.resize(); //页面大小变化后Echarts也更改大小
+					});
+				}
+			},
+
+			// 过度图表
+			getchart3() {
+				var colorLine = ["#5b90fc", "#bcd3fc"]
+				var data = [{
+						name: '已过度',
+						value: this.transitionAssemble.transitionCompletedSum
+					},
+					{
+						name: '过度中',
+						value: this.transitionAssemble.inTransitionSum
+					}
+				]
+				const chart3 = this.$refs.chart3; //通过ref获取到DOM节点
+				if (chart3) {
+					const thisChart = this.$echarts.init(chart3); //利用原型调取Echarts的初始化方法
+					const option = {
+						title: {
+							text: "过渡情况",
+							left: "40%",
+							top: "center"
+						},
+						color: ["#5b90fc", "#bcd3fc"],
+						legend: {
+							right: "0",
+							orient: "vertical",
+							// itemGap: 24,
+							icon: "circle"
+						},
+						series: [{
+							type: "pie",
+							radius: ["40%", "70%"],
+							center: ["50%", "50%"],
+							hoverAnimation: false,
+							label: {
+								width: 97,
+								height: 28,
+								lineHeight: 28,
+								color: "#fff",
+								borderRadius: 4,
+								backgroundColor: "#3a6ee8",
+								position: "inside",
+								show: true,
+								formatter: `{b}:{c|▼}{d}%`,
+								rich: {
+									c: {
+										color: "#3a6ee8",
+										padding: [36, 0, 0, -7],
+										top: 36
+									}
+								}
+							},
+							labelLine: {
+								show: false
+							},
+							// minShowLabelAngle: 0.01,
+							data: data
+						}]
+					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
+					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
+					window.addEventListener("resize", function() {
+						thisChart.resize(); //页面大小变化后Echarts也更改大小
+					});
+				}
+			},
 			// 处理文字提示组件是否显示
 			onMouseOver(index) {
 				// 内容超出，显示文字提示内容
@@ -587,7 +863,7 @@
 			font-size: 16px;
 			display: flex;
 			background-color: #fafafa;
-			
+
 			.left,
 			.right {
 				width: 50%;
@@ -596,12 +872,16 @@
 				padding-left: 42px;
 				box-sizing: border-box;
 			}
-			.left{
-				.left-left,.left-right{
+
+			.left {
+
+				.left-left,
+				.left-right {
 					padding-left: 42px;
 					width: 50%;
 				}
-				.left-right{
+
+				.left-right {
 					border-left: 1px solid #e7e7e7;
 				}
 			}
@@ -662,11 +942,11 @@
 								height: 50px;
 							}
 						}
-						
-						.text-right{
+
+						.text-right {
 							text-align: end;
 						}
-						
+
 						.text {
 							margin-left: 10px;
 

src/components/subject/projectplan/CollectiveLandAcquisition/loadingmap.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-	import Imgopenseadragon from '../../../assembly/Imgopenseadragon.vue'
+	import Imgopenseadragon from '../../../assembly/imgOpenseadragon.vue'
 	import mapOpenlayers from '../../../assembly/mapOpenlayers.vue'
 	export default {
 		name: "Demolition",
@@ -53,7 +53,7 @@
 	    top: 0;
 	    right: 0;
 	    min-width: 0;
-	    max-width: calc(100% - 1px);
+	    max-width:  calc(100% - 170px);
 	    box-sizing: border-box;
 	}
 	.picB:before {
@@ -77,7 +77,7 @@
 	    top: 0%;
 	    left: 0px;
 	    max-width: 100%;
-	    min-width: 15px;
+	    min-width: 280px;
 	    width: 350px;
 	    cursor: move;
 	    transform: scaleY(200) rotate(180deg);