shen

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

@@ -109,7 +109,7 @@
 	import CollectiveResettlementBasic from "./CollectiveResettlementBasic.vue";
 	import CollectiveResettlementinformationFile from "./CollectiveResettlementinformationFile.vue";
 	import collectiveResettlementHouseholds from "./collectiveResettlementHouseholds.vue";
-	
+
 	export default {
 		name: "Demolition",
 		props: ['strp', 'authority'],
@@ -133,7 +133,7 @@
 				transferType:'',//流程权限 是否指定人员
 				options:[],//可选择的人
 				value: '',//选择人员
-				
+
 				// 文件
 				fileId:'',
 				loadFileList:[],
@@ -321,7 +321,7 @@
 				width: 100%;
 				height: calc(100% - 65px);
 				background-color: #fff;
-				border-radius: 24px;
+        border-radius: 24px  24px  0px  0px;
 				overflow: hidden;
 				.name-content{
 					width: 100%;

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

@@ -1,1266 +1,811 @@
 <template>
-	<div class="survey">
-		<div class="Outside">
-			<div class="survey-top">
-				<ul>
-					<li>
-						<div class="survey-top-top">
-							<div></div><span>征迁进度</span>
-						</div>
-						<div class="survey-top-name">
-							<div class="survey-top-name-one-top">
-								<div>
-									<p></p>签约期限：{{parameter.signingStartDate?parameter.signingStartDate:''}}至{{parameter.signingEndDate?parameter.signingEndDate:''}}
-								</div>
-								<span><i class="el-icon-info"></i>签约时间{{examineStatus(parameter.signingStartDate)}}天</span>
-							</div>
-							<div class="survey-top-name-one-middle">
-								<div class="survey-top-name-one-middle-one">
-									<p>时间进度</p>
-									<h3 style="color: #ff4500;" v-if="(examineStatus(parameter.signingStartDate,parameter.signingEndDate)-examineStatus(parameter.signingStartDate))<0">已超期{{Math.abs(examineStatus(parameter.signingStartDate,parameter.signingEndDate)-examineStatus(parameter.signingStartDate))}}天</h3>
-									<h3 v-if="(examineStatus(parameter.signingStartDate,parameter.signingEndDate)-examineStatus(parameter.signingStartDate))>0">还剩{{examineStatus(parameter.signingStartDate,parameter.signingEndDate)-examineStatus(parameter.signingStartDate)}}天</h3>
-									<div class="survey-top-name-one-middle-one-jd">
-										<el-progress :text-inside="true" :stroke-width="26" :percentage="examineStatus(parameter.signingStartDate)/examineStatus(parameter.signingStartDate,parameter.signingEndDate)<1 ?Math.round((examineStatus(parameter.signingStartDate)/examineStatus(parameter.signingStartDate,parameter.signingEndDate))*100):100">
-										</el-progress>
-									</div>
-								</div>
-								<div class="survey-top-name-one-middle-one" style="height: 32%;">
-									<p style="margin-bottom: 10px;">签约进度</p>
-									<div class="survey-top-name-one-middle-one-jd">
-										<el-progress :text-inside="true" :stroke-width="26" :percentage="statistics.signedEntireTotal/statistics.entireTotal<1 ?Math.round((statistics.signedEntireTotal/statistics.entireTotal)*100):100">
-										</el-progress>
-									</div>
-								</div>
-							</div>
-						</div>
-					</li>
-					<li>
-						<div class="survey-top-top">
-							<div></div><span>征迁补偿情况</span>
-						</div>
-						<div class="survey-top-name">
-							<div class="survey-top-name-top">
-								<div></div>
-								<ul>
-									<li>{{Compensation.dcmz}}：<i>{{Compensation.dchs}}</i>户，<i>{{Compensation.dcmj}}</i>㎡。</li>
-									<li>{{Compensation.hbmz}}：<i>{{Compensation.hbhs}}</i>户，<i>{{Compensation.hbmj}}</i>㎡。</li>
-									<li>{{Compensation.qjmz}}：<i>{{Compensation.qjhs}}</i>户，<i>{{Compensation.qjmj}}</i>㎡。</li>
-								</ul>
-							</div>
-							<div class="survey-butt-name">
-								<div class="survey-butt-name-right">
-									<div class="survey-butt-name-right-telle">
-										征迁户面积比例
-									</div>
-									<div class="survey-butt-name-right-buttome">
-										<div ref="AreaProportion" style="width:100%;height:100%" id="AreaProportion"></div>
-									</div>
-								</div>
-								<div class="survey-butt-name-left">
-									<div class="survey-butt-name-left-telle">
-										征迁户数比例
-									</div>
-									<div class="survey-butt-name-left-buttome">
-										<div ref="household" style="width:100%;height:100%" id="household"></div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</li>
-				</ul>
-			</div>
-			<div class="survey-butt">
-				<div class="survey-butt-right">
-					<div class="survey-top-top">
-						<div></div><span>协议签订情况</span>
-					</div>
-					<div class="survey-top-name">
-						<div class="survey-top-name-two-top">
-							<div></div>
-							<span>总征迁户数：<i>{{parameter.planHouseholdsTotal}}</i>户(实际总户数<i>{{statistics.householdTotal}}</i>户，已签约<i>{{statistics.signedHouseholdTotal}}</i>户，已腾房：<i>{{statistics.vacatedHouseholdTotal}}</i>户，已注销<i>{{statistics.destroyedHouseholdTotal}}</i>户)</span>
-						</div>
-						<div class="survey-top-name-two-middle">
-							<div ref="StatisticalChart" style="width:100%;height:100%" id="StatisticalChart"></div>
-						</div>
-						<div class="survey-top-name-two-buttom">
-							<div class="survey-top-name-two-buttom-title">已签约腾房情况</div>
-							<div class="survey-top-name-two-buttom-echart">
-								<div ref="StatisticalChartspeed" style="width:100%;height:100%"id="StatisticalChartspeed"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="survey-butt-left">
-					<div class="survey-top-top">
-						<div></div><span>签约走势图</span>
-					</div>
-					<div class="survey-top-top-telle" @click="bian">
-						签约走势折线图
-					</div>
-					<div class="survey-top-top-buttome">
-						<div ref="SignAcontract" style="width:100%;height:100%" id="SignAcontract"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="survey">
+    <div class="Outside">
+      <!-- 图表标题区域 -->
+      <div class="chart-title">
+        <div class="left"><span class="circle"></span>总安置</div>
+        <div class="right"><span class="circle"></span>过度进度</div>
+      </div>
+
+      <!-- 图表区域 -->
+      <div class="survey-chart">
+        <!-- 左侧栏图表 -->
+        <div class="left">
+          <div class="left-left">
+            <div
+              class="arrange-item"
+              v-for="item in arrangeList"
+              :key="item.id"
+              v-show="item.id < 3"
+            >
+              <div class="img">
+                <img :src="item.img" alt="" />
+              </div>
+              <div class="text">
+                <div>{{ item.num }}户</div>
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="left-right">
+            <div class="" id="chart1"></div>
+          </div>
+        </div>
+        <!-- 中间栏图表 -->
+        <div class="center">
+          <div class="center-left">
+            <div
+              class="arrange-item"
+              v-for="item in arrangeList"
+              :key="item.id"
+              v-show="item.id > 2"
+            >
+              <div class="img">
+                <img :src="item.img" alt="" />
+              </div>
+              <div class="text">
+                <div>{{ item.num }}户</div>
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="center-right">
+            <div class="" id="chart2"></div>
+          </div>
+        </div>
+        <!-- 右侧栏图表 -->
+        <div class="right">
+          <div class="right-left">
+            <div class="arrange-item">
+              <div class="img">
+                <img src="@/assets/ResettlementManagement/momery.png" alt="" />
+              </div>
+              <div class="text">
+                <div>1000&#165;</div>
+                <span>总金额</span>
+              </div>
+            </div>
+            <div class="arrange-item"></div>
+            <div class="arrange-item"></div>
+          </div>
+          <div class="right-right">
+            <div id="chart3"></div>
+          </div>
+        </div>
+      </div>
+      <!-- 表格标题区域 -->
+      <div class="table—title">
+        <div class="left" style="border-right:1px solid #e7e7e7">
+          <span class="circle"></span>安置列表
+        </div>
+        <div class="right"><span class="circle"></span>过度列表</div>
+      </div>
+      <!-- 表格内容区域 -->
+      <div class="survey-table">
+        <div class="left">
+          <div class="table-header">
+            <div
+              class="header-item"
+              v-for="item in arrangeTableHeader"
+              :key="item.id"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="table-wrapper">
+            <div
+              class="table-content"
+              v-for="item in arrangeTableData"
+              :key="item.id"
+            >
+              <el-tooltip
+                :content="item.street"
+                :disabled="isShowTooltip"
+                effect="dark"
+                placement="top"
+              >
+                <div
+                  class="content-item street"
+                  @mouseover="onMouseOver(item.id + 1 * item.id)"
+                >
+                  <span ref="str">{{ `${item.street}` }}</span>
+                </div>
+              </el-tooltip>
+
+              <div class="content-item">{{ item.arrangeSumHost }}</div>
+              <div class="content-item">{{ item.arrangeHosted }}</div>
+              <div class="content-item blue">
+                {{ item.arrangeHostPercentage }}
+              </div>
+              <div class="content-item">{{ item.arrangeSumSet }}</div>
+              <div class="content-item">{{ item.arrangeSeted }}</div>
+              <div class="content-item blue">
+                {{ item.arrangeSetPercentage }}
+              </div>
+
+              <el-tooltip
+                :content="item.remarks"
+                :disabled="isShowTooltip"
+                effect="dark"
+                placement="top"
+              >
+                <div
+                  class="content-item remark"
+                  @mouseover="onMouseOver(item.id + 1 * item.id + 1)"
+                >
+                  <span ref="str">{{ `${item.remarks}` }}</span>
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+
+        <div class="right">
+          <div class="table-header">
+            <div
+              class="header-item"
+              v-for="item in transitionTableHeader"
+              :key="item.id"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="table-wrapper">
+            <div
+              class="table-content"
+              v-for="item in transitionTableData"
+              :key="item.id"
+            >
+              <div class="content-item ">
+                <span ref="str">{{ `${item.street}` }}</span>
+              </div>
+
+              <div class="content-item">{{ item.arrangeSumHost }}</div>
+              <div class="content-item">{{ item.arrangeHosted }}</div>
+
+              <div class="content-item">
+                {{ item.transitionHost }}
+              </div>
+
+              <div class="content-item">{{ item.transitionMerony }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		name: "survey",
-		props: ['strpdetails'],
-		data() {
-			return {
-				parameter:[],
-				Project:{},//项目信息
-				statistics:{},//协议签订情况信息
-				Compensation:[],//征迁补偿情况
-				indes:[],
-				index:[]
-			}
-		},
-		mounted() {
-		},
-		computed:{
-			//获取天数（计算两个值的天数，第一个是必填的，第2个如果不填这是今天的）
-			examineStatus() {
-				return (value,data) => {
-					if(!value){
-						return ' '
-					}
-					var nowTime=''
-					if(data){
-						const a1 = data.split(' ');
-						const b1 = a1[0].split('-');
-						nowTime = new Date(b1[0], b1[1] - 1, b1[2]);
-					}else{
-						nowTime = new Date();
-					}
-					const a = value.split(' ');
-					const b = a[0].split('-');
-					const oldTime = new Date(b[0], b[1] - 1, b[2]);
-					const over = Math.floor((nowTime - oldTime) / (1000 * 60 * 60 * 24))
-					return over
-				}
-			},
-		},
-		methods: {
-			getparameter(row){
-				this.Project=row
-				this.parameter=row.bussiness
-				this.getStatistics()
-				this.getStatistics2()
-				this.getStatistics3()
-			},
-			//获取协议签订信息
-			getStatistics(){
-					this.$http.get("api/auth/projectformal/statistics?projectId=" + this.parameter.id,null).then((res) => {
-						if (res.status == 200 && res.data.code == 0) {
-							this.statistics=res.data.statistics
-							this.setMyEchart()
-							this.setMyEchartmeistg()
-						} else {
-							this.$message.error('获取失败!');
-						}
-					});
-			},
-			//获取征迁补偿情况
-			getStatistics2(){
-					this.$http.get("api/auth/projectformal/statistics2?projectId=" + this.parameter.id,null).then((res) => {
-						if (res.status == 200 && res.data.code == 0) {
-							this.Compensation=res.data.list
-							var data={
-								dcmz:'调产安置（房票）',
-								dcmj:0,
-								dchs:0,
-								hbmz:'货币安置',
-								hbmj:0,
-								hbhs:0,
-								qjmz:'迁建安置',
-								qjmj:0,
-								qjhs:0,
-							}
-							this.Compensation.forEach((item,index)=>{
-								if(item.placement_way=='混合'){
-									data.dcmj=item.area
-									data.dchs=item.hs
-								}else if(item.placement_way=='迁建'){
-									data.qjmj=item.area
-									data.qjhs=item.hs
-								}else if(item.placement_way=='货币'){
-									data.hbmj=item.area
-									data.hbhs=item.hs
-								}
-							})
-							this.Compensation=data
-							this.setAreaProportion()
-							this.sethousehold()
-						} else {
-							this.$message.error('获取失败!');
-						}
-					});
-			},
-			//签约走势图
-			getStatistics3(){
-					this.$http.get("api/auth/projectformal/statistics3?projectId=" + this.parameter.id,null).then((res) => {
-						if (res.status == 200 && res.data.code == 0) {
-							var data=res.data.list
-							this.indes=[]
-							this.index=[]
-							if(data.length==0){
-								this.indes=['xx/xx','xx/xx','xx/xx']
-								this.index=[]
-							}
-							data.forEach((item)=>{
-								if(item.signing_date_of_compensation_agreement==null){
-									item.signing_date_of_compensation_agreement='xxxx-xx-xx'
-								}
-								var data=item.signing_date_of_compensation_agreement.substring(5,7)+'/'+item.signing_date_of_compensation_agreement.substring(8,10)
-								this.indes.push(data)
-								this.index.push(item.hs)
-							})
-							this.SetSignAcontract()
-						} else {
-							this.$message.error('获取失败!');
-						}
-					});
-			},
-			bian(){
-				if(this.indes.length>15){
-					this.indes =['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-					this.index =[220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
-				}else{
-					this.indes =['10/01','10/02','10/03','10/04','10/05','10/06','10/07','10/08','10/09','10/10','10/11','10/12','10/13','10/14','10/15','10/16','10/17','10/18','10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26']
-					this.index =[200, 802, 190, 204, 200, 300, 310, 251, 211, 521, 161, 171, 161, 151, 131, 451, 221, 51, 801, 401, 201, 301, 501, 201, 101, 201]
-				}
-				
-				this.SetSignAcontract()
-			},
-			SetSignAcontract() {
-				const SignAcontract = this.$refs.SignAcontract; //通过ref获取到DOM节点
-				if (SignAcontract) {
-					const thisChart = this.$echarts.init(SignAcontract); //利用原型调取Echarts的初始化方法
-					const option = {
-						// backgroundColor: '#fff',
-						grid: {
-							left: '5%',
-							right: '5%',
-							top: '5%',
-							bottom: '0%',
-							containLabel: true
-						},
-						tooltip: {
-							trigger: 'axis',
-							axisPointer: {
-								type: 'line',
-								lineStyle: {
-									color: 'rgba(50, 216, 205, 1)'
-								},
-							}
-						},
-						xAxis: [{
-							// type: '',
-							boundaryGap: false,
-							axisLine: {
-								show: true,
-								lineStyle: {
-									color: "#A1A7B3"
-								}
-							},
-							axisLabel: {
-								color: '#A1A7B3'
-							},
-							splitLine: {
-								show: false,
-								lineStyle: {
-									color: '#A1A7B3',
-									type: 'dashed'
-								}
-							},
-							axisTick: {
-								show: false
-							},
-							data: this.indes
-						}],
-						yAxis: [{
-								type: 'value',
-								name: '',
-								padding: 5,
-								// max: 1000,
-								splitLine: {
-									show: true,
-									lineStyle: {
-										color: '#A1A7B3',
-										type: 'dashed'
-									}
-								},
-								axisLine: {
-									show: true,
-									lineStyle: {
-										color: "#A1A7B3"
-									}
-								},
-								axisLabel: {
-									show: true,
-									margin: 10,
-									textStyle: {
-										color: '#A1A7B3'
-
-									}
-								},
-								axisTick: {
-									show: false
-								}
-							},
-
-						],
-						series: [{
-								name: '签约',
-								type: 'line',
-								smooth: true,
-								stack: '总量',
-								symbolSize: 5,
-								showSymbol: false,
-								itemStyle: {
-									normal: {
-										color: '#23D0C4',
-										lineStyle: {
-											color: "#23D0C4",
-											width: 2
-										},
-									}
-								},
-								areaStyle: {
-									normal: {
-										color: {
-												  type: 'linear',
-												  x: 0,
-												  y: 0,
-												  x2: 0,
-												  y2: 1,
-												  colorStops: [{
-												    offset: 0,
-												    color: '#42C8AB' // 0% 处的颜色
-												  }, {
-												    offset: 1,
-												    color: '#74F0D4' // 100% 处的颜色
-												  }],
-												  globalCoord: false // 缺省为 false
-										},
-									},
-									
-								},
-								data: this.index
-							},
-						]
-					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
-					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
-					window.addEventListener("resize", function() {
-						thisChart.resize(); //页面大小变化后Echarts也更改大小
-					});
-				}
-			},
-			sethousehold() {
-				var dchs=this.Compensation.dchs//调产安置（房票）
-				var hbhs=this.Compensation.hbhs//货币
-				var qjhs=this.Compensation.qjhs//迁建
-				const household = this.$refs.household; //通过ref获取到DOM节点
-				if (household) {
-					const thisChart = this.$echarts.init(household); //利用原型调取Echarts的初始化方法
-					const option = {
-						legend: {
-							data: ['调产', '货币','迁建',],
-							top: '0%',
-							left: '80%',
-							textStyle: { //图例文字的样式
-								color: '#3e3e3e',
-								fontSize: 14
-							}
-
-						},
-						series: [{
-								type: 'pie',
-								radius: [0, '25%'],
-								label: {
-									fontSize: 0
-								},
-								labelLine: {
-									show: false
-								},
-								data: [{
-										value: dchs,
-										name: '调产',
-										itemStyle: {
-											color: '#017EE3',
-											fontSize: 14
-										}
-
-									},
-									{
-										value: hbhs,
-										name: '货币',
-										itemStyle: {
-											color: '#D82C69',
-											fontSize: 14
-										}
-									},
-									{
-										value: qjhs,
-										name: '迁建',
-										itemStyle: {
-											color: '#7d66c9',
-											fontSize: 14
-										}
-									}
-								]
-							},
-
-							{
-
-								type: 'pie',
-								radius: ["35%", '70%'],
-								center: ['50%', '50%'],
-								labelLine: {
-									length: 10,
-								},
-								roseType: 'radius',
-								itemStyle: {
-									borderRadius: 0
-								},
-								data: [{
-										value: dchs,
-										name: '调产',
-										itemStyle: {
-											color: '#017EE3'
-										},
-										label: {
-											// formatter: '{b|{d}%}\n{hr|}\n{a|{c}户}',
-											formatter: params => {
-											    return `{b|${params.percent==undefined?0:params.percent}%}\n{hr|}\n{a|${params.value}户}`
-											  },
-											borderWidth: 0,
-											borderRadius: 0,
-											fontSize: 13,
-											rich: {
-												a: {
-													color: '#017EE3',
-													lineHeight: 22,
-													align: 'center',
-													fontSize: 14,
-												},
-												hr: {
-													borderColor: '#017EE3',
-													width: '100%',
-													borderWidth: 1,
-													height: 0,
-												},
-												b: {
-													color: '#017EE3',
-													fontWeight: 'bold',
-													lineHeight: 24,
-													align: 'center',
-													fontSize: 13,
-												},
-											}
-										}
-									},
-									{
-										value: hbhs,
-										name: '货币',
-										itemStyle: {
-											color: '#D82C69'
-										},
-										label: {
-											// formatter:'{b|{d}%}\n{hr|}\n{a|{c}户}',
-											formatter: params => {
-											    return `{b|${params.percent==undefined?0:params.percent}%}\n{hr|}\n{a|${params.value}户}`
-											  },
-											borderWidth: 1,
-											borderRadius: 4,
-											fontSize: 13,
-											// align: 'center',
-											rich: {
-												a: {
-													color: '#D82C69',
-													lineHeight: 22,
-													align: 'center',
-													fontSize: 14
-												},
-												hr: {
-													borderColor: '#D82C69',
-													width: '100%',
-													borderWidth: 1,
-													height: 0
-												},
-												b: {
-													color: '#D82C69',
-													fontSize: 13,
-													fontWeight: 'bold',
-													lineHeight: 24,
-													align: 'center',
-												},
-											}
-										}
-									},
-									{
-										value: qjhs,
-										name: '迁建',
-										itemStyle: {
-											color: '#7d66c9'
-										},
-										label: {
-											// formatter:'{b|{d}%}\n{hr|}\n{a|{c}户}',
-											formatter: params => {
-											    return `{b|${params.percent==undefined?0:params.percent}%}\n{hr|}\n{a|${params.value}户}`
-											  },
-											borderWidth: 1,
-											borderRadius: 4,
-											fontSize: 13,
-											// align: 'center',
-											rich: {
-												a: {
-													color: '#7d66c9',
-													lineHeight: 22,
-													align: 'center',
-													fontSize: 14
-												},
-												hr: {
-													borderColor: '#7d66c9',
-													width: '100%',
-													borderWidth: 1,
-													height: 0
-												},
-												b: {
-													color: '#7d66c9',
-													fontSize: 13,
-													fontWeight: 'bold',
-													lineHeight: 24,
-													align: 'center',
-												},
-											}
-										}
-									}
-								]
-							}
-						]
-					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
-					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
-					window.addEventListener("resize", function() {
-						thisChart.resize(); //页面大小变化后Echarts也更改大小
-					});
-				}
-			},
-			setAreaProportion() {
-				var name=this.Compensation.dcmj+this.Compensation.hbmj+this.Compensation.qjmj
-				var dcmj=Math.round((this.Compensation.dcmj/name)*100)//调产安置（房票）
-				var hbmj=Math.round((this.Compensation.hbmj/name)*100)//货币
-				var qjmj=Math.round((this.Compensation.qjmj/name)*100)//迁建
-				if(name==0){
-					dcmj=33.33
-					hbmj=33.33
-					qjmj=33.33
-				}
-				const AreaProportion = this.$refs.AreaProportion; //通过ref获取到DOM节点
-				if (AreaProportion) {
-					const thisChart = this.$echarts.init(AreaProportion); //利用原型调取Echarts的初始化方法
-					const option = {
-						xAxis: {
-							type: 'value',
-							show: false,
-						},
-						yAxis: {
-							type: 'category',
-							show: false,
-						},
-						grid: {
-							bottom: 0,
-							right: 0,
-							left: 0,
-						},
-						series: [{
-								name: '调产安置（房票）',
-								type: 'bar',
-								stack: '总量',
-								data: [dcmj],
-								barWidth: 50,
-								itemStyle: {
-									color: '#017EE3'
-								},
-								label: {
-									show: true,
-									formatter: params => {
-									    return `{name|${params.value==0?'':'调产安置（房票）'}}\n{value|${params.value==0?'':name==0?'0%':params.value+'%'} ${params.value==0?'':'（'+this.Compensation.dcmj+'㎡）'}}`
-									  },
-									align: 'left',
-									position: [8, -15],
-									rich: {
-										value: {
-											color: '#fff',
-											fontSize: 15,
-											fontWeight: 500,
-											lineHeight: 80,
-										},
-										name: {
-											color: '#5B6166',
-											fontSize: 13,
-											fontWeight: 400,
-											lineHeight: 0,
-										},
-									},
-								},
-							},
-							{
-								name: '货币安置',
-								type: 'bar',
-								stack: '总量',
-								data: [hbmj],
-								barWidth: 50,
-								itemStyle: {
-									color: '#DC2888'
-								},
-								label: {
-									show: true,
-									// formatter: '{name|{a}}\n{value|{c}%（1000㎡）}',
-									formatter: params => {
-									    // return `{name|货币安置}\n{value|${name==0?0:params.value}%（${this.Compensation.hbmj}㎡）}`
-										 return `{name|${params.value==0?'':'货币安置'}}\n{value|${params.value==0?'':name==0?'0%':params.value+'%'} ${params.value==0?'':'（'+this.Compensation.hbmj+'㎡）'}}`
-									  },
-									align: 'left',
-									position: [8, -15],
-									rich: {
-										value: {
-											color: '#fff',
-											fontSize: 15,
-											fontWeight: 500,
-											lineHeight: 80,
-										},
-										name: {
-											color: '#5B6166',
-											fontSize: 13,
-											fontWeight: 400,
-											lineHeight: 0,
-										},
-									},
-								},
-							},
-							{
-								name: '迁建安置',
-								type: 'bar',
-								stack: '总量',
-								data: [qjmj],
-								barWidth: 50,
-								itemStyle: {
-									color: '#7D66C9'
-								},
-								label: {
-									show: true,
-									// formatter: '{name|{a}}\n{value|{c}%(10000㎡)}',
-									formatter: params => {
-									    // return `{name|迁建安置}\n{value|${name==0?0:params.value}%（${this.Compensation.qjmj}㎡）}`
-										return `{name|${params.value==0?'':'迁建安置'}}\n{value|${params.value==0?'':name==0?'0%':params.value+'%'} ${params.value==0?'':'（'+this.Compensation.qjmj+'㎡）'}}`
-									  },
-									align: 'left',
-									position: [8, -15],
-									rich: {
-										value: {
-											color: '#fff',
-											fontSize: 13,
-											fontWeight: 500,
-											lineHeight: 80,
-										},
-										name: {
-											color: '#5B6166',
-											fontSize: 15,
-											fontWeight: 400,
-											lineHeight: 0,
-										},
-									},
-								},
-							},
-						],
-					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
-					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
-					window.addEventListener("resize", function() {
-						thisChart.resize(); //页面大小变化后Echarts也更改大小
-					});
-				}
-			},
-			setMyEchart() {
-				var Signed=this.statistics.signedEntireTotal//已签约
-				var Unsigned=this.statistics.unsignedEntireTotal//未签约
-				// if(Signed==0){Signed=1}
-				// if(Unsigned==0){Unsigned=1}
-				const StatisticalChart = this.$refs.StatisticalChart; //通过ref获取到DOM节点
-				if (StatisticalChart) {
-					const thisChart = this.$echarts.init(StatisticalChart); //利用原型调取Echarts的初始化方法
-					const option = {
-						legend: {
-							data: ['已签约', '未签约', ],
-							top: '0%',
-							left: '80%',
-							textStyle: { //图例文字的样式
-								color: '#000',
-							}
-						},
-						series: [{
-								type: 'pie',
-								radius: [0, '30%'],
-								label: {
-									fontSize: 0
-								},
-								labelLine: {
-									show: false
-								},
-								data: [{
-										value: Signed,
-										name: '已签约',
-										itemStyle: {
-											color: '#0199A8'
-										}
-									},
-									{
-										value: Unsigned,
-										name: '未签约',
-										itemStyle: {
-											color: '#D82C69'
-										}
-									}
-								]
-							},
-							{
-
-								type: 'pie',
-								radius: ["40%", '75%'],
-								center: ['50%', '50%'],
-								labelLine: {
-									length: 10,
-								},
-								roseType: 'radius',
-								itemStyle: {
-									borderRadius: 0
-								},
-								data: [{
-										value: Signed,
-										name: '已签约',
-										itemStyle: {
-											color: '#0199A8'
-										},
-										label: {
-											// formatter: '{b|{d}%}\n{hr|}\n{a|{c}户}',
-											// formatter: '{b|{d}%}',
-											formatter: params => {
-											    return `{b|${params.percent==undefined?0:params.percent}%}`
-											  },
-											borderWidth: 0,
-											borderRadius: 0,
-											rich: {
-												a: {
-													color: '#0199A8',
-													lineHeight: 22,
-													align: 'center',
-													fontSize: 14,
-
-												},
-												hr: {
-													borderColor: '#0199A8',
-													width: '100%',
-													borderWidth: 1,
-													height: 0
-												},
-												b: {
-													color: '#0199A8',
-													fontWeight: 'bold',
-													lineHeight: 24,
-													align: 'center',
-													fontSize: 15,
-												},
-											}
-										}
-									},
-									{
-										value: Unsigned,
-										name: '未签约',
-										itemStyle: {
-											color: '#D82C69'
-										},
-										label: {
-											// formatter: '{b|{d}%}\n{hr|}\n{a|{c}户}',
-											// formatter: '{b|{d}%}',
-											formatter: params => {
-											    return `{b|${params.percent==undefined?0:params.percent}%}`
-											  },
-											borderWidth: 1,
-											borderRadius: 4,
-											fontSize: 14,
-											rich: {
-												a: {
-													color: '#D82C69',
-													lineHeight: 22,
-													align: 'center',
-													fontSize: 14,
-												},
-												hr: {
-													borderColor: '#D82C69',
-													width: '100%',
-													borderWidth: 1,
-													height: 0
-												},
-												b: {
-													color: '#D82C69',
-													fontWeight: 'bold',
-													lineHeight: 24,
-													align: 'center',
-													fontSize: 15,
-												},
-											}
-
-										}
-									}
-								]
-							}
-						]
-					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
-					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
-					window.addEventListener("resize", function() {
-						thisChart.resize(); //页面大小变化后Echarts也更改大小
-					});
-				}
-			},
-			setMyEchartmeistg() {
-				var VacateARoom=Math.round((this.statistics.vacatedEntireTotal/this.statistics.signedEntireTotal)*100)//已腾房
-				var notVacatedEntireTotal=Math.round((this.statistics.notVacatedEntireTotal/this.statistics.signedEntireTotal)*100)//未腾房
-				if(this.statistics.signedEntireTotal==0){VacateARoom=50;notVacatedEntireTotal=50}
-				// var destroyedEntireTotal=this.statistics.destroyedEntireTotal//已注销
-				const StatisticalChartspeed = this.$refs.StatisticalChartspeed; //通过ref获取到DOM节点
-				if (StatisticalChartspeed) {
-					const thisChart = this.$echarts.init(StatisticalChartspeed); //利用原型调取Echarts的初始化方法
-					const option = {
-						xAxis: {
-							type: 'value',
-							show: false,
-						},
-						yAxis: {
-							type: 'category',
-							show: false,
-						},
-						grid: {
-							top:0,
-							bottom: 0,
-							right: 0,
-							left: 0,
-						},
-						series: [{
-								name: '已腾房',
-								type: 'bar',
-								stack: '总量',
-								data: [VacateARoom],
-								barWidth: 32,
-								itemStyle: {
-									color: '#469BE8'
-								},
-								label: {
-									show: true,
-									// formatter: '{name|{a}}\n{value|{c}%}',
-									formatter: params => {
-									    // return `{name|已腾房}\n{value|${this.statistics.signedEntireTotal==0?0:params.value}%}`
-									return `{name|${params.value==0?'':'已腾房'}}\n{value|${params.value==0?'':this.statistics.signedEntireTotal==0?'0%':params.value+'%'}}`
-									  },
-									align: 'left',
-									position: [8, -15],
-									rich: {
-										value: {
-											color: '#fff',
-											fontSize: 15,
-											fontWeight: 500,
-											lineHeight: 65,
-										},
-										name: {
-											color: '#5B6166',
-											fontSize: 15,
-											fontWeight: 400,
-											lineHeight: 0,
-										},
-									},
-								},
-							},
-							// {
-							// 	name: '已注销',
-							// 	type: 'bar',
-							// 	stack: '总量',
-							// 	data: [destroyedEntireTotal],
-							// 	barWidth: 32,
-							// 	itemStyle: {
-							// 		color: '#0199A8'
-							// 	},
-							// 	label: {
-							// 		show: true,
-							// 		formatter: '{name|{a}}\n{value|{c}%}',
-							// 		align: 'left',
-							// 		position: [8, -15],
-							// 		rich: {
-							// 			value: {
-							// 				color: '#fff',
-							// 				fontSize: 15,
-							// 				fontWeight: 500,
-							// 				lineHeight: 65,
-							// 			},
-							// 			name: {
-							// 				color: '#5B6166',
-							// 				fontSize: 15,
-							// 				fontWeight: 400,
-							// 				lineHeight: 0,
-							// 			},
-							// 		},
-							// 	},
-							// },
-							{
-								name: '未腾房',
-								type: 'bar',
-								stack: '总量',
-								data: [notVacatedEntireTotal],
-								barWidth: 32,
-								itemStyle: {
-									color: '#7D66C9'
-								},
-								label: {
-									show: true,
-									// formatter: '{name|{a}}\n{value|{c}%}',
-									formatter: params => {
-									    return `{name|未腾房}\n{value|${this.statistics.signedEntireTotal==0?0:params.value}%}`
-									  },
-									align: 'left',
-									position: [8, -15],
-									rich: {
-										value: {
-											color: '#fff',
-											fontSize: 15,
-											fontWeight: 500,
-											lineHeight: 65,
-										},
-										name: {
-											color: '#5B6166',
-											fontSize: 15,
-											fontWeight: 400,
-											lineHeight: 0,
-										},
-									},
-								},
-							},
-						],
-					}; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
-					thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
-					window.addEventListener("resize", function() {
-						thisChart.resize(); //页面大小变化后Echarts也更改大小
-					});
-				}
-			},
-		}
-	}
+export default {
+  data() {
+    return {
+      // 安置列表
+      arrangeList: [
+        {
+          id: 0,
+          img: require("@/assets/ResettlementManagement/survey_one.png"),
+          num: 1000,
+          name: "没有安置"
+        },
+        {
+          id: 1,
+          img: require("../../../../assets/ResettlementManagement/survey_two.png"),
+          num: 1000,
+          name: "完全安置"
+        },
+        {
+          id: 2,
+          img: require("../../../../assets/ResettlementManagement/survey_three.png"),
+          num: 1000,
+          name: "部分安置"
+        },
+        {
+          id: 3,
+          img: require("../../../../assets/ResettlementManagement/survey_four.png"),
+          num: 1000,
+          name: "没有安置"
+        },
+        {
+          id: 4,
+          img: require("../../../../assets/ResettlementManagement/survey_five.png"),
+          num: 1000,
+          name: "完全安置"
+        },
+        {
+          id: 5,
+          img: require("../../../../assets/ResettlementManagement/survey_six.png"),
+          num: 1000,
+          name: "部分安置"
+        }
+      ],
+      // 图表1
+      options1: {
+        color: ["#f175a2", "#f5bc00", "#ac45f7"],
+        legend: {
+          right: "0",
+          orient: "vertical",
+          itemGap: 24,
+          icon: "circle"
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["50%", "80%"],
+            center: ["40%", "50%"],
+            roseType: "area",
+            label: {
+              show: true,
+              formatter: `{c}m({d|{d}%})`,
+
+              rich: {
+                d: {
+                  color: "#5246f7"
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: true,
+                length: 5,
+                length2: 10,
+                lineStyle: {
+                  width: 1
+                },
+                position: "outer"
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            data: [
+              { name: "完全安置", value: 500 },
+              { name: "部分安置", value: 200 },
+              { name: "没有安置", value: 300 }
+            ]
+          },
+          {
+            type: "pie",
+            selectedMode: "single",
+            radius: ["0%", "30%"],
+            center: ["40%", "50%"],
+            label: {
+              position: "inner",
+              fontSize: 14
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: "完全安置", value: 500 },
+              { name: "部分安置", value: 200 },
+              { name: "没有安置", value: 300 }
+            ]
+          }
+        ]
+      },
+      // 图表2
+      options2: {
+        color: ["#f06e00", "#48aac7", "#324fdc"],
+        legend: {
+          right: "0",
+          orient: "vertical",
+          itemGap: 24,
+          icon: "circle"
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["50%", "80%"],
+            center: ["40%", "50%"],
+            roseType: "area",
+            label: {
+              lineHeight: 18,
+              show: true,
+
+              formatter: "{c}m({d|{d}%})\n",
+
+              rich: {
+                d: {
+                  color: "#5246f7"
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: true,
+                length: 5,
+                length2: 10,
+                lineStyle: {
+                  width: 1
+                },
+                position: "outer"
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            data: [
+              { name: "完全安置", value: 600 },
+              { name: "部分安置", value: 400 },
+              { name: "没有安置", value: 700 }
+            ]
+          },
+          {
+            type: "pie",
+            selectedMode: "single",
+            radius: ["0%", "30%"],
+            center: ["40%", "50%"],
+            label: {
+              position: "inner",
+              fontSize: 14
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: "完全安置", value: 600 },
+              { name: "部分安置", value: 400 },
+              { name: "没有安置", value: 700 }
+            ]
+          }
+        ]
+      },
+      // 图表3
+      options3: {
+        title: {
+          text: "过渡安置",
+          left: "29%",
+          top: "center"
+        },
+        color: ["#5b90fc", "#bcd3fc"],
+        legend: {
+          right: "0",
+          orient: "vertical",
+          itemGap: 24,
+          icon: "circle"
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["40%", "50%"],
+            roseType: "area",
+            label: {
+              width: 97,
+              height: 28,
+              lineHeight: 28,
+              color: "#fff",
+              borderRadius: 4,
+              backgroundColor: "#3a6ee8",
+              position: "inside",
+              show: true,
+              formatter: `{b}:{d}%`,
+              rich: {}
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: "已安置", value: 500 },
+              { name: "未安置", value: 200 }
+            ]
+          }
+        ]
+      },
+
+      //是否显示文字提示组件
+      isShowTooltip: false,
+      //安置表格表头列
+      arrangeTableHeader: [
+        { id: 0, name: "街道" },
+        { id: 1, name: "安置总户数" },
+        { id: 2, name: "已安置户数" },
+        { id: 3, name: "安置户数比例" },
+        { id: 4, name: "安置房总套数" },
+        { id: 5, name: "已安置套数" },
+        { id: 6, name: "安置套数比例" },
+        { id: 7, name: "备注" }
+      ],
+      // 安置表格数据
+      arrangeTableData: [
+        {
+          id: 0,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 1,
+          street: "白沙提街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 2,
+          street: "祥福街街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 3,
+          street: "上塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 4,
+          street: "瓜山街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 5,
+          street: "光明街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        },
+        {
+          id: 6,
+          street: "蔡马人家街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          arrangeHostPercentage: "20%", //安置户数比例
+          arrangeSumSet: 564, //安置房总套数
+          arrangeSeted: 321, //已安置套数
+          arrangeSetPercentage: "25%", //安置套数比例
+          remarks: "未安置套数不多,还需加油把剩下的弄完" //备注
+        }
+      ],
+
+      // 过渡表格表头列
+      transitionTableHeader: [
+        {
+          id: 0,
+          name: "街道"
+        },
+        {
+          id: 1,
+          name: "安置总户数"
+        },
+        {
+          id: 2,
+          name: "已完成户数"
+        },
+        {
+          id: 3,
+          name: "过渡户数"
+        },
+        {
+          id: 4,
+          name: "已放过渡费"
+        }
+      ],
+
+      // 过渡表格数据
+      transitionTableData: [
+        {
+          id: 0,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          transitionHost: 3564, //过渡户数
+          transitionMerony: 256412 //已发放过过渡费
+        },
+        {
+          id: 1,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          transitionHost: 3564, //过渡户数
+          transitionMerony: 256412 //已发放过过渡费
+        },
+        {
+          id: 2,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          transitionHost: 3564, //过渡户数
+          transitionMerony: 256412 //已发放过过渡费
+        },
+        {
+          id: 3,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          transitionHost: 3564, //过渡户数
+          transitionMerony: 256412 //已发放过过渡费
+        },
+        {
+          id: 4,
+          street: "古塘街道",
+          arrangeSumHost: 1356, //安置总户数
+          arrangeHosted: 869, //已安置户数
+          transitionHost: 3564, //过渡户数
+          transitionMerony: 256412 //已发放过过渡费
+        }
+      ]
+    };
+  },
+  mounted() {
+    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 myChart3 = this.$echarts.init(document.getElementById("chart3"));
+    myChart3.setOption(this.options3);
+  },
+  computed: {},
+  methods: {
+    // 处理文字提示组件是否显示
+    onMouseOver(index) {
+      // 内容超出，显示文字提示内容
+      const tag = this.$refs.str;
+      console.log("index------", tag, index);
+      const parentWidth = tag[index].parentNode.offsetWidth; // 获取元素父级可视宽度
+      console.log("parentWidth-------", parentWidth);
+      const contentWidth = tag[index].offsetWidth; // 获取元素可视宽度
+      console.log("contentWidth-------", contentWidth);
+      this.isShowTooltip = contentWidth <= parentWidth;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.survey {
-		width: 100%;
-		height: 100%;
-		i{
-			font-style: initial;
-			font-size: 17px;
-			font-weight: 600;
-		}
-		.Outside {
-			width: 100%;
-			height: 100%;
-
-			.survey-top-top {
-				// height: 55px;
-				display: flex;
-				border-bottom: 1px solid #e6e6e6;
-				padding: 10px 30px;
-				box-sizing: border-box;
-
-				div {
-					width: 12px;
-					height: 12px;
-					background: #469BE8;
-					border-radius: 50%;
-					margin: 7.5px;
-				}
-				span {
-					height: 27px;
-					font-size: 18px;
-					font-weight: bold;
-					color: #333333;
-					line-height: 23px;
-				}
-			}
-
-			.survey-top {
-				width: 100%;
-				height: 50%;
-
-				ul {
-					width: 100%;
-					height: 100%;
-					display: flex;
-
-					li {
-						width: 30%;
-						height: 100%;
-						border-left: 1px solid #E6E6E6;
-						border-bottom: 1px solid #E6E6E6;
-
-						&:nth-child(2) {
-							border-left: none;
-							width: 70%;
-							border-left: 1px solid #E6E6E6;
-						}
-
-						.survey-top-name {
-							height: calc(100% - 48px);
-							.survey-top-name-top {
-								display: flex;
-								height: 24px;
-								font-size: 13px;
-								color: #666666;
-								margin: 10px 35px;
-								div {
-									width: 12px;
-									height: 12px;
-									background: #DC2888;
-									border-radius: 50%;
-									margin: 6px 3px;
-								}
-								ul {
-									margin: 3px 2px;
-									box-sizing: border-box;
-									display: flex;
-									line-height: 18px;
-									li {
-										width: auto;
-										border-left: none;
-										border-bottom:none;
-										border-right: 1px solid #666;
-										margin-left: 5px;
-										i {
-											color: #FB5032;
-										}
-									}
-								}
-							}
-							.survey-butt-name {
-								width: 100%;
-								height: calc(100% - 99px);
-								display: flex;
-							
-								.survey-butt-name-right {
-									width: 45%;
-									height: 100%;
-									box-sizing: border-box;
-									margin-left: 40px;
-							
-									.survey-butt-name-right-telle {
-										font-size: 17px;
-										font-weight: 400;
-										color: #000000;
-									}
-							
-									.survey-butt-name-right-buttome {
-										height: calc(100% - 26px);
-									}
-								}
-							
-								.survey-butt-name-left {
-									width: 55%;
-									height: 100%;
-									box-sizing: border-box;
-									margin-left: 40px;
-							
-									.survey-butt-name-left-telle {
-										font-size: 17px;
-										font-weight: 400;
-										color: #000000;
-									}
-							
-									.survey-butt-name-left-buttome {
-										width: 100%;
-										height: calc(100% - 26px);
-									}
-								}
-							}
-							.survey-top-name-one-top {
-								height: 25%;
-								box-sizing: border-box;
-
-								div {
-									padding: 20px 0 0 40px;
-									height: 20px;
-									font-size: 14px;
-									color: #000000;
-									display: flex;
-									font-weight: 400;
-
-									p {
-										margin: 3px 7.5px;
-										width: 13px;
-										height: 13px;
-										background: #469BE8;
-										border-radius: 50%;
-									}
-								}
-
-								span {
-									width: calc(100% - 63px);
-									display: block;
-									height: 20px;
-									font-size: 12px;
-									color: #FF4500;
-									line-height: 20px;
-									box-sizing: border-box;
-									margin-left: 63px;
-									margin-top: 5px;
-
-									i {
-										font-size: 15px;
-										margin: 0 2px;
-										line-height: 16px;
-									}
-								}
-							}
-						}
-
-						.survey-top-name-one-middle {
-							height: 45%;
-
-							.survey-top-name-one-middle-one {
-								height: 68%;
-								width: 75%;
-								margin: 0 auto;
-								box-sizing: border-box;
-
-								p {
-									font-size: 14px;
-									font-weight: 400;
-									color: #53585d;
-								}
-
-								h3 {
-									font-size: 21px;
-									font-weight: 400;
-									color: #000000;
-									margin: 5px 0;
-								}
-
-								.survey-top-name-one-middle-one-jd {
-									width: 100%;
-									height: 32px;
-
-									/deep/.el-progress {
-										height: 100%;
-
-										.el-progress-bar {
-											height: 100%;
-
-											.el-progress-bar__outer {
-												height: 100% !important;
-												border-radius: 0;
-												background-color: #DAFEFE;
-
-												.el-progress-bar__inner {
-													border-radius: 0;
-
-													.el-progress-bar__innerText {
-														width: 100%;
-														text-align: center;
-														color: #666;
-													}
-												}
-											}
-										}
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-
-			.survey-butt {
-				width: 100%;
-				height: 50%;
-				display: flex;
-				.survey-top-name-two-middle {
-					width: 100%;
-					height: 50%;
-				}
-				.survey-top-name-two-buttom {
-					height: 40%;
-					width: 75%;
-					margin: 0 auto;
-				
-					.survey-top-name-two-buttom-title {
-						font-size: 17px;
-						color: #000;
-						font-weight: 400;
-						height: 26px;
-					}
-				
-					.survey-top-name-two-buttom-echart {
-						height: calc(100% - 26px);
-					}
-				}
-				.survey-top-name {
-					height: calc(100% - 48px);}
-				.survey-butt-right {
-					width: 40%;
-					border-right: 1px solid #E6E6E6;
-					.survey-top-name-two-top {
-						height: 10%;
-						width: 100%;
-						display: flex;
-						padding: 8px 50px;
-						box-sizing: border-box;
-						div {
-							width: 12px;
-							height: 12px;
-							background: #D82C69;
-							border-radius: 50%;
-							margin: 3.5px 7.5px;
-						}
-					
-						span {
-							width: calc(100% - 30px);
-							word-break: break-all;
-							display: inline-block;
-							line-height: 18px;
-							font-size: 14px;
-							font-weight: 400;
-							color: #666666;
-							line-height: 18px;
-							i {
-								color: #FB5032;
-							}
-						}
-					}
-				}
-
-				.survey-butt-left {
-					width: 60%;
-					height: 100%;
-					.survey-top-top-telle {
-						margin: 10px 40PX;
-						font-size: 17px;
-						font-weight: 400;
-						color: #000000;
-					}
-					.survey-top-top-buttome {
-						padding: 20px;
-						box-sizing: border-box;
-						width: 100%;
-						height: calc(100% - 100px);
-					}
-				}
-			}
-		}
-	}
+.survey {
+  width: 100%;
+  height: 100%;
+  .Outside {
+    width: 100%;
+    height: 100%;
+    box-shadow: 3px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  }
+  // 图表标题与表格标题公共样式
+  .chart-title,
+  .table—title {
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    display: flex;
+    background-color: #fafafa;
+    .left,
+    .right {
+      width: 50%;
+      height: 60px;
+      line-height: 60px;
+      padding-left: 42px;
+      box-sizing: border-box;
+    }
+  }
+
+  .chart-title {
+    .left {
+      width: 70%;
+      border-right: 1px solid #e7e7e7;
+    }
+    .right {
+      width: 30%;
+    }
+  }
+  // 图表样式
+  .survey-chart {
+    width: 100%;
+    height: 346px;
+    display: flex;
+    border-bottom: 1px solid #e7e7e7;
+    .left,
+    .center {
+      height: 346px;
+      border-right: 1px solid #e7e7e7;
+      width: 35%;
+      box-sizing: border-box;
+    }
+
+    .left,
+    .center,
+    .right {
+      padding: 22px 16px 42px 32px;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+
+      .left-left,
+      .center-left,
+      .right-left {
+        width: 25%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .arrange-item {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 50px;
+          .img {
+            img {
+              width: 50px;
+              height: 50px;
+            }
+          }
+          .text {
+            margin-left: 10px;
+            div {
+              font-size: 20px;
+              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+              color: #000000;
+              line-height: 23px;
+            }
+            span {
+              font-size: 14px;
+              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+              color: #666666;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+      .left-right,
+      .center-right {
+        width: 80%;
+        flex: 1;
+      }
+    }
+
+    .right {
+      width: 30%;
+      .right-right {
+        width: 75%;
+      }
+    }
+  }
+  // 表格样式
+  .survey-table {
+    width: 100%;
+    height: 316px;
+    display: flex;
+    .left {
+      width: 50%;
+      height: 316px;
+      border-right: 1px solid #e7e7e7;
+      box-sizing: border-box;
+    }
+
+    // 共用表格样式
+    .table-header {
+      width: 100%;
+      height: 49px;
+      padding: 0 20px;
+      box-sizing: border-box;
+      background: #f2f3f5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .header-item {
+        width: 12.5%;
+        text-align: center;
+        color: #666666;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .header-item:first-of-type {
+        width: 11%;
+      }
+      .header-item:last-of-type {
+        width: 11%;
+      }
+    }
+
+    .table-wrapper {
+      width: 100%;
+      height: 49px;
+      min-height: 245px;
+      overflow-y: auto;
+      background: #ffff;
+
+      .table-content {
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 49px;
+        color: #666666;
+        font-size: 14px;
+        border-bottom: 1px solid #efecec;
+        .content-item {
+          width: 12.5%;
+          text-align: center;
+        }
+        .street {
+          width: 11%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .remark {
+          width: 8%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .blue {
+          color: #4067ff;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .right {
+      width: 50%;
+      //不同于左侧表格的样式
+      .header-item {
+        width: 20% !important;
+      }
+      .content-item {
+        width: 20% !important;
+      }
+    }
+  }
+  // 共用小圆点样式
+  .circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #1c53d9;
+    display: inline-block;
+    margin-right: 6px;
+  }
+}
+
+// 以下是图表样式
+#chart1 {
+  width: 100%;
+  height: 300px;
+}
+#chart2 {
+  width: 100%;
+  height: 300px;
+}
+
+#chart3 {
+  width: 100%;
+  height: 300px;
+}
 </style>

src/components/subject/projectplan/stateOwnedLandAcquisition/Collectivesurvey.vue

@@ -234,7 +234,7 @@
 					this.indes =['10/01','10/02','10/03','10/04','10/05','10/06','10/07','10/08','10/09','10/10','10/11','10/12','10/13','10/14','10/15','10/16','10/17','10/18','10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26']
 					this.index =[200, 802, 190, 204, 200, 300, 310, 251, 211, 521, 161, 171, 161, 151, 131, 451, 221, 51, 801, 401, 201, 301, 501, 201, 101, 201]
 				}
-				
+
 				this.SetSignAcontract()
 			},
 			SetSignAcontract() {
@@ -349,7 +349,7 @@
 												  globalCoord: false // 缺省为 false
 										},
 									},
-									
+
 								},
 								data: this.index
 							},
@@ -1052,36 +1052,36 @@
 								width: 100%;
 								height: calc(100% - 99px);
 								display: flex;
-							
+
 								.survey-butt-name-right {
 									width: 45%;
 									height: 100%;
 									box-sizing: border-box;
 									margin-left: 40px;
-							
+
 									.survey-butt-name-right-telle {
 										font-size: 17px;
 										font-weight: 400;
 										color: #000000;
 									}
-							
+
 									.survey-butt-name-right-buttome {
 										height: calc(100% - 26px);
 									}
 								}
-							
+
 								.survey-butt-name-left {
 									width: 55%;
 									height: 100%;
 									box-sizing: border-box;
 									margin-left: 40px;
-							
+
 									.survey-butt-name-left-telle {
 										font-size: 17px;
 										font-weight: 400;
 										color: #000000;
 									}
-							
+
 									.survey-butt-name-left-buttome {
 										width: 100%;
 										height: calc(100% - 26px);
@@ -1197,14 +1197,14 @@
 					height: 40%;
 					width: 75%;
 					margin: 0 auto;
-				
+
 					.survey-top-name-two-buttom-title {
 						font-size: 17px;
 						color: #000;
 						font-weight: 400;
 						height: 26px;
 					}
-				
+
 					.survey-top-name-two-buttom-echart {
 						height: calc(100% - 26px);
 					}
@@ -1227,7 +1227,7 @@
 							border-radius: 50%;
 							margin: 3.5px 7.5px;
 						}
-					
+
 						span {
 							width: calc(100% - 30px);
 							word-break: break-all;

src/components/test/test.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="test-container">
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options1: {
+        series: [
+          {
+            type: "pie",
+            data: [
+              { value: 335, name: "直接访问" },
+              { value: 310, name: "邮件营销" },
+              { value: 234, name: "联盟广告" },
+              { value: 135, name: "视频广告" },
+              { value: 1548, name: "搜索引擎" }
+            ],
+            label: {
+              normal: {
+                formatter: function(params) {
+                  var label =
+                    params.name + "\n" + params.percent + "%!";
+                  var richLabel = {
+                    label: {
+                      formatter: label,
+                      rich: {
+                        percent: {
+                          fontSize: 20,
+                          offset: [0, -10],
+                          color: "#999"
+                        },
+                        name: {
+                          fontSize: 14,
+                          offset: [0, 10],
+                          color: "#333"
+                        }
+                      }
+                    }
+                  };
+                  richLabel.label.rich.percent.text =
+                    "{percent|" + params.percent + "%!}";
+                  richLabel.label.rich.name.text = "{name|" + params.name + "}";
+                  return richLabel;
+                }
+              }
+            }
+          }
+        ]
+      },
+
+      options2: {
+        color: ["#f06e00", "#48aac7", "#324fdc"],
+        legend: {
+          left: "right",
+          orient: "vertical",
+          itemGap: 24,
+          borderRadius: 50
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "65%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            label: {
+              show: true,
+              formatter: "{c}平方米( {d}%)"
+            },
+            data: [
+              { name: "完全安置", value: 600 },
+              { name: "部分安置", value: 400 },
+              { name: "没有安置", value: 700 }
+            ]
+          },
+          {
+            type: "pie",
+            selectedMode: "single",
+            radius: ["0%", "30%"],
+            center: ["50%", "50%"],
+            label: {
+              position: "inner",
+              fontSize: 14
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: "完全安置", value: 600 },
+              { name: "部分安置", value: 400 },
+              { name: "没有安置", value: 700 }
+            ]
+          }
+        ]
+      },
+
+      options3: {
+        color: ["#5b90fc", "#bcd3fc"],
+        legend: {
+          left: "right",
+          orient: "vertical",
+          itemGap: 24,
+          borderRadius: 50
+        },
+        series: [
+          {
+            type: "pie",
+            selectedMode: "single",
+            radius: ["0%", "40%"],
+            center: ["50%", "50%"],
+            label: {
+              position: "inner",
+              fontSize: 14
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { name: "已安置", value: 400 },
+              { name: "未安置", value: 600 }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  mounted() {
+    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 myChart3 = this.$echarts.init(document.getElementById("chart3"));
+    myChart3.setOption(this.options3);
+  }
+};
+</script>
+
+<style scoped>
+#chart1 {
+  width: 600px;
+  height: 400px;
+}
+#chart2 {
+  width: 600px;
+  height: 400px;
+}
+#chart3 {
+  width: 600px;
+  height: 400px;
+}
+</style>

src/router/index.js

@@ -50,8 +50,11 @@ import flowList from '../components/subject/systemManagement/flowList.vue'
 import flowDesignUser from '../components/subject/systemManagement/flowDesignUser.vue'
 import authorityField from '../components/subject/systemManagement/authorityField.vue'
 import authorityTree from '../components/subject/systemManagement/authorityTree.vue'
+
+import test from '../components/test/test.vue'
+
 Vue.use(Router).vue
- 
+
 export default new Router({
   routes: [
     {path: '/',name: 'slgn',component: slgn},
@@ -93,6 +96,8 @@ export default new Router({
 			{path: '/flowDesignUser',name: 'flowDesignUser',component: flowDesignUser},
 			{path: '/authorityField',name: 'authorityField',component: authorityField},
 			{path: '/authorityTree',name: 'authorityTree',component: authorityTree},
+
+      {path: '/test',name: 'test',component: test},
 		]}
 	]}
   ]