|
@@ -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";
|