onemap-implementationSupervision-system-frontend/website/src/components/ghfxpj/wtsbztyy/fxsz.vue

<!--
 * @Author: 王志鹏
 * @Date: 2023-05-25 15:34:37
 * @LastEditors: siwei
 * @LastEditTime: 2023-05-30 14:20:37
 * @FilePath: \website\src\components\ghfxpj\wtsbztyy\fxsz.vue
-->

<template>
  <div class="fxsz max-box overflow-hidden flex-box column posi-rel">
    <div class="max-width flex-box column padding-10 box-sizing">
      <div class="block-title margin-top-5">{{ title }}说明</div>
      <div class="wenzi max-width column box-sizing" style="margin-top: 10px">
        {{ ctfxsm }}
      </div>
    </div>
    <div
      v-if="fxwdList.length > 1"
      class="max-width flex-box column padding-10 box-sizing"
      style="padding-top: 0"
    >
      <div class="block-title margin-top-5">分析维度</div>
      <div class="max-width flex-box wrap margin-top-10">
        <div
          class="city-item pointer"
          v-for="item in fxwdList"
          :key="item.id"
          :class="form.act_wd == item.id ? 'act_wd' : ''"
          @click="changeWD(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="max-width height-100-55 flex-box column">
      <div
        class="max-width flex-box column padding-10 box-sizing"
        style="padding-top: 0"
      >
        <div class="block-title margin-top-5">分析范围</div>
        <div class="max-width flex-box wrap margin-top-10">
          <div
            class="city-item pointer"
            v-for="(item, index) in xzqList"
            :key="index"
            :class="form.act_xzq == item.value ? 'act_xzq' : ''"
            @click="changeXzq(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div
        v-if="fxyzList.length > 1"
        class="max-width flex-box column padding-10 box-sizing"
        style="padding-top: 0"
      >
        <div class="block-title margin-top-5">分析因子</div>
        <div class="max-width flex-box wrap margin-top-10">
          <div
            class="city-item pointer"
            v-for="item in fxyzList"
            :key="item.id"
            :class="form.act_yz == item.id ? 'act_yz' : ''"
            @click="changeYz(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="max-width flex-box column padding-10 box-sizing"
        style="padding-top: 0"
      >
        <div class="block-title margin-top-5">分析年度</div>
        <div class="max-width flex-box wrap margin-top-10">
          <div
            class="city-item pointer"
            v-for="item in yearList"
            :key="item.year"
            :class="form.act_year == item.year ? 'act_year' : ''"
            @click="changeYear(item)"
          >
            {{ item.year }}{{ item.year.indexOf("年") > 0 ? "" : "年" }}
          </div>
          <!-- <div
            class="padding-top-8 padding-bottom-8 padding-left-15 padding-right-15 margin-right-4 margin-bottom-5 pointer select-none"
          >
            ......
          </div> -->
        </div>
      </div>
      <div
        v-if="fxdlList.length > 0"
        class="max-width flex-box column padding-10 box-sizing"
        style="padding-top: 0"
      >
        <div class="block-title margin-top-5">分析地类</div>
        <div class="max-width flex-box wrap margin-top-10">
          <div
            class="city-item pointer"
            v-for="item in fxdlList"
            :key="item.id"
            :class="form.act_yz == item.id ? 'act_yz' : ''"
            @click="changeDl(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        v-if="zytype != '7'"
        class="max-width flex-box column padding-10 box-sizing"
        style="padding-top: 0"
      >
        <div class="block-title margin-top-5">结果名称</div>
        <div class="max-width flex-box wrap margin-top-10">
          <el-input v-model="form.jgmc" />
        </div>
      </div>
    </div>
    <div
      class="posi-abs height-55 bottom-0 max-width flex-box justify-between align-center"
      style="background: #efefef; bottom: 0; z-index: 9"
    >
      <div class="max-height flex-box align-center margin-left-22"></div>
      <div class="max-height flex-box align-center">
        <el-button round class="btn-style" @click="reset">重置</el-button>
        <el-button
          type="primary"
          round
          class="btn-style margin-right-22"
          @click="submitData"
          >分析</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { GetXzq } from "@/api/homeApi.js";
