real3d-portalsite/src/views/cockpit/gdbh.vue

<template>
  <borderTemplate titleName="耕地保护" class="gdbh">
    <div class="content">
      <div class="selectTab">
        <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content_index">

      <div v-show="tab == options[1].value">
        <div class="content">
          <div class="item_back">
            <div class="icon">
              <div class="icon_jsyd">

              </div>
            </div>
            <div class="text_back">
              <p>建设用地占用耕地</p>
              <span>43.94</span>km²

            </div>
          </div>
          <div class="item_back">
            <div class="icon">
              <div class="icon_bcyd">

              </div>
            </div>
            <div class="text_back">
              <p>补充耕地</p>
              <span>43.94</span>km²

            </div>
          </div>
        </div>
        <div class="info">
          <div class="left_info">

            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">32.70</span>
                  <span class="zbph_unit">km²</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">损失粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">623.11</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>
          <div class="right_info">
            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">32.70</span>
                  <span class="zbph_unit">km²</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">新增粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">623.11</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>

        </div>
      </div>

      <!-- <div v-show="tab == options[1].value">
        <div class="content">
          <div class="item_back">
            <div class="icon">
              <div class="icon_jsyd">

              </div>
            </div>
            <div class="text_back">
              <p>建设用地占用耕地</p>
              <span>673.56</span>km²

            </div>
          </div>
          <div class="item_back">
            <div class="icon">
              <div class="icon_bcyd">

              </div>
            </div>
            <div class="text_back">
              <p>补充耕地</p>
              <span>{{ store.state.cockpit_gdbh.zbph.bcgd.jszgm }}</span>km²

            </div>
          </div>
        </div>
        <div class="info">
          <div class="left_info">

            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">0</span>
                  <span class="zbph_unit">km²</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">损失粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">0</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>
          <div class="right_info">
            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ store.state.cockpit_gdbh.zbph.bcgd.xzstmj }}</span>
                  <span class="zbph_unit">公顷</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">损失粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ store.state.cockpit_gdbh.zbph.bcgd.jszgm }}</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>

        </div>
      </div> -->
      <div v-show="tab == options[0].value">
        <div class="content">
          <div class="item">
            <div class="icon">
              <div class="icon_st">

              </div>
            </div>
            <div class="text">
              <p>水田</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.st_mj }}</span>km²

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_sjd">

              </div>
            </div>
            <div class="text">
              <p>水浇地</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.sjd_mj }}</span>km²

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_ht">

              </div>
            </div>
            <div class="text">
              <p>旱地</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.hd_mj }}</span>km²

            </div>
          </div>
        </div>

        <div id="gdxz_echart">

        </div>
      </div>
    </div>

  </borderTemplate>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import borderTemplate from "./borderTemplate.vue";
