cx-wed/src/components/subject/ResettlementManagement/CollectiveResettlement/CollectiveResettlementSurvey.vue

<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>
</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;
    }
  }
};
</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;
}
</style>