提交代码

src/App.vue

@@ -1,8 +1,7 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/stlj">"吉行智通"服务云台</router-link>
     </div>
     <router-view/>
   </div>

src/router/index.js

@@ -18,6 +18,14 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
+  {
+    path: '/stlj',
+    name: 'Stlj',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/stlj.vue')
+  },
   {
     path: '/jczh',
     name: 'Jczh',

src/store/modules/maintabs.js

@@ -0,0 +1,128 @@
+import {getMenuTreeByUsername} from '../../api/system/sys_menu'
+import router from "@/router/index"
+import systemRoutes from '@/router/modules/system'
+
+const HOME_PAGE = "/home"
+const FIRST_PAGE = HOME_PAGE + "/firstpage"
+const state = {
+    //存放{ route: 路由路径, name: tab显示名称}对象数组
+    maintabs:[{route: FIRST_PAGE, name: "首页",closable:false}],
+    //当前被激活显示的那个Tab内容对应的route
+    activeRoute: FIRST_PAGE,
+    //当前激活的Tab的功能名称
+    activeTabName:"",
+    menuList:[
+      /*{  //这部分已经在后端“菜单管理”中进行动态加载，所以不需要静态代码配置
+          id:0,
+          name:"非菜单路由,但是需要显示Tab,请定义在这里",
+          hidden:true,
+          children:[
+            {name:"首页",path:"/home/firstpage",hidden:true},
+            {name:"个人中心",path:"/home/personal",hidden:true}
+          ]
+      },
+      {   id:1,
+          name:"系统管理",
+          path:"/system",
+          icon:"el-icon-lock",
+          children:[
+              {id:3,name:"用户管理",path:"/home/sysuser"},
+              {id:4,name:"角色管理",path:"/home/sysrole"},
+              {id:6,name:"组织管理",path:"/home/sysorg"},
+              {id:7,name:"菜单管理",path:"/home/sysmenu"},
+              {id:8,name:"接口管理",path:"/home/sysapi"},
+          ]
+      },
+      {   id:2,
+          name:"订单管理",
+          path:"/order",
+          icon:"el-icon-eleme",
+          children:[
+              {id:5,name:"订单详情",path:"/home/order"},
+          ]
+      }*/
+    ]
+
+}
+const actions = {
+  addTab({state,commit},route){
+    getMenuTreeByUsername().then(res => {
+        state.menuList = res.data
+        commit("addTabMutation",route);
+    })
+  }
+}
+const mutations = {
+    //加载后台菜单数据之后调用该方法
+    addTabMutation(state, route) {
+        //维护主界面Tab信息（从菜单数据中获取）
+        let isAlreadyIn =
+            state.maintabs.some(item => item.route === route)
+        this.commit("findMenuNameByRoute",route);
+        state.activeRoute = route;
+        if(!isAlreadyIn && state.activeTabName !== ""){
+            state.maintabs.push({route:route,name:state.activeTabName});
+        }
+
+        //重点从这里开始
+        let loadedRoutes = []; //动态加载的前端路由初始化
+        //将菜单转换为路由
+        menuToRoutes(state.menuList,loadedRoutes)
+        //固定路由与动态加载的前端路由进行组合
+        for(let i in systemRoutes){
+          if(systemRoutes[i].path === HOME_PAGE){
+            systemRoutes[i].children = loadedRoutes
+          }
+        }
+        //最后让路由生效
+        router.$addRoutes(systemRoutes)
+    },
+    removeTab(state, route){
+        if(route !== FIRST_PAGE){
+            state.maintabs = state.maintabs.filter(
+                item => item.route !== route
+            )
+            state.activeRoute = state.maintabs[state.maintabs.length-1].route
+        }
+    },
+    findMenuNameByRoute(state, route){
+        let findOne;
+        for(let i in state.menuList){
+            let tmpArr = state.menuList[i].children.filter(
+                item => item.path === route
+            )
+            if(tmpArr.length > 0) {
+                findOne = tmpArr[0]
+                break;
+            }
+        }
+        state.activeTabName = findOne?findOne.name:"";
+    }
+}
+const getters = {
+
+}
+
+//将菜单转换为前端路由
+function menuToRoutes(menuList,loadedRoutes){
+  for(let i in menuList){
+    menuList[i].children.forEach(item => {
+      if(item.isLeaf){  //为权限菜单中的叶子节点，添加前端路由
+        loadedRoutes.push({
+          path: item.url.replace(HOME_PAGE + "/",""),
+          name: item.url.replace(HOME_PAGE + "/",""),
+          component: resolve => {
+            require(["@/views/" + item.viewImport ], resolve)
+          }
+        })
+      }else{
+        //递归处理菜单树形结构
+        menuToRoutes(item.children,loadedRoutes);
+      }
+    })
+  }
+}
+
+export default {
+    state,actions,mutations,getters
+}

src/store/modules/system.js

@@ -0,0 +1,72 @@
+import {getAllSysConfig,refreshSysConfig} from '@/api/system/sys_config'
+import {getAllSysDict}  from '@/api/system/sys_dict'
+import axios from 'axios'
+
+const state = {
+  sysconfig:[],
+  sysdict:[]
+}
+const actions = {
+  loadSysConfig({state}){
+    return new Promise((resolve,reject) => {
+      //没加载过才加载，已经加载过就不加载了
+      //也就说只有登录，或者页面刷新时才重新加载全局配置
+      if(state.sysconfig.length <= 0
+        || state.sysdict.length <= 0){
+        axios.all([getAllSysConfig(), getAllSysDict()])
+        .then(axios.spread(function (res1, res2) {
+          // 两个请求都执行完成后，进入该函数
+          state.sysconfig = res1.data
+          state.sysdict = transferDict(res2)
+        }))
+      }
+      resolve();
+    })
+  },
+  refreshConfig({state}){
+    return new Promise((resolve,reject) => {
+      refreshSysConfig().then(res => {
+        state.sysconfig = res.data
+        resolve();
+      });
+    })
+  },
+  refreshDict({state}){
+    return new Promise((resolve,reject) => {
+      getAllSysDict().then(res => {
+        state.sysdict = transferDict(res)
+        resolve();
+      });
+    })
+  },
+}
+const mutations = {
+
+}
+const getters = {
+  getSysConfigItem: (state) => (paramKey) => {
+    return state.sysconfig
+      .find(item => item.paramKey === paramKey)
+      .paramValue
+  },
+  getSysDictName:(state) => (groupCode,itemValue) => {
+    return state.sysdict[groupCode][itemValue]
+  }
+}
+
+//工具函数：将list格式的数据字典转成groupCode：itemValue：itemName的二维key-value形式
+//方便后续取值的效率。不用过滤数组，效率更高。
+const transferDict = (res)=> {
+  let dictObj = {}
+  res.data.forEach(dict=>{
+    if(!dictObj [dict.groupCode]){
+      dictObj [dict.groupCode]={}
+    }
+    dictObj[dict.groupCode][dict.itemValue] = dict.itemName
+  })
+  return dictObj
+}
+
+export default {
+  state,actions,mutations,getters
+}

src/views/stlj.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="bgbox">
+    <!--    标题区域-->
+    <div class="head-title">
+<!--      <img src="../views/stlj/stlj.jpg">-->
+      <img src="../views/stlj/top@1x.png">
+<!--      <img src="../views/stlj/whole.svg">-->
+    </div>
+    <!--    左侧1-->
+    <div class="left-img" style="float:left">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/left_1.png" alt="重大项目建设">
+      </div>
+      <div style="left: 5px;float:left">
+        <div style="float:left">
+          <div style="float:left; padding-left: 100px;padding-top: 50px;">
+            <img src="../views/stlj/left-upper/left_1_up.png">
+          </div>
+          <div style="float:left; padding-left: 50px;padding-top: 117px;">
+            <span class="left-font">高速公路建设</span><br>
+            <span style="float:left; font-size:60px;color:white">681公里</span>
+          </div>
+        </div>
+        <div style="float:left">
+          <div style="float:left;padding-top: 50px;">
+            <img src="../views/stlj/left-upper/left_up_2.png">
+          </div>
+          <div style="float:left; padding-left: 50px;padding-top: 117px;">
+            <span class="left-font">国省干线建设</span><br>
+            <span style="float:left; font-size:60px;color:white">510公里</span>
+          </div>
+        </div>
+
+        <div style="float:left;padding-left: 100px;padding-top: 50px;">
+          <div style="float:left; font-size:50px;color:white">项目开复工</div>
+          <div style="float:left;">
+            续建项目力争2月末复工，年内建成3条高速公路382公里、高速公路通车总里程突破5000公里、达5025公里；新改建农村公路3500公里、整治“畅返不畅”5500公里、新建农村物流服务网点1807个；新增26个二级以上客运站转型升级、打造50条“吉意通”客运品牌线路、公交化改造线路110条
+          </div>
+        </div>
+        <div style="float:left;padding-left: 100px;padding-top: 50px;">
+          <div style="float:left; font-size:50px;color:white">后续项目前期工作</div>
+          <div style="float:left;">
+            目前,烟筒山至长春、长春至太平川、长春都市圈环线东环二期3个续建高速公路项目共进场人员2100余人、设备342台套；备料工作进展顺利，钢材、沥青、砂石分别完成计划备料的94.63%、81%、93.96%，为实现年内通车奠定基础。          </div>
+        </div>
+      </div>
+
+    </div>
+    <!--    左侧2-->
+    <div class="left2-img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/left_2.png" alt="乡村畅通">
+      </div>
+      <div style="float:left;padding-left: 100px;padding-top: 50px;">
+        <div style="float:left; font-size:50px;color:white">加大建设力度</div>
+        <div style="float:left;">
+          新改建农村公路3500公里、改造危桥110座、实施安防工程2500公里、整治“畅返不畅”5500公里等，新增144个自然屯通硬化路、8个乡镇通三级及以上公路，新建农村物流服务网点1807个，县乡村覆盖率达到80%，试点开通农村货运班车
+        </div>
+      </div>
+      <div style="float:left;padding-left: 100px;padding-top: 50px;">
+        <div style="float:left; font-size:50px;color:white">完善管养机制</div>
+        <div style="float:left;">
+        </div>
+      </div>
+      <div style="float:left;padding-left: 100px;padding-top: 50px;">
+        <div style="float:left; font-size:50px;color:white">优化服务保障</div>
+        <div style="float:left;">
+        </div>
+      </div>
+    </div>
+
+    <!--    左侧3-->
+    <div class="left3-img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/left_3.png" alt="交通物流">
+      </div>
+      <div style="float:left;margin-left: 100px;margin-top:40px;"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/left_3_1.png')})`,
+      backgroundSize: 'cover',
+      width: '382.16px',
+      height: '718.91px',
+      backgroundSize: 'cover'}">
+        <div style="font-size:50px;color:white;margin-left: 20px;margin-top:120px;">保通保畅</div>
+        <div style="font-size:32px;color:#84ACE8;margin-left: 20px;margin-top:120px;"
+        class="text-ellipsis"
+        >聚焦维护产业链供应链稳定，扎实推动交通物流降本提质增效。建立重点物资应急运力保障机制，深入推进长春综合货运枢纽补链强链试点，完成东北地区多式联运企业联盟组建，新增2-3户规上多式联运企业，打造8-10条多式联运线路，加快公铁换装设备更新，壮大网络货运行业规模，推动交通运输数字经济、平台经济大幅增长。
+        </div>
+
+      </div>
+      <div  style="float:left;margin-left: 40px;margin-top:40px"
+          :style="{ backgroundImage: `url(${require('@/views/stlj/left_3_1.png')})`,
+      backgroundSize: 'cover',
+      width: '382.16px',
+      height: '718.91px',
+      backgroundSize: 'cover'}" >
+        <div style="font-size:50px;color:white;margin-left: 20px;margin-top:120px">降本增效</div>
+        <div style="font-size:32px;color:#84ACE8;margin-left: 20px;margin-top:120px;"
+             class="text-ellipsis">
+          聚焦维护产业链供应链稳定，扎实推动交通物流降本提质增效。建立重点物资应急运力保障机制，深入推进长春综合货运枢纽补链强链试点，完成东北地区多式联运企业联盟组建，新增2-3户规上多式联运企业，打造8-10条多式联运线路，加快公铁换装设备更新，壮大网络货运行业规模，推动交通运输数字经济、平台经济大幅增长。
+        </div>
+      </div>
+      <div  style="float:left;margin-left: 40px;margin-top:40px"
+          :style="{ backgroundImage: `url(${require('@/views/stlj/left_3_1.png')})`,
+      backgroundSize: 'cover',
+      width: '382.16px',
+      height: '718.91px',
+      backgroundSize: 'cover'}" >
+        <div style="font-size:50px;color:white;margin-left: 20px;margin-top:120px">交通平台</div>
+        <div style="font-size:32px;color:#84ACE8;margin-left: 20px;margin-top:120px;"
+             class="text-ellipsis">
+          聚焦维护产业链供应链稳定，扎实推动交通物流降本提质增效。建立重点物资应急运力保障机制，深入推进长春综合货运枢纽补链强链试点，完成东北地区多式联运企业联盟组建，新增2-3户规上多式联运企业，打造8-10条多式联运线路，加快公铁换装设备更新，壮大网络货运行业规模，推动交通运输数字经济、平台经济大幅增长。
+        </div>
+      </div>
+    </div>
+
+    <!--    中间1 -->
+    <div class="middle1_img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/middle/middle_1.png" alt="运输服务保障">
+      </div>
+      <div style="float:left;margin-left: 680px;margin-top:10px"
+      :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_1.png')})`,
+      backgroundSize: 'cover',
+      width: '1192px',
+      height: '1093px',
+      backgroundSize: 'cover'}" >
+      </div>
+<!--      <div style="float:left; font-size:50px;color:white">111111</div>-->
+
+      <div style="float:right;"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`,
+      backgroundSize: 'cover',
+      width: '827px',
+      height: '312px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+      <div style="margin-left: 500px;margin-top:40px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`,
+      backgroundSize: 'cover',
+      width: '827px',
+      height: '312px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+      <div style="margin-left: 1500px;margin-top:40px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_1_2.png')})`,
+      backgroundSize: 'cover',
+      width: '827px',
+      height: '312px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+    </div>
+
+    <!--    中间2 -->
+    <div class="middle2_img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/middle/middle_2.png" alt="运输服务保障">
+      </div>
+      <div style="float:left;margin-left: 80px;margin-top:100px"
+          :style="{ backgroundImage: `url(${require('@/views/stlj/middle/middle_2_1.png')})`,
+      backgroundSize: 'cover',
+      width: '1937px',
+      height: '851px',
+      backgroundSize: 'cover'}" >
+        <div style="float:left;font-size:50px;color:white;margin-left: 20px;margin-top:500px;"> 提升营商环境</div>
+        <div style="float:left;font-size:40px;color:white;margin-left: 1px;margin-top:500px;"> 提升政务服务质效</div>
+      <img src="../views/stlj/middle/middle_2_1_1.png" style="float:left;margin-left: 2000px;margin-top:1px">
+      <img src="../views/stlj/middle/middle_2_1_1.png" style="float:left;margin-left: 2000px;margin-top:1px">
+      <img src="../views/stlj/middle/middle_2_1_1.png" style="float:left;margin-left: 2000px;margin-top:1px">
+      <img src="../views/stlj/middle/middle_2_1_1.png" style="float:left;margin-left: 2000px;margin-top:1px">
+      </div>
+    </div>
+
+
+    <!--    右侧1-->
+    <div class="right1_img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/right/right_1.png" alt="绿色低碳">
+      </div>
+      <div style="float:left;margin-left: 80px;margin-top:100px"
+      :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_1_1.png')})`,
+      backgroundSize: 'cover',
+      width: '1332px',
+      height: '597px',
+      backgroundSize: 'cover'}" >
+
+      </div>
+    </div>
+
+    <!--    右侧2-->
+    <div class="right2_img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/right/right_2.png" alt="风险防控">
+      </div>
+      <div>
+        <img src="../views/stlj/right/right_2_1.png">
+      </div>
+    </div>
+    <!--    右侧3-->
+    <div class="right3_img">
+      <div style="margin-left: 40px;margin-top:180px">
+        <img src="../views/stlj/right/right_3.png" alt="从严治党">
+      </div>
+      <div style="float:left;margin-left: 80px;margin-top:100px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_1.png')})`,
+      backgroundSize: 'cover',
+      width: '271px',
+      height: '472px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+      <div style="float:left;margin-left: 80px;margin-top:160px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_1.png')})`,
+      backgroundSize: 'cover',
+      width: '271px',
+      height: '472px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+      <div style="float:left;margin-left: 80px;margin-top:100px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_2.png')})`,
+      backgroundSize: 'cover',
+      width: '271px',
+      height: '472px',
+      backgroundSize: 'cover'}" >
+      </div>
+
+      <div style="float:left;margin-left: 80px;margin-top:160px"
+           :style="{ backgroundImage: `url(${require('@/views/stlj/right/right_3_2.png')})`,
+      backgroundSize: 'cover',
+      width: '271px',
+      height: '472px',
+      backgroundSize: 'cover'}" >
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+import ScaleBox from "vue2-scale-box";
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  },
+  data(){
+    return {
+      screen: 'middle',
+      scaleArr: [],
+      isMenuCollapse: false,
+      bigScreenUrl:['/bigScreen/drain','/bigScreen/gas','/bigScreen/leader','/bigScreen/leaderMiddle','/bigScreen/heat'],
+      hideTitleArr:['首页'],
+    };
+
+  },
+  methods: {
+    handleCollapse() {
+      this.isMenuCollapse = !this.isMenuCollapse
+    },
+    getMenuCollapse() {
+      return {
+        "el-icon-s-fold": !this.isMenuCollapse,
+        "el-icon-s-unfold": this.isMenuCollapse
+      }
+    },
+    toBigScreen(name){
+      const { href  } = this.$router.resolve({
+        path: `/bigScreen/${name}`
+      });
+      this.$nextTick(()=>{
+        window.open(href ,'_blank')
+      })
+    },
+  }
+}
+</script>
+
+<style>
+
+.right1_img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 4200px;
+}
+.right2_img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 4200px;
+  padding-top: 1000px;
+}
+.right3_img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 4200px;
+  padding-top: 1800px;
+}
+.middle1_img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 1500px;
+}
+.middle2_img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 1500px;
+  padding-top: 1400px;
+}
+.left-img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 120px;
+  left: 0;
+  padding-left: 10px;
+}
+.left2-img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 1000px;
+  left: 0;
+  padding-left: 10px;
+}
+.left2-img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 1000px;
+  left: 0;
+  padding-left: 10px;
+}
+.left3-img{
+  position: absolute;
+  width: 25%;
+  height: calc(100vh - 10px);
+  top: 1800px;
+  left: 0;
+  padding-left: 10px;
+}
+.left-font{
+  font-size: 50px;
+  font-weight: 500;
+  line-height: 64px;
+  letter-spacing: 0em;
+
+  font-variation-settings: "opsz" auto;
+  font-feature-settings: "kern" on;
+  /* 字 */
+  color: #84ACE8;
+}
+.bgbox{
+  position: relative;
+  width: 5760px;
+  height: 3240px;
+  opacity: 1;
+  background: radial-gradient(37% 37% at 50% 50%, #223241 0%, #0A1117 100%);
+}
+.text-ellipsis {
+  width: 350px; /* 根据实际需求设置宽度 */
+  height: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>