import { getSjy, getFxyz, getFxyzYear, create } from "@/api/ghfxpj/ctfxApi.js";
import { reactive, toRefs } from "@vue/reactivity";
import {
  getCurrentInstance,
  onMounted,
  onUnmounted,
  watch,
} from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default {
  props: {
    activeTabs: {
      type: String,
    },
    ctfxsm: {
      type: String,
    },
    zytype: {
      type: String,
    },
  },
  setup(prop, context) {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const router = useRouter();
    const parent = { ...context };
    const fxsz = reactive({
      isQiXian: store.state.user.isQiXian, // 当前登录用户是否为旗县用户
      fxyzList: [], // 分析因子列表
      yearList: [], // 分析年份列表
      fxwdList: [], // 分析维度列表
      fxdlList: [], // 分析地类
      active_layout: true,
      downloadLoading: false,
      xzqList: [],
      title: router.currentRoute.value.meta.title,
      qdfxsm:
        "土地开发强度，是指建设用地总量占行政区域面积的比例。在一般情况下，土地开发强度越高，土地利用经济效益就越高，地价也相应提高；反之，如果土地开发强度不足，亦即土地利用不充分，或因土地用途确定不当而导致开发强度不足，都会减弱土地的使用价值，降低地价水平。\n按照国际惯例，一个地区国土开发强度达到30%已经是警戒线，超过该强度，人的生存环境就会受到影响。",
      tableData: [
        { xzqmc: "科尔沁区", mj: 100 },
        { xzqmc: "霍林郭勒市", mj: 200 },
        { xzqmc: "开鲁县", mj: 300 },
        { xzqmc: "科尔沁左翼后旗", mj: 400 },
        { xzqmc: "科尔沁左翼中旗", mj: 500 },
        { xzqmc: "库伦旗", mj: 600 },
        { xzqmc: "奈曼旗", mj: 700 },
        { xzqmc: "扎鲁特旗", mj: 800 },
      ],
      form: {
        act_xzq: store.state.user.user.dept.district,
        act_xzqmc: "",
        act_wd: "",
        act_yz: "",
        act_year: "",
        jgmc: "",
      },

      changeXzq(item) {
        fxsz.form.act_xzq = item.value;
        fxsz.form.act_xzqmc = item.label;
        fxsz.getYear();
      },
      changeYz(item) {
        fxsz.form.act_yz = item.id;
        fxsz.getYear();
        // fxsz.closeEcharts();
        // if (router.currentRoute.value.meta.title == "生态保护冲突分析") {
        //   fxsz.zhuoptions.title.text = `生态极重要区内${
        //     prop.fxyzList[fxsz.form.act_yz].label
        //   }统计`;
        // } else if (router.currentRoute.value.meta.title == "农业生产冲突分析") {
        //   fxsz.zhuoptions.title.text = `种植业不适宜区内${
        //     prop.fxyzList[fxsz.form.act_yz].label
        //   }统计`;
        // } else if (router.currentRoute.value.meta.title == "城镇建设冲突分析") {
        //   fxsz.zhuoptions.title.text = `城镇建设不适宜区内${
        //     prop.fxyzList[fxsz.form.act_yz].label
        //   }统计`;
        // } else if (router.currentRoute.value.meta.title == "村庄用地冲突分析") {
        //   fxsz.zhuoptions.title.text = `${
        //     prop.fxyzList[fxsz.form.act_yz].label
        //   }内村庄用地统计`;
        // }
        // fxsz.init();
      },
      changeDl(item) {
        fxsz.form.act_yz = item.id;
        fxsz.getYear();
      },
      changeWD(item) {
        fxsz.form.act_wd = item.id;
        fxsz.getResultName();
      },
      changeYear(item) {
        fxsz.form.act_year = item.year;
        fxsz.getResultName();
      },
      reset() {
        fxsz.form.act_xzq = store.state.user.user.dept.district;
        fxsz.form.act_xzqmc = "";
        fxsz.form.jgmc = "";
        fxsz.form.act_yz = fxsz.fxyzList[0]?.id ?? "";
        fxsz.form.act_wd = fxsz.fxwdList[0]?.id ?? "";
        fxsz.getYear();
      },
      submitData() {
        let fxtable = fxsz.yearList.find(
          (item) => item.year === fxsz.form.act_year
        )?.tablename;
        if (!fxsz.form.jgmc) {
          ElMessage.warning("请输入结果名称！");
          return;
        }
        let obj = {
          ssmk: prop.zytype,
          name: fxsz.form.jgmc,
          fxyz: fxsz.form.act_yz,
          fxyear: fxsz.form.act_year,
          fxtable: fxtable,
          sjy: fxsz.form.act_wd,
          xzqdm: fxsz.form.act_xzq,
        };
        obj = proxy.$comfun.setFormData(obj);
        create(obj).then((res) => {
          if (res.statuscode === 200) {
            parent.emit("update:activeTabs", "fxlb");
          }
        });
      },
      //#region 初始化获取
      init() {
        fxsz.loadXzq();
        fxsz.getFXYZ();
        fxsz.getSJY();
      },
      // 获取行政区分析范围
      loadXzq() {
        GetXzq({ city: true }).then((res) => {
          if (res.success) {
            if (!fxsz.isQiXian) {
              fxsz.xzqList = res.data;
              res.data[0].children.map((item) => {
                fxsz.xzqList.push(item);
              });
            } else {
              res.data[0].children.map((item) => {
                if (item.label === store.state.user.user.dept.district) {
                  fxsz.xzqList.push(item);
                  item.children.map((item2) => {
                    fxsz.xzqList.push(item2);
                  });
                }
              });
            }
          }
        });
      },
      // 获取分析因子
      getFXYZ() {
        getFxyz({ moudleid: prop.zytype }).then((res) => {
          if (res.statuscode === 200) {
            fxsz.fxyzList = res.data;
            if (fxsz.fxyzList.length > 0) {
              fxsz.changeYz(fxsz.fxyzList[0]);
            }
          }
        });
        if (prop.zytype == "7") {
          fxsz.fxdlList = [
            { name: "所有建设用地", id: 0 },
            { name: "商业服务业用地", id: 1 },
            { name: "工矿用地", id: 2 },
          ];
        }
      },
      // 获取数据源
      getSJY() {
        getSjy({ moudleid: prop.zytype }).then((res) => {
          if (res.statuscode === 200) {
            fxsz.fxwdList = res.data;
            if (fxsz.fxwdList.length > 0) {
              fxsz.changeWD(fxsz.fxwdList[0]);
            }
            store.commit("SET_CTFX_SOURCE_LAYERS", res.data);
          }
        });
      },
      // 根据分析范围和分析因子获取分析年份
      getYear() {
        getFxyzYear({
          bsm: fxsz.form.act_yz,
          xzqdm: fxsz.form.act_xzq,
        }).then((res) => {
          if (res.statuscode === 200) {
            fxsz.yearList = res.data;
            fxsz.form.act_year = fxsz.yearList[0]?.year ?? "";
            // if (!fxsz.form.jgmc) {
            fxsz.getResultName();
            // }
          }
        });
      },
      // 获取结果名称 默认分析年份+分析范围+分析因子+与生态保护冲突分析
      getResultName() {
        if (!fxsz.form.act_xzqmc) {
          fxsz.form.act_xzqmc = fxsz.xzqList.find(
            (item) => item.value === fxsz.form.act_xzq
          ).label;
        }
        let fxyzName = fxsz.fxyzList.find(
          (item) => item.id === fxsz.form.act_yz
        ).name;
        let fxwdName = fxsz.fxwdList.find(
          (item) => item.id === fxsz.form.act_wd
        ).name;
        fxsz.form.jgmc = `${fxsz.form.act_year}年${fxsz.form.act_xzqmc}${fxyzName}与${fxwdName}`;
      },
      //#endregion
    });
    onMounted(() => {
      fxsz.init();
    });
    return { ...toRefs(fxsz) };
  },
};
</script>

<style lang="less" scoped>
.fxsz {
  .city-item {
    display: inline-block;
    height: max-content;
    padding: 5px 10px;
    border-radius: 20px;
    margin: 10px 0px 0px 10px;
  }
  .act_wd,
  .act_xzq,
  .act_yz,
  .act_year {
    background-color: #2a82e4;
    border-radius: 20px;
    color: #fff;
  }
  .wenzi {
    white-space: pre-line;
    text-align: justify;
  }
}
</style>