// import highPie from "../../components/echartsTemplate/highPie.vue";
import pie3d from "../../components/echartsTemplate/3dPie.vue";
import { QueryOne, QueryList } from "../../api/cockpitNew";
export default {
  components: { borderTemplate, pie3d },
  data() {
    return {
      sdata: {},
      tab: 'gdxz',
      options: [
        { value: "gdxz", label: "耕地现状" },
        { value: "zbph", label: "占补平衡" },
        // { value: "gdlx", label: "耕地流向" },

      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合

  methods: {
    async init_info(params) {
      const that = this;
      let obj = {
        jscType: 'sc_gdbh_xz_dlbm',
        id: params ? params.id : '4602'
      };
      let data = await QueryOne(obj);
      store.state.cockpit_gdbh.gdxz.title = data.data

      let obj_list = {
        jscType: 'sc_gdbh_xz_gddb',
        id: params ? params.id : '4602'
      };
      let data_list = await QueryList(obj_list);
      let yAxis = ['优等地', '高等地', '中等地', '低等地'];
      let yData = [];

      let echartData = [];
      data_list.data.forEach((res) => {
        if (res.dj == 1) {
          echartData.push(
            {
              "优等地": res.tbmj,
            }
          )
        }
        if (res.dj == 2) {
          echartData.push(
            {
              "高等地": res.tbmj,
            }
          )
        } if (res.dj == 3) {
          echartData.push(
            {
              "中等地": res.tbmj,
            }
          )
        } if (res.dj == 4) {
          echartData.push(
            {
              "低等地": res.tbmj,
            }
          )
        }
      })
      if (data_list.data.length == 3) {
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 2) {
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 1) {
        echartData.push({
          "高等地": 0
        });
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 0) {
        echartData.push({
          "优等地": 0
        });
        echartData.push({
          "高等地": 0
        });
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      yData = echartData.map((res) => {
        for (let key in res) {
          return res[key]
        }
      })
      yAxis.reverse();
      yData.reverse();

      store.state.cockpit_gdbh.gdxz.list.yAxis = yAxis;
      store.state.cockpit_gdbh.gdxz.list.yData = yData;

      this.init_gdxz_echart();
    }, async init_zbph(params) {
      const that = this;
      let obj = {
        jscType: 'jsc_gdbh_zbph_gdbc',
        id: params ? params.id : '4602'
      };
      let data = await QueryOne(obj);
      store.state.cockpit_gdbh.zbph.bcgd = data.data
    },
    // setData(datas) {
    //   this.GetQueryOne_nt(datas);
    //   this.GetQueryOne_bh(datas);
    //   this.GetQueryList(datas);
    // },
    GetQueryOne_nt(datas) {
      let params = {
        ...datas,
        jscType: "jsc_gdbh_ztgh_nt",
      };
      QueryOne(params).then((res) => {
        this.sdata = { ...this.sdata, ...res.data };
      });
    },
    GetQueryOne_bh(datas) {
      let params = {
        ...datas,
        jscType: "jsc_gdbh_ztgh_bc",
      };
      QueryOne(params).then((res) => {
        this.sdata = { ...this.sdata, ...res.data };
      });
    },
    GetQueryList(datas) {
      let optionsData = [];
      let params = {
        ...datas,
        jscType: "jsc_gdbh_yelx_nt",
      };
      QueryList(params).then((res) => {
        if (res.data.length) {
          res.data.forEach((edata) => {
            optionsData.push({ name: edata.dlbmmc, value: edata.yjjbntmj });
          });
        } else {
          optionsData = [
            { name: "土地复垦", value: 0 },
            { name: "异地购买", value: 0 },
            { name: "补充耕地", value: 0 },
            { name: "增减挂", value: 0 },

          ];
        }

        this.$nextTick(() => {
          this.$refs.gdbh_echart_gdlr.setOptions([
            { name: "土地复垦", value: 12 },
            { name: "异地购买", value: 21 },
            { name: "补充耕地", value: 54 },
            { name: "增减挂", value: 22 },

          ]);
          this.$refs.gdbh_echart_gdlc.setOptions([
            { name: "林地", value: 22 },
            { name: "草地", value: 5 },
            { name: "交通用地", value: 13 },
            { name: "其他", value: 43 },

          ]);

        });
      });
    },
    init_gdxz_echart() {

      var dom = document.getElementById("gdxz_echart");
      var myChart = window.echarts.init(dom);
      let barTopColor = ["#CBB835", "#33C6E2", '#157FFE', '#8F48F0'];
      let barBottomColor = ["#D09311", "#279AB0", '#154AD2', '#670BFF'];
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        title: {
          show: false,
          text: '一行动一活动开展情况',
          top: 20,
          left: 'center',
          textStyle: {
            color: '#00eaff',
            fontSize: 18,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          formatter: '一行动一活动开展情况<br>{b}：{c}',
          backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
          textStyle: {
            color: '#fff'
          },
          borderColor: "rgba(18, 57, 60, .8)",
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(0, 11, 34, .4)',
            }
          }
        },
        grid: {
          top: '14%',
          bottom: '1%',
          left: '0%',
          right: '20%',
          containLabel: true
        },
        xAxis: {

          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#1C82C5'
            }
          },
          axisLabel: {
            show: false,
            rotate: 20,
            margin: 30,
            textStyle: {
              fontSize: 14,
              color: '#DEEBFF',
              align: 'center'
            }
          },
          interval: 0
        },
        yAxis: {
          data: store.state.cockpit_gdbh.gdxz.list.yAxis,

          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(28, 130, 197, .3)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#1C82C5'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#DEEBFF',
            }
          },
        },

        series: [
          {
            name: '一行动一活动开展情况',
            type: 'pictorialBar',
            symbolSize: [8, 14],
            symbolOffset: [4, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBottomColor[params.dataIndex];
                }
              }
            },
            label: {
              textStyle: {
                rich: {
                  name: {
                    color: "#fff", //#BCD3E5
                    fontSize: 14,
                  },
                  value: {
                    color: "#64DAFF",
                    fontSize: 14,
                  },
                  unit: {
                    color: "#fff", //#BCD3E5
                    fontSize: 14,
                  },
                },
              },
              show: true,
              position: 'right',
              fontSize: 16,
              formatter: function (params) {
                return `{value|${params.value}}  {unit|km²}`;
              }
            },
            symbolPosition: 'end',
            data: store.state.cockpit_gdbh.gdxz.list.yData,

          }, {
            name: '一行动一活动开展情况',
            type: 'pictorialBar',
            symbolOffset: [-3, 0],

            symbolSize: [8, 14],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                }
              }
            },
            data: [22, 23, 18, 14],

          }, {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 1,
                      color: barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex]
                    }
                    ]
                  );
                },
                opacity: .9
              }
            },
            z: 16,
            silent: true,
            barWidth: 15,
            barCategoryGap: '100%',
            data: store.state.cockpit_gdbh.gdxz.list.yData,

          }]
      };

      myChart.setOption(option);

    },
  },
  mounted() {
    // const optionsData = [
    //   { name: "水田", value: 50 },
    //   { name: "水浇地", value: 20 },
    //   { name: "旱地", value: 30 },
    // ];
    // this.$nextTick(() => {
    //   this.$refs.echartRef.setOptions(optionsData);
    // });

    this.$nextTick((res) => {
      this.init_info();
      this.init_gdxz_echart();
      this.init_zbph();


    })
  },
};
</script>
<style lang="scss" scoped>
#gdxz_echart {
  width: 25rem;
  height: 9.5rem;
  margin-top: 5rem;

}

