real3d-portalsite/src/views/complianceAnalysis/components/scjgContent.vue

<template>
  <div class="content">
    <!-- 图表 -->
    <pie
      v-if="litem.scxstyle == 0"
      :class="`echart${litem.dataList.length <= 6 ? '' : '_vertical'}`"
      unit="亩"
      @echartClick="(name, iseyes) => echartClick(name, iseyes)"
      :ref="`echartRef`"
    ></pie>
    <div v-else-if="litem.scxstyle == 1">
      <div v-for="ldata in litem.dataList" :key="ldata.scxbsm">
        <el-tooltip
          v-if="ldata.yslx_name && ldata.yslx_name.length > 0"
          :content="ldata.yslx_name"
          placement="bottom-start"
        >
          <span class="name">{{ ldata.yslx_name }} </span>
        </el-tooltip>
        <span class="value"> {{ ldata.mj }}</span>
        米
        <span class="tools">
          <i
            class="header-icon el-icon-place"
            @click.stop="mapviewClick(ldata)"
          ></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";

export default {
  name: "scjgContent",
  props: {
    litem: {
      type: Object,
    },
    piseyes: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  components: { pie },
  mounted() {},
  methods: {
    setEchart(data, type) {
      this.$nextTick(() => {
        this.$refs.echartRef.setOptions({ data, type });
      });
    },
    echartClick(name, iseyes) {
      if (this.piseyes) {
        let click = this.litem.dataList.filter((c) => c.name == name);
        if (click.length > 0) this.mapview({ ...click[0], iseyes });
      }
    },
    mapviewClick(ldata) {
      if (ldata.iseyes == undefined || !this.piseyes) ldata.iseyes = true;
      this.$set(ldata, "iseyes", !ldata.iseyes);
      this.mapview(ldata);
    },
    mapview(data) {
      this.$emit("mapview", data);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  .name {
    // width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .value {
    width: 40px;
    color: #64daff;
    padding: 0px 4px;
    text-align: center;
  }
  .tools {
    position: absolute;
    right: 30px;
    cursor: pointer;
  }
  .highcolor {
    color: #64daff;
  }
}
</style>