real3d-portalsite/src/views/LandscapeProject/index.vue

<!--山水工程列表-->
<template>
  <div class="ghzc LandscapeProject">
    <Boxcommon :islist="islist">
      <template v-slot:title>
        <span class="clearBtn" @click="changeType">
          切换到工程{{ islist ? "总览" : "列表" }}
        </span>
      </template>
      <template v-slot:all>
        <div class="xz_box" v-show="!islist">
          <div class="content">
            <div class="item" v-for="(sd, index) in sdlist" :key="index">
              <div class="icon">
                <div class="iicon" :class="sd.value"></div>
              </div>
              <div class="text">
                <span>{{ sdata[sd.prop] || 0 }} </span>{{ sd.unit }}
                <p>{{ sd.name }}</p>
              </div>
            </div>
          </div>
          <div class="echartlist">
            <div v-for="(eitem, i) in echarts" :key="i" class="echars">
              <div class="echartTitle">
                <div class="block-title">{{ eitem.label }}</div>
                <div class="selectTab">
                  <el-select
                    v-if="i == 0"
                    v-model="tab"
                    placeholder="请选择"
                    :popper-append-to-body="false"
                    @change="changeCharts"
                  >
                    <el-option
                      v-for="item in sdlist"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <!-- <div
                  class="eicon"
                  :class="eitem.isshow ? 'eshow' : 'eclose'"
                  @click="eitem.isshow = !eitem.isshow"
                ></div> -->
              </div>
              <!-- v-show="eitem.isshow" -->
              <ThreeStackedBarAndLine
                v-if="i == 1"
                class="echart"
                ref="echartRef1"
              ></ThreeStackedBarAndLine>
              <pie
                v-else-if="i == 2"
                unit="亿元"
                class="echart"
                ref="echartRef2"
              ></pie>
              <div v-else class="echart"></div>
              <!-- <bar class="echart" :ref="`echartRef${i}`"></bar> -->
            </div>
          </div>
        </div>
      </template>
    </Boxcommon>
    <div
      class="sm-panel sm-function-module-query"
      v-if="store.state.vectorData.length > 0"
      v-drag
    >
      <div class="sm-panel-header">
        <span>山水工程详情</span>
      </div>
      <el-tabs
        type="border-card"
        class="xz_box info"
        v-model="activeTabs"
        stretch
      >
        <el-tab-pane label="基本信息" name="base">
          <CockpitVector></CockpitVector>
        </el-tab-pane>
        <el-tab-pane label="全过程管理信息" name="qgc"> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import bar from "@/components/echartsTemplate/bar.vue";
import ThreeStackedBarAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
import Boxcommon from "@/views/cockpit/common/VectorSpace/BoxCommonVector.vue";
import CockpitVector from "@/components/Query/clickQuery/CockpitVector.vue";
import { QueryOne, QueryList } from "../../api/cockpitNew";
export default {
  name: "LandscapeProject",
  components: {
    Boxcommon,
    pie,
    bar,
    ThreeStackedBarAndLine,
    CockpitVector,
  },
  data() {
    return {
      islist: true,
      sdata: {},
      sdlist: [
        { name: "项目数", prop: "xzqhdm_number", unit: "个", value: "num" },
        { name: "治理面积", prop: "zlmj", unit: "公顷", value: "mj" },
        { name: "总投资", prop: "tzje", unit: "亿元", value: "ztz" },
      ],
      echarts: [
        { label: "工程类型", isshow: false },
        { label: "工程进度", isshow: false },
        { label: "计划总投资", isshow: false },
        { label: "资金筹措情况", isshow: false },
        { label: "工程成效", isshow: false },
      ],
      tab: "num",
      activeTabs: "base",
      jdData: {
        legend_data: ["治理面积（公顷）", "项目数量", "投资金额（亿元）"],
        x_data: [],
        line_data: [],
      },
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    changeData(name, updata) {
      this[name] = updata;
    },
    draw_vector() {
      store.setCockpit_vector({
        title: "山水工程项目",
        word: "项目名称",
        mapType: "jsc_stxf_ssxf_layer",
        tableData: [],
        tablejscType: `jsc_stxf_ywlx_ssxfmx`,
        columns: [
          "项目名称",
          "治理面积(公顷)",
          "投资金额(万元)",
          "区县编码",
          "区县编码名称",
          "治理时间",
          "治理进度",
          "备注",
        ],
      });
    },
    changeType() {
      this.islist = !this.islist;
      if (!this.islist) {
        this.echarts.forEach((ei, i) => {
          // let a = {
          //   xData: ["===a"],
          //   yData: [10],
          // };
          // this.setEchart(a, i);
        });
      }
    },
    getData() {
      this.draw_vector();
      this.GetQueryOne();
      this.GetQueryList();
      this.GetSumList();
    },
    GetQueryOne() {
      let params = {
        jscType: `jsc_stxf_ztgh_ssxf`,
        id: 4602,
      };
      QueryOne(params).then((res) => {
        this.sdata = res.data || {};
      });
    },
    GetQueryList() {
      this.jdData.x_data = [];
      this.jdData.line_data = [];
      this.jdData.result = [[], []];
      let params = { jscType: `jsc_stxf_ssxf_jdfq`, id: 4602 };
      QueryList(params).then((res) => {
        res.data.forEach((jdData) => {
          this.jdData.x_data.push(jdData.dj);
          this.jdData.line_data.push(jdData.zlmj);
          this.jdData.result[0].push(jdData.dj_number);
          this.jdData.result[1].push(jdData.tzje);
        });
        this.setEchart(this.jdData, 1);
      });
    },
    GetSumList() {
      let data = [
        { name: "中央资金", value: "13.45" },
        { name: "省级资金", value: "5" },
        { name: "市级资金", value: "18.67" },
      ];
      this.setEchart({ data, type: '"horizontal"', total: 37.12 }, 2);
    },
    setEchart(data, id) {
      this.$nextTick(() => {
        this.$refs[`echartRef${id}`][0].setOptions(data);
      });
    },
  },
  watch: {
    // activeTabs(newValue) {},
  },
};
</script>

<style lang="scss" scoped>
.LandscapeProject {
  .clearBtn {
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
    width: 130px;
    background-color: #3f94f53f;
    border: 1px solid #3f93f5;
    color: #b6e0ff;
    position: absolute;
    top: 6px;
    right: 20px;
    line-height: 26px;

    &:hover {
      font-weight: bold;
    }
  }

  .content {
    width: 100%;
    height: 100px;
    .item {
      width: 32%;
      height: 100px;
      display: inline-block;
      // border: #00FFFF 1px solid;
      position: relative;
      .icon {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
      }
      .iicon {
        background: no-repeat 50%;
        background-image: url("/static/images/overview/icon_yrkkg.png");
        width: 45px;
        height: 45px;
        flex: 1;
      }
      .num {
        background-image: url("/static/images/overview/icon_yrkkg.png");
      }
      .mj {
        background-image: url("/static/images/overview/icon_yrkkg.png");
      }
      .ztz {
        background-image: url("/static/images/overview/icon_yrkkg.png");
      }

      .text {
        display: inline-block;
        // border: #00FFFF 1px solid;
        width: 100%;
        margin-bottom: 4px;
        text-align: center;
        margin-left: 0.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          font-family: "Arial Negreta", "Arial Normal", "Arial";
          font-weight: 700;
          font-style: normal;
          color: #68f4fb;
        }

        .unit {
          font-family: "Arial Negreta", "Arial Normal", "Arial";
          font-weight: 400;
          font-size: 12px;
          color: #ecf6ff;
          line-height: 12px;
        }
      }
    }
  }
  .echartlist {
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    .block-title {
      width: calc(100% - 130px) !important;
    }
  }
  .selectTab {
    // margin-right: 20px;

    /deep/ .el-input__inner {
      width: 100px !important;
      height: 30px !important;
      font-size: 12px;
      color: #bcd3e5;
      // border: none;
      background-color: transparent !important;
      background-size: 100% 100%;
    }
  }
  .sm-panel {
    width: 400px;
    height: 700px;
    z-index: 999999;
  }
  .CockpitVectorBox {
    top: 0px;
  }
  .info {
    padding: 0;
    overflow: hidden;
  }
}
</style>
<style lang="scss">
@import "../complianceAnalysis//ghzc.scss";
</style>