.gdbh {
  top: 2rem !important;

  .content {
    // border: #00FFFF 1px solid;
    // position: absolute;
    // left: 2%;
    // top: 10px;
    width: 98%;
    height: 100px;
    position: absolute;
    top: 0rem;
    left: 2rem;
  }

  .item {
    width: 32%;
    height: 45px;
    display: inline-block;
    // border: #00FFFF 1px solid;
  }

  .icon {
    width: 45px;
    height: 45px;
    padding: 2%;
    border-radius: 8px;
    display: inline-block;

    background: no-repeat 50%;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
  }

  .icongdbh0 {
    background-image: url("/static/images/overview/icongdbh0.png");
  }

  .icongdbh1 {
    background-image: url("/static/images/overview/icongdbh1.png");
  }

  .icongdbh2 {
    background-image: url("/static/images/overview/icongdbh2.png");
  }

  .icongdbh3 {
    background-image: url("/static/images/overview/icongdbh3.png");
  }

  .text {
    display: inline-block;
    // border: #00FFFF 1px solid;
    width: calc(100% - 50px);
    margin-bottom: 4px;
    text-align: center;
    margin-left: 0.3rem;

    p {
      // font-kerning: normal;
      // font-family: "Arial Negreta", "Arial Normal", "Arial";
      // font-weight: bold;
      // font-size: 14px;
      // color: #bcd3e5;
      // line-height: 24px;

      font-kerning: normal;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      color: #ffffff;
    }

    .sdvalue {
      // font-family: "Arial Negreta", "Arial Normal", "Arial";
      // font-weight: 700;
      // font-style: normal;
      // font-size: 18px;
      // color: #68F4FB;
      // line-height: 16px;

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

  .value {
    display: inline-block;

    // border: #00FFFF 1px solid;
    width: 50px;
  }

  #gdbh_echart_gdlr {

    width: 17rem;
    height: 10rem;
    position: fixed;
    top: 6rem;
    left: 96rem;
  }

  #gdbh_echart_gdlc {
    width: 17rem;
    height: 10rem;
    position: fixed;
    top: 6rem;
    left: 108rem;
    z-index: -1;
  }
}

