shuili_manager/jwtech-admin-page/src/views/gateway/projectDistributionADiagram.vue

<template>
  <div class="page">
    <div class="select">
      <el-form :model="queryParams">
        <el-form-item label="行政区划" prop="adcd" label-width="68px">
          <el-cascader
            :options="areasOptions"
            v-model="queryParams.adcd"
            :props="areasOptionProps"
            placeholder="请选择行政区划"
            clearable
            size="small"
            style="width: 100%"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <div class="main_head">
        <div class="head_title">
          <div class="iconSpan">
            <span class="first"></span>
            <span class="second"></span>
          </div>
          <span class="text">
            工程分布一张图
            <em> (数据更新时间：2023/05/25) </em>
          </span>
        </div>
        <div class="head_btn">进入</div>
      </div>
      <div class="main_content">
        <div class="con_head">
          <div class="head_btn">
            <span
              :class="{ activeSpan1: activeName == '1' }"
              @click="chooseName('1')"
              >业务概况图</span
            >
            <span
              :class="{ activeSpan1: activeName == '2' }"
              @click="chooseName('2')"
              >机构地图</span
            >
          </div>
        </div>
        <div class="con_info">
          <div class="info_left">
            <div class="infoItem">
              <span>总项目数</span>
              <span>12688</span>
            </div>
            <div class="infoItem">
              <span>初步批复</span>
              <span>8688</span>
            </div>
            <div class="infoItem">
              <span>施工中</span>
              <span>6588</span>
            </div>
            <div class="infoItem">
              <span>已完工</span>
              <span>8688</span>
            </div>
          </div>
          <div class="info_right">
            <img src="@/assets/image/SMap.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { returnToken } from "@/api/login";
import { setToken, removeToken } from "@/utils/auth";
import { getAreasData } from "@/api/areas/index";
export default {
  data() {
    return {
      activeName: "1",
      areasOptionProps: {
        emitPath: false, //value返回最后一级的
        checkStrictly: true, //选择任意一级
        // lazy: true,
        // lazyLoad: function qylazyLoad(node) {
        //   // node.level = 5;
        //   console.log("node", node.level);
        // },
      },
      areasOptions: [],
      queryParams: {
        adcd: null,
      },
      parmas: {
        token: null,
      },
    };
  },

  created() {
    console.log("this.$route", this.$route);
    this.parmas.token = this.$route.query.token;
    returnToken(this.parmas).then((res) => {
      console.log("有效token", res);
      let token = res.token;
      setToken(token);
      this.getTreeData();
    });
  },
  methods: {
    chooseName(key) {
      this.activeName = key;
    },
    getTreeData() {
      getAreasData().then((items) => {
        // console.log("getAreasData", items.data);
        let res = [];
        let getChildren = (res, pid) => {
          for (const i of items.data) {
            if (i.parentid === pid) {
              const newItem = {
                label: i.name,
                value: i.id,
              };
              if (i.layer != 3) newItem.children = [];
              res.push(newItem);
              getChildren(newItem.children, newItem.value);
            }
          }
        };
        getChildren(res, items.data[0].parentid);
        this.areasOptions = res;
        // 当不是admin时，默认行政区域
        // if (this.$userProfile.createUid != "admin") {
        //   this.queryParams.data.adcd = this.areasOptions[0].value;
        // }
        // return res;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  // width: 1200px;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  // border: 1px solid red;
  .select {
    height: 64px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    margin-bottom: 20px;
    /deep/ .el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 320px;
      }
    }
  }
  .main {
    height: 800px;
    display: flex;
    flex-direction: column;
    .main_head {
      height: 58px;
      background: #f3feff;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .head_title {
        height: 26px;
        display: flex;
        .iconSpan {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin-right: 8px;
          .first {
            width: 6px;
            height: 6px;
            background: #f86220;
          }
          .second {
            width: 6px;
            height: 6px;
            background: #36b29e;
          }
        }
        .text {
          font-size: 18px;
          line-height: 26px;
          & > em {
            font-size: 14px;
            color: #8c8c8c;
            font-style: normal;
          }
        }
      }
      .head_btn {
        font-size: 14px;
        color: #36b29e;
        cursor: pointer;
      }
    }
    .main_content {
      flex: 1;
      padding: 20px 50px;
      // background: skyblue;
      display: flex;
      flex-direction: column;
      .con_head {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
        .head_btn {
          // border: 1px solid #d9d9d9;
          // border-radius: 4px;
          & > span {
            display: inline-block;
            padding: 5px 16px;
            font-size: 14px;
            color: #262626;
            cursor: pointer;
            border: 1px solid #d9d9d9;
          }
          & > span:nth-child(1) {
            border-radius: 4px 0 0 4px;
          }
          & > span:nth-child(2) {
            border-radius: 0 4px 4px 0;
          }
          .activeSpan1 {
            border: 1px solid #36b29e;
            color: #36b29e;
          }
          .activeSpan2 {
            border: 1px solid #36b29e;
            color: #36b29e;
          }
        }
      }
      .con_info {
        flex: 1;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        .info_left {
          // width: 240px;
          width: 22%;
          height: 464px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // border: 1px solid red;
          .infoItem {
            height: 104px;
            padding: 16px;
            background: linear-gradient(
              to bottom,
              #cff3f6 0%,
              rgba(207, 243, 246, 0.3) 100%
            );
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            & > span:nth-child(1) {
              color: #262626;
              font-size: 16px;
            }
            & > span:nth-child(2) {
              color: #36b29e;
              font-size: 40px;
            }
          }
          & > .infoItem:nth-last-child(1) {
            background: linear-gradient(
              to bottom,
              #c7f3e3 0%,
              rgba(199, 243, 227, 0.2) 100%
            );
          }
        }
        .info_right {
          // width: 800px;
          width: 70%;
          // height: 600px;
          // border: 1px solid red;
          & > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>