zhbsq-vue-web/src/views/index.vue

<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      早上好，管理员！
      <iframe
        allowtransparency="true"
        frameborder="0"
        width="180"
        height="36"
        scrolling="no"
        style="padding-top: 10px"
        src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
      ></iframe>
    </div>
    <!--    <div class="cbox">-->
    <!--      <div class="ctitle">各保税区综合评分概况</div>-->
    <!--      <div class="rows">-->
    <!--        <div class="row">-->
    <!--          <div class="out">-->
    <!--            <div class="int">-->
    <!--              <span class="icon" style="background-color: rgba(37, 97, 239, 1)">&#xe6e0;</span>-->
    <!--              <div class="num">80</div>-->
    <!--              <div class="desc">南宁综合保税区</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="row">-->
    <!--          <div class="out">-->
    <!--            <div class="int">-->
    <!--              <span class="icon" style="background-color: rgba(102, 110, 232, 1)">&#xe6e0;</span>-->
    <!--              <div class="num">80</div>-->
    <!--              <div class="desc">钦州综合保税区</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="row">-->
    <!--          <div class="out">-->
    <!--            <div class="int">-->
    <!--              <span class="icon" style="background-color: rgba(61, 212, 167, 1)">&#xe6e0;</span>-->
    <!--              <div class="num">80</div>-->
    <!--              <div class="desc">北海综合保税区</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="row">-->
    <!--          <div class="out">-->
    <!--            <div class="int">-->
    <!--              <span class="icon" style="background-color: rgba(250, 116, 107, 1)">&#xe6e0;</span>-->
    <!--              <div class="num">80</div>-->
    <!--              <div class="desc">凭祥综合保税区</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="row">-->
    <!--          <div class="out">-->
    <!--            <div class="int">-->
    <!--              <span class="icon" style="background-color: rgba(253, 219, 120, 1)">&#xe6e0;</span>-->
    <!--              <div class="num">80</div>-->
    <!--              <div class="desc">梧州综合保税区</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="row" style="width: 40%; float: left; margin-top: 15px">
      <div class="cbox">
        <div class="lable">快捷入口</div>
        <div class="menu" v-for="(item, index) in topMenus" @click="handleSelect(item)">
          <div class="out">
            <div class="int">
              <div class="icon"><svg-icon :icon-class="item.meta.icon" /></div>
              <div class="desc omit">{{ item.meta.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="width: 60%; float: left; margin-top: 15px; padding-left: 20px">
      <div class="cbox">
        <div class="lable">{{ year }}广西综合保税区进出口总值(亿元)</div>
        <BarChart :chartData="chartData.bar" tag="(亿元)" style="width: 100%"></BarChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; margin-top: 15px">
      <div class="cbox">
        <div class="lable omit">{{ year }}各综合保税区进出口总值占比(%)</div>
        <PieChart
          :chartData="chartData.bar"
        ></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable omit">{{ year }}各综合保税区加工贸易进出口值占比(%)</div>
        <PieChart
          :chartData="chartData.pie1"
          tag="亿"
        ></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable omit">{{ year }}各综合保税区物流货物进出口值占比(%)</div>
        <PieChart
          :chartData="chartData.pie2"
        ></PieChart>
      </div>
    </div>
    <div class="row" style="width: 25%; float: left; padding-left: 15px; margin-top: 15px">
      <div class="cbox">
        <div class="lable omit">{{ year }}各综合保税区一般贸易进出口值占比(%)</div>
        <PieChart
          :chartData="chartData.pie3"
        ></PieChart>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
import { constantRoutes } from '@/router';
import axios from 'axios'
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      year: new Date().getFullYear(),
      nameList: ['南宁', '梧州', '北海', '钦州', '凭祥'],
      dataNameList: ['加工贸易进出口值', '物流货物进出口值', '一般贸易进出口值'],
      chartData: {
        bar: [
          // { name: '凭祥', value: 716.33 },
          // { name: '钦州', value: 265.73 },
          // { name: '南宁', value: 215.48 },
          // { name: '北海', value: 34.49 },
          // { name: '梧州', value: 0 }
        ],
        pie1: [
          // { name: '南宁保税区', value: '1' },
          // { name: '北海保税区', value: '2' },
          // { name: '梧州保税区', value: '2' },
          // { name: '钦州保税区', value: '2' },
          // { name: '凭祥保税区', value: '2' }
        ],
        pie2: [],
        pie3: []
      }
    };
  },
  mounted() {
    axios({
      // url: process.env.VUE_APP_BASE_API + '/gather/statistics/wb/comprehensive/GxzhbsqsdzzjckzbVo',
      url: process.env.VUE_APP_BASE_API + '/gather/statistics/wb/comprehensive/total/value/deptId/list',
      method: 'POST',
      data: {
        year: new Date().getFullYear()
      },
      header: {
        "Content-Type": "application/json;charset=UTF-8"
      }
    }).then((res) => {
      
      if(res.data.code >= 200 && res.data.code <= 300) {
         this.year = (res?.data?.data?.year ||  this.year) + (res?.data?.data?.month ? '年' +  res?.data?.data?.month.replace(/^0+/, '') + '月' : '年 ')
         
         let dataObj = res.data.data.date
         // 获取各地区总值
         this.chartData.bar = Object.values(dataObj)?.map((item, index) => {
          return { 
			         name: this.nameList[index], 
			         value: Object.values(item)[0] ? Object.values(item)[0].map(pitem => {
			        		if(pitem?.feeName == '进出口总值') {
			        			return pitem.collValue
			        		}
			        	}).find(value => !!value) : 0.00
			        }
	        })
        // 将数据按dataNameList顺序组成数组
        let valueList = [[], [], []]
        this.dataNameList.map((name, index) => {
          Object.values(dataObj).map(obj => {
            (obj[Object.keys(obj)[0]] || [{feeName: this.dataNameList[0]},{feeName: this.dataNameList[1]}, {feeName: this.dataNameList[2]}]).map((item) => {
              if(item.feeName == name) {
               valueList[index] = [...valueList[index], item.collValue || 0]
              }
            })
          })
        })
        valueList.map((item, pindex) => {
          this.chartData[`pie${pindex+1}`] = this.nameList.map((name,index) => {
            return {
              name,
              value:item[index]
            }
          })
        })
      }
    })
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      this.routers.map(menu => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === '/') {
            topMenus.push(menu.children[0]);
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus.slice(0, 9);
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = [];
      this.routers.map(router => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === '/') {
              router.children[item].path = '/' + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path = router.path + '/' + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return constantRoutes.concat(childrenMenus);
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path;
      let activePath = path;
      if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
        const tmpPath = path.substring(1, path.length);
        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
        this.$store.dispatch('app/toggleSideBarHide', false);
      } else if (!this.$route.children) {
        activePath = path;
        this.$store.dispatch('app/toggleSideBarHide', true);
      }
      this.activeRoutes(activePath);
      return activePath;
    }
  },
  methods: {
    // 菜单选择事件
    handleSelect(item) {
      this.isShowMenu = false;
      this.currentIndex = item.path;
      let key = item.path;
      const route = this.routers.find(item => item.path === key);
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, '_blank');
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        this.$router.push({ path: key });
        this.$store.dispatch('app/toggleSideBarHide', true);
      } else {
        // 显示左侧联动菜单
        this.activeRoutes(key);
        this.$store.dispatch('app/toggleSideBarHide', false);
      }
      this.$emit('showHamBurger');
      this.$emit('closeMenuHandler');
    },
    // 当前激活的路由
    activeRoutes(key) {
      var routes = [];
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map(item => {
          if (key == item.parentPath || (key == 'index' && '' == item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        this.$store.commit('SET_SIDEBAR_ROUTERS', routes);
      }
    },
    ishttp(url) {
      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  overflow: hidden;
  .mtitle {
    margin-bottom: 20px;
    font-size: 19px;
    margin-top: -15px;
  }
  .cbox {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 10px 30px rgba(228, 228, 228, 0.49);
    overflow: hidden;
    padding: 20px;
    .ctitle {
      font-weight: 500;
      font-size: 21px;
      color: #333333;
      margin-bottom: 40px;
    }
    .rows {
      .row {
        float: left;
        width: 20%;
        .out {
          padding: 10px;
          .int {
            border: 1px solid #e6e6e6;
            text-align: center;
            border-radius: 8px;
            padding: 30px;
            color: #545555;
            .icon {
              display: block;
              width: 45px;
              height: 45px;
              margin: 0 auto;
              border-radius: 12px;
              color: white;
              margin-top: -56px;
              font-size: 20px;
              line-height: 42px;
            }
            .num {
              font-size: 30px;
              font-weight: bold;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            .desc {
              font-size: 15px;
            }
          }
        }
      }
    }
    .menu {
      float: left;
      width: 33.33%;
      .out {
        padding: 10px;
        .int {
          padding: 10px 10px 0px 10px;
          text-align: center;
          cursor: pointer;
          .icon {
            width: 45px;
            height: 45px;
            color: white;
            border-radius: 12px;
            margin: 0 auto;
            font-size: 23px;
            line-height: 45px;
            background-color: rgb(37, 97, 239);
            color: white;
          }
          .desc {
            color: #545555;
            margin-top: 9px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>