2023/3/25

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

@@ -1,811 +1,832 @@
 <template>
-  <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>
+	<div class="survey">
+		<div class="Outside">
+			<!-- 图表标题区域 -->
+			<div class="chart-title">
+				<div class="left" style="padding: 0;display: flex;">
+					<div class="left-left">
+						<span class="circle"></span>安置户数
+					</div>
+					<div class="left-right">
+						<span class="circle"></span>安置房套数
+					</div>
+				</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 < 4">
+							<div class="img">
+								<img :src="item.img" alt="" />
+							</div>
+							<div class="text text-right">
+								<div>{{ arrangeForAssemble[item.AttributeName] }}户</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 > 3">
+							<div class="img">
+								<img :src="item.img" alt="" />
+							</div>
+							<div class="text">
+								<div>{{ arrangeForAssemble[item.AttributeName] }}户</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>{{transitionAssemble.transitionFeeSum}}&#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 arrangeForStreet" :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 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">
+								{{item.totalResettlement==0?0:Math.round((item.resettlement/item.totalResettlement)*100)/100 }}%
+							</div>
+							<div class="content-item">{{ item.resettlementHouseTotal }}</div>
+							<div class="content-item">{{ item.resettlementHouse }}</div>
+							<div class="content-item blue">
+								<!-- {{ item.arrangeSetPercentage }} -->
+								{{item.resettlementHouseTotal==0?0:Math.round((item.resettlementHouse/item.resettlementHouseTotal)*100)/100 }}%
+							</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 transitionStreet" :key="item.id">
+							<!-- <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>
+
+							<div class="content-item">{{ item.transitionCompleted }}</div>
+
+							<div class="content-item">{{ item.transitionFee }}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-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;
-    }
-  }
-};
+	export default {
+		data() {
+			return {
+				
+				// 安置列表
+				arrangeList: [{
+						id: 0,
+						img: require("@/assets/ResettlementManagement/survey_one.png"),
+						num: 0,
+						name: "总户数",
+						AttributeName:'totalResettlementSum'
+					},
+					{
+						id: 1,
+						img: require("../../../../assets/ResettlementManagement/survey_two.png"),
+						num: 0,
+						name: "已安置",
+						AttributeName:'resettlementSum'
+					},
+					{
+						id: 2,
+						img: require("../../../../assets/ResettlementManagement/survey_three.png"),
+						num: 0,
+						name: "未安置",
+						AttributeName:'notResettlementSum'
+					},
+					{
+						id: 3,
+						img: require("../../../../assets/ResettlementManagement/survey_four.png"),
+						num: 0,
+						name: "部分安置",
+						AttributeName:'partResettlementSum'
+					},
+					{
+						id: 5,
+						img: require("../../../../assets/ResettlementManagement/survey_four.png"),
+						num: 0,
+						name: "安置房套数",
+						AttributeName:'resettlementHouseTotalSum'
+					},
+					{
+						id: 6,
+						img: require("../../../../assets/ResettlementManagement/survey_five.png"),
+						num: 0,
+						name: "已安置套数",
+						AttributeName:'resettlementHouseSum'
+					},
+					{
+						id: 7,
+						img: require("../../../../assets/ResettlementManagement/survey_six.png"),
+						num: 0,
+						name: "未安置套数",
+						AttributeName:'notResettlementHouseSum'
+					}
+				],
+				// 图表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: "安置套数比例"
+					}
+				],
+
+				// 过渡表格表头列
+				transitionTableHeader: [{
+						id: 0,
+						name: "街道"
+					},
+					{
+						id: 1,
+						name: "过渡总户数"
+					},
+					{
+						id: 2,
+						name: "过渡中户数"
+					},
+					{
+						id: 3,
+						name: "已过渡户数"
+					},
+					{
+						id: 4,
+						name: "过渡费"
+					}
+				],
+
+				Project: {}, //项目信息
+				
+				arrangeForAssemble:{},//安置信息总
+				arrangeForStreet:[],//安置信息街道
+				
+				transitionAssemble: {}, //过渡信息总
+				transitionStreet: [] //过渡信息街道
+				
+				
+			};
+		},
+		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: {
+			getparameter(row) {
+				this.Project = row
+				this.getstatisticsAz1()
+				this.getstatisticsAz2()
+			},
+			//获取安置信息
+			getstatisticsAz1() {
+				this.$http.get("api/auth/projectformal/statisticsAz1?projectId=" + this.Project.bussiness.id, null).then((
+					res) => {
+					if (res.status == 200 && res.data.code == 0) {
+						var data = res.data.statistics
+						this.arrangeForAssemble = data.sum
+						// var sum={
+						// 		totalResettlementSum:'总户数',//总户数
+						// 		notResettlementSum:'未安置户数',//未安置户数
+						// 		partResettlementSum:'部分安置户数',//部分安置户数
+						// 		resettlementSum:'已安置户数',//已安置户数
+						// 		resettlementHouseTotalSum:'安置房套数',//安置房总套数
+						// 		resettlementHouseSum:'已安置套数',//已安置房套数
+						// 		notResettlementHouseSum:'未安置套数',//未安置房套数
+						// }
+						// this.arrangeList.forEach((item,index)=>{
+						// 	Object.keys(sum).forEach(key => {
+						// 		if(item.name==sum[key]){
+						// 			this.arrangeList[index].num=this.arrangeForAssemble[key]
+						// 		}
+						// 	});
+						// })
+						this.arrangeForStreet = []
+						var thit = this
+						Object.keys(data).forEach(key => {
+							if (key != 'sum') {
+								data[key].street = key
+								thit.arrangeForStreet.push(data[key])
+							}
+						});
+					} else {
+						this.$message.error('获取失败!');
+					}
+				});
+			},
+			//获取过渡信息
+			getstatisticsAz2() {
+				this.$http.get("api/auth/projectformal/statisticsAz2?projectId=" + this.Project.bussiness.id, null).then((
+					res) => {
+					if (res.status == 200 && res.data.code == 0) {
+						var data = res.data.statistics
+						this.transitionAssemble = data.sum
+						this.transitionStreet = []
+						var thit = this
+						Object.keys(data).forEach(key => {
+							if (key != 'sum') {
+								data[key].street = key
+								thit.transitionStreet.push(data[key])
+							}
+						});
+					} else {
+						this.$message.error('获取失败!');
+					}
+				});
+			},
+			// 处理文字提示组件是否显示
+			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%;
-  .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;
-}
+	.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;
+			}
+			.left{
+				.left-left,.left-right{
+					padding-left: 42px;
+					width: 50%;
+				}
+				.left-right{
+					border-left: 1px solid #e7e7e7;
+				}
+			}
+		}
+
+		.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-right{
+							text-align: end;
+						}
+						
+						.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>