.legend_gdlx {
  margin-top: 9rem;
  width: 25rem;
  height: 4rem;

  .gdbh_echart_gdlr_legend {
    height: 4rem;
    width: 12rem;
    background: no-repeat;

    background-image: url("/static/images/overview/gdbh_echart_gdlr_legend.png");
    display: inline-block;
  }

  .gdbh_echart_gdlc_legend {
    height: 4rem;
    width: 12rem;
    background: no-repeat;

    background-image: url("/static/images/overview/gdbh_echart_gdlc_legend.png");
    display: inline-block;
    float: right;
    margin-top: 1rem;
  }
}

.selectTab {
  position: absolute;
  right: 22px;
  bottom: 111px;
  z-index: 1;

  /deep/ .el-input__inner {
    // padding-right: 30px;
    width: 128px !important;
    height: 24px !important;
    line-height: 24px;
    padding-left: 22px;
    padding-right: 0px;
    font-size: 12px;
    color: #bcd3e5;
    border: none;
    // background: url("/static/images/overview/selectBg.png") no-repeat !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-size: 100% 100%;
  }

  /deep/ .el-input__icon {
    line-height: 1;
  }

  /deep/ .el-input__suffix {
    right: -2px;
  }

  /deep/ .el-select-dropdown__list {
    color: #bcd3e5 !important;
    background: linear-gradient(180deg,
        rgba(3, 115, 177, 0) 11%,
        rgba(3, 115, 177, 0.48) 100%);
    border-image: linear-gradient(360deg,
        rgba(75, 185, 250, 0.2),
        rgba(75, 185, 250, 0.05)) 1 1 !important;
    border: none;
  }

  /deep/ .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(87, 163, 226, 0.5);
  }

  /deep/ .el-select-dropdown__item {
    color: #ecf6ff;
  }
}



.content {
  position: absolute;
  left: 1%;
  width: 500px;
  top: 18%;
}

.item {
  width: 45%;
  height: 30%;
  display: inline-block;
  // border: #00FFFF 1px solid;

}

.icon {
  width: 50px;
  padding: 1.5%;
  border-radius: 8px;
  display: inline-block;
  height: 50px
}

.icon_st {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/st.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_sjd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/sjd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_ht {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/ht.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_jsyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gdxz_jsyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_bcyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gdxz_bcyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.item_back {
  width: 32%;
  height: 45px;
  display: inline-block;
  margin-right: 4rem;
  text-align: center;
}

.text_back {
  background: no-repeat 100%;
  background-image: url("/static/images/overview/zbph_back.png");
  width: 161px;
  height: 50px;
  display: inline-block;


  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.text {
  display: inline-block;
  // border: #00FFFF 1px solid;
  width: 170px;

  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.info {
  width: 21rem;
  height: 7rem;
  position: relative;
  top: 8rem;
  right: -4rem;

  ul {
    list-style: none;

    .zbph_value_unit {}

    .zbph_unit {
      position: relative;
      left: 48px;
      bottom: 12px;
      font-size: 12px;

    }

    .zbph_label {
      display: inline-block;
      width: 93px;
      height: 16px;
      font-size: 15px;
      position: relative;
      top: -9px;
      font-weight: 600;
    }

    .zbph_value {
      color: #f9b447;
      position: relative;
      left: 43px;
      top: -10px;
      font-weight: 700;
    }
  }

  .icon {

    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, rgba(37, 177, 255, 0.6) 0%, rgba(0, 48, 83, 0.48) 100%);
    box-shadow: inset 0px 0 5px 0px #002B6C;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(100, 218, 255, 0.5);
  }

  .left_info {
    display: inline-block;
    width: 50%;
    height: 100%;
  }

  .right_info {
    width: 50%;
    height: 100%;
    float: right;
  }
}</style>