山水工程工程总览

src/components/echartsTemplate/bar.vue

@@ -0,0 +1,176 @@
+<template>
+  <div id="bar_echart" ref="echart"></div>
+</template>
+
+<script>
+let option = {
+  backgroundColor: "rgba(0,0,0,0)",
+  tooltip: {
+    backgroundColor: "RGBA(20, 106, 178, 0.4)",
+    trigger: "axis",
+    textStyle: {
+      fontSize: 14,
+      color: "#fff",
+    },
+  },
+  grid: {
+    left: "2%",
+    right: "4%",
+    bottom: "15%",
+    top: "20%",
+    containLabel: true,
+  },
+  legend: {
+    data: [], //"收储面积", "收储个数"
+    left: "7%",
+    top: "5%",
+    textStyle: {
+      color: "#666666",
+    },
+    itemWidth: 15,
+    itemHeight: 10,
+    itemGap: 25,
+    show: false,
+  },
+  xAxis: {
+    axisTick: { show: false },
+    axisLine: { lineStyle: { color: "#BCD3E5" } },
+    axisLabel: {
+      textStyle: { fontSize: 12, color: "#BCD3E5" },
+    },
+    axisLabel: {
+      interval: 0,
+      formatter: function (value) {
+        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+        if (value.length > 4) {
+          return `${value.slice(0, 4)}...`;
+        } else {
+          return value;
+        }
+      },
+    },
+    data: [],
+  },
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(163, 163, 163, 0.5)",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "#A0A4AA",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(65, 97, 128, 0.5)",
+        },
+      },
+    },
+    {
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#666666",
+      },
+      position: "right",
+      axisLine: {
+        lineStyle: {
+          color: "#cdd5e2",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+        formatter: "{value} %", //右侧Y轴文字显示
+        textStyle: {
+          color: "#666666",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "", //收储面积
+      type: "bar",
+      barWidth: "12px",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#409EFF",
+            },
+            {
+              offset: 1,
+              color: "rgba(24, 253, 255, 0)",
+            },
+          ]),
+        },
+      },
+      data: [],
+    },
+    {
+      name: "", //收储个数
+      type: "line",
+      smooth: true,
+      itemStyle: {
+        normal: {
+          color: "#FFCC64", // 折线的颜色
+        },
+      },
+      data: [],
+    },
+  ],
+};
+export default {
+  name: "bar_echart",
+  props: {
+    unit: {
+      type: String,
+      default: "km²", //"平方千米",
+    },
+  },
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(cartData) {
+      let _this = this;
+      if (!this.myChart) {
+        // var dom = document.getElementById("bar_echart");
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      option.legend.data = cartData.legend;
+      option.xAxis.data = cartData.xdata;
+
+      option.series[0].data = cartData.data;
+
+      this.myChart.resize();
+      this.myChart.setOption(option);
+
+      this.myChart.on("click", function (params) {
+        _this.$emit("echartClick", params.name, { color: params.color });
+      });
+    },
+  },
+  mounted() {
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bar_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/LandscapeProject/index.vue

@@ -1,38 +1,131 @@
 <!--山水工程列表-->
 <template>
-  <!-- <div class="ghzc LandscapeProject">
-    <div class="innerContainer leftPane" v-drag>
-      <h2 class="Pangetitle darg-div">
-        <span class="pange_text">山水工程列表</span>
-      </h2>
+  <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">
+          <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" -->
+              <!-- <pie
+                unit="亩"
+                class="echart"
+                @echartClick="echartClick"
+                :ref="`echartRef${i}`"
+              ></pie> -->
+              <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> -->
-  <div>12223<Boxcommon></Boxcommon></div>
+  </div>
 </template>
 
 <script>
-// import Hgxsc from "./components/hgxsc.vue";
+import pie from "@/components/echartsTemplate/pie.vue";
+import bar from "@/components/echartsTemplate/bar.vue";
 import Boxcommon from "@/views/cockpit/common/VectorSpace/BoxCommonVector.vue";
+import CockpitVector from "@/components/Query/clickQuery/CockpitVector.vue";
+import { QueryOne } from "../../api/cockpitNew";
 export default {
   name: "LandscapeProject",
   components: {
     Boxcommon,
+    pie,
+    bar,
+    CockpitVector,
   },
   data() {
-    return {};
+    return {
+      islist: false,
+      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",
+    };
   },
   created() {},
   mounted() {
-    this.draw_vector();
+    this.changeType();
   },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
     draw_vector() {
-      // store.setViewerFlagb(false);
-      // store.setToolBarShow(false);
-      // store.setXzqh_flag(false);
       store.setCockpit_vector({
         title: "山水工程项目",
         word: "项目名称",
@@ -51,6 +144,40 @@ export default {
         ],
       });
     },
+    changeType() {
+      this.islist = !this.islist;
+      if (this.islist) {
+        this.draw_vector();
+      } else {
+        this.GetQueryOne();
+        this.echarts.forEach((ei, i) => {
+          // let data = [
+          //   { name: "XXX类型", value: "6" },
+          //   { name: "XXX类型1", value: "6" },
+          // ];
+          // this.setEchart({ data, type: '"horizontal"', total: 12 }, i);
+          let a = {
+            xdata: ["===a"],
+            data: [10],
+          };
+          this.setEchart(a, i);
+        });
+      }
+    },
+    GetQueryOne() {
+      let params = {
+        jscType: `jsc_stxf_ztgh_ssxf`,
+        id: 4602,
+      };
+      QueryOne(params).then((res) => {
+        this.sdata = res.data || {};
+      });
+    },
+    setEchart(data, id) {
+      this.$nextTick(() => {
+        this.$refs[`echartRef${id}`][0].setOptions(data);
+      });
+    },
   },
   watch: {
     activeTabs(newValue) {},
@@ -59,6 +186,119 @@ export default {
 </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";