|
|
@@ -0,0 +1,427 @@
|
|
|
+<template>
|
|
|
+ <borderTemplate titleName="生态修复" class="stxf">
|
|
|
+ <template v-slot:title>
|
|
|
+ <!-- #content="row" -->
|
|
|
+ <div class="selectTab">
|
|
|
+ <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="changeCharts">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="stacontent">
|
|
|
+ <div class="item" v-for="(sd, index) in sdlist[tab]" :key="index" :class="{cursor: sd.view}" @click="draw_vector(sd)">
|
|
|
+ <div class="itembg"></div>
|
|
|
+ <div class="text">{{ sd.name }}</div>
|
|
|
+ <span>{{ sdata[tab][sd.prop] || 0 }}</span>
|
|
|
+ {{ sd.unit }}
|
|
|
+ <i v-if="sd.view" style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-show="tab == options[0].value">
|
|
|
+ <pie3d id="stxf_echart_tdzz" unit="个" :legendFlag=true ref="stxf_echart_tdzz"></pie3d>
|
|
|
+ </div>
|
|
|
+ <div v-show="tab == options[1].value">
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <div class="infoLIst content" ref="contentRef">
|
|
|
+ <div class="infoItem" v-for="(item, index) in store.state.cockpit_stxf.ssgc.list" :key="index" >
|
|
|
+ <div class="itemIcon">
|
|
|
+ <span>
|
|
|
+ {{ index + 1 }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="itemCon">
|
|
|
+ <p>{{ item.xmmc }}</p>
|
|
|
+ <p>
|
|
|
+ <span><span class="font_color">治理面积</span>{{ item.zlmj }}公顷</span>
|
|
|
+ <span><span class="font_color">投资金额</span>{{ item.tzje }}万元</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div :class="item.geom != '' ? 'itemAdress' : 'itemAdress2'" @click="goDetail(item)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </borderTemplate>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+import borderTemplate from "./borderTemplate.vue";
|
|
|
+import { QueryOne, QueryList } from "../../api/cockpitNew";
|
|
|
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
|
|
|
+import parse from "wellknown";
|
|
|
+export default {
|
|
|
+ components: { borderTemplate, pie3d },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timer: undefined,
|
|
|
+ options: [
|
|
|
+ { value: "tdzz", label: "土地整治" },
|
|
|
+ { value: "ssxf", label: "山水工程" },
|
|
|
+ ],
|
|
|
+ tab: "ssxf",
|
|
|
+ paramdatas: {},
|
|
|
+ sdlist: {
|
|
|
+ tdzz: [
|
|
|
+ { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
|
|
|
+ { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
|
|
|
+ { name: "总投资", prop: "tzje", unit: "亿元" },
|
|
|
+ ],
|
|
|
+ ssxf: [
|
|
|
+ { name: "2023-2025年项目", prop: "xzqhdm_number", unit: "个", view:true },
|
|
|
+ { name: "整治面积", prop: "zlmj", unit: "公顷" },
|
|
|
+ { name: "总投资", prop: "tzje", unit: "亿元" },
|
|
|
+ ],
|
|
|
+ haxf: [
|
|
|
+ { name: "海岸线长度", prop: "xzqhdm_number", unit: "千米" },
|
|
|
+ { name: "自然岸线保有率", prop: "zlmj", unit: "%" },
|
|
|
+ { name: "海岸线整治修复项目", prop: "tzje", unit: "个" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ sdata: { tdzz: {}, ssxf: {}, haxf: {} },
|
|
|
+ eData: {
|
|
|
+ xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
|
|
|
+ yData: [
|
|
|
+ [10, 10, 10, 10],
|
|
|
+ [10, 10, 30, 10],
|
|
|
+ [10, 10, 10, 40],
|
|
|
+ ],
|
|
|
+ legend: [""],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ async getInfo(params) {
|
|
|
+ let res = await QueryList({
|
|
|
+ jscType: "jsc_stxf_ywlx_ssxfmx",
|
|
|
+ id: params ? params.id : '4602'
|
|
|
+
|
|
|
+ });
|
|
|
+ res.data.map((res) => {
|
|
|
+ if (res.geom) {
|
|
|
+ res.geom = parse(res.geom.split(";")[1]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ store.state.cockpit_stxf.ssgc.list = res.data
|
|
|
+
|
|
|
+
|
|
|
+ let res_title = await QueryOne({
|
|
|
+ jscType: "jsc_stxf_ztgh_ssxf",
|
|
|
+ id: params ? params.id : '4602'
|
|
|
+
|
|
|
+ });
|
|
|
+ store.state.cockpit_stxf.ssgc.title = res_title.data
|
|
|
+
|
|
|
+ this.sdata.ssxf = {
|
|
|
+ xzqhdm_number: store.state.cockpit_stxf.ssgc.title.xzqhdm_number,
|
|
|
+ zlmj: store.state.cockpit_stxf.ssgc.title.zlmj,
|
|
|
+ tzje: store.state.cockpit_stxf.ssgc.title.tzje,
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ changeCharts(e) {
|
|
|
+
|
|
|
+ },
|
|
|
+ GetQueryOne(datas) {
|
|
|
+ let params = {
|
|
|
+ ...datas,
|
|
|
+ jscType: `jsc_stxf_ztgh_${this.tab}`, //"jsc_stxf_ztgh_ssxf"
|
|
|
+ };
|
|
|
+ QueryOne(params).then((res) => {
|
|
|
+ this.sdata[this.tab] = res.data || {};
|
|
|
+ });
|
|
|
+ },
|
|
|
+ GetQueryList(datas) {
|
|
|
+ this.eData.xData = [];
|
|
|
+ this.eData.yData = [];
|
|
|
+ this.eData.gridbottom = "40%";
|
|
|
+ let params = {
|
|
|
+ ...datas,
|
|
|
+ jscType: `jsc_stxf_ywlx_${this.tab}`, // "jsc_stxf_ywlx_ssxf"
|
|
|
+ };
|
|
|
+ QueryList(params).then((res) => {
|
|
|
+ res.data.forEach((edata) => {
|
|
|
+ this.eData.xData.push(edata.jd_type);
|
|
|
+ this.eData.yData.push([edata.xzqhdm_number, edata.zlmj, edata.tzje]);
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.echartRef.setOptions(this.eData);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async tdzz(params) {
|
|
|
+ let res = await QueryList({
|
|
|
+ jscType: "jsc_stxf_ywfl_tdzz",
|
|
|
+ id: params ? params.id : '4602'
|
|
|
+
|
|
|
+ });
|
|
|
+ let arr = [];
|
|
|
+ let xmsl_num = 0;
|
|
|
+ let xmjz_num = 0;
|
|
|
+ // let xmsl_num = 0;
|
|
|
+ res.data.forEach((res) => {
|
|
|
+ arr.push({
|
|
|
+ name: res.zzlx,
|
|
|
+ value: res.xmsl
|
|
|
+ });
|
|
|
+ // xmsl_num += Number(res.xmsl)//综合项目格数
|
|
|
+ // xmjz_num += Number(res.xmjz) //总投资
|
|
|
+ })
|
|
|
+ this.$refs.stxf_echart_tdzz.setOptions(arr);
|
|
|
+
|
|
|
+ let res_hz = await QueryList({
|
|
|
+ jscType: "jsc_stxf_ztgh_tdzz",
|
|
|
+ id: params ? params.id : '4602'
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.sdata.tdzz = {
|
|
|
+ xzqhdm_number: res_hz.data[0].xmsl,
|
|
|
+ zlmj: res_hz.data[0].mj,
|
|
|
+ tzje: res_hz.data[0].tzje,
|
|
|
+
|
|
|
+ }
|
|
|
+ console.log('res_hz.data: ', res_hz.data);
|
|
|
+
|
|
|
+ },
|
|
|
+ initDiv() {
|
|
|
+ const self = this
|
|
|
+ const setInter = function () {
|
|
|
+ if (self.$refs.contentRef.scrollTop > 1233) {
|
|
|
+ self.$refs.contentRef.scrollTop = 0
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
|
|
|
+ self.$refs.contentRef.scrollTop = 0
|
|
|
+ } else {
|
|
|
+ self.$refs.contentRef.scrollTop++
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ self.timer && clearInterval(self.timer)
|
|
|
+ self.timer = setInterval(setInter, 100)
|
|
|
+
|
|
|
+ self.$refs.contentRef.addEventListener('mouseover', function () {
|
|
|
+ self.timer && clearInterval(self.timer)
|
|
|
+ })
|
|
|
+ self.$refs.contentRef.addEventListener('mouseout', function () {
|
|
|
+ self.timer = setInterval(setInter, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDetail(item){
|
|
|
+ store.setViewerFlagb(false);
|
|
|
+ store.setToolBarShow(false);
|
|
|
+ store.setXzqh_flag(false);
|
|
|
+ store.setCockpit_vector({
|
|
|
+ title: "",
|
|
|
+ tableData: [item],
|
|
|
+ goitem: item
|
|
|
+ });
|
|
|
+ },
|
|
|
+ draw_vector(sd) {
|
|
|
+ if (sd.view) {
|
|
|
+ store.setViewerFlagb(false);
|
|
|
+ store.setToolBarShow(false);
|
|
|
+ store.setXzqh_flag(false);
|
|
|
+ store.setCockpit_vector({
|
|
|
+ title: "山水工程完成项目",
|
|
|
+ tableData: store.state.cockpit_stxf.ssgc.list,
|
|
|
+ tablejscType: `jsc_stxf_ywlx_ssxfmx`,
|
|
|
+ columns: ['区县编码','区县编码名称','项目名称','投资金额(万元)','治理时间','治理进度','治理面积(公顷)','备注'],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick((res) => {
|
|
|
+
|
|
|
+
|
|
|
+ this.getInfo();
|
|
|
+ // this.tdzz();
|
|
|
+ this.initDiv()
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+//
|
|
|
+
|
|
|
+.stxf {
|
|
|
+ top: 33.3% !important;
|
|
|
+
|
|
|
+ .stacontent {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 1.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ width: 130px; //112px;
|
|
|
+ height: 44px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .itembg {
|
|
|
+ width: 112px;
|
|
|
+ height: 34px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ background: no-repeat;
|
|
|
+ background-image: url("/static/images/overview/Tab.png");
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #64daff;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cursor {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+#stxf_echart_tdzz {
|
|
|
+ width: 27rem;
|
|
|
+ height: 10rem;
|
|
|
+ position: absolute;
|
|
|
+ right: -1rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.infoLIst {
|
|
|
+ width: 100%;
|
|
|
+ height: 9.5rem;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding-top: 5px;
|
|
|
+
|
|
|
+ .infoItem {
|
|
|
+ width: 100%;
|
|
|
+ height: 3.3rem;
|
|
|
+ background-color: #64daff;
|
|
|
+ background: url("/static/images/overview/list_bg.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .itemIcon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: url("/static/images/overview/stxf_sugc_index_back.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #F9B447;
|
|
|
+ line-height: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemCon {
|
|
|
+ width: 21rem;
|
|
|
+ // height: 1.55rem;
|
|
|
+ // background-color: #faa012;
|
|
|
+ // line-height: 1.55rem;
|
|
|
+ p {
|
|
|
+ height: 41%;
|
|
|
+ line-height: 1.55rem;
|
|
|
+ color: #ecf6ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:first-child {
|
|
|
+ width: 90%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #ecf6ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:nth-child(2) {
|
|
|
+ span {
|
|
|
+ padding: 0 0.4rem;
|
|
|
+ display: inline-block;
|
|
|
+ background: rgba(100, 218, 255, 0.1);
|
|
|
+ border-radius: 2px 14px 2px 14px;
|
|
|
+ color: #64daff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font_color {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemAdress {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.7rem;
|
|
|
+ background: url("/static/images/overview/iconDW.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0.5rem;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemAdress2 {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.7rem;
|
|
|
+ margin: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemStatus1 {
|
|
|
+ background: url("/static/images/overview/yrsIcon.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 62px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ right: -30px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.selectTab {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8px;
|
|
|
+ right: 11px;
|
|
|
+}
|
|
|
+</style>
|
zpf