tqApp-webView/pages/index/index.vue

<template>
  <view class="home-container">
	  <!-- 环卫 start-->
    <template v-if="hasPlat(['sanitation'])">
      <view class="index-title">
        智慧环卫 <view class="dot"></view> 让科技建设城市
      </view>
      <image :src="$getImages('/assetsMobile/images/index/page.png')" class="background-image"></image>
      <view class="page-warp">
        <template v-for="(item,index) in sanitationArr">
          <view v-if="$hasPermiOr(allPermission(item.sidebarList))" :key="index" class="home-munes" :class="index==0?'pd8':''">
              <view class="sidebar">
                  <Sidebar :direction="item.direction" :sidebarList="item.sidebarList" :label="item.label" :titleIcon="item.titleIcon"></Sidebar>
              </view>
          </view>
        </template>
		
		<!-- 动态菜单 start-->
		<template v-for="(item,index) in $store.state.user.dynList">
		  <view :key="`dyn${index}`" class="home-munes">
		      <view class="sidebar">
		          <sidebardyn :children="item.children" :label="item.meta.title" :titleIcon="item.mobileIcon" :himObj="himObj"></sidebardyn>
		      </view>
		  </view>
		</template>
		<!-- 动态菜单 end-->
      </view>
    </template>
     <!-- 环卫 end-->
	 <!-- 企事业 start-->
	<template v-else-if="hasPlat(['enterprises'])">

		<view class="tipfixed" v-if="hasHostPlat(['dingH5']) && $store.state.user.showSts==1">

			<template v-if="!$store.state.user.isModel">
				<div>点击演示按钮后进入演示状态，显示模拟数据</div>
				<u-button type="success" size="mini" 
					:custom-style="{width: '160rpx'}" @click="$store.dispatch('setIsModel',true)">开始演示</u-button>
			</template>
			<template v-else-if="$store.state.user.isModel">
				<div>点击退出演示后退出演示状态，显示真实数据</div>
				<u-button type="error" size="mini" 
					:custom-style="{width: '160rpx'}" @click="$store.dispatch('setIsModel',false)">退出演示</u-button>
			</template>		
		</view>
		
		<view class="icon-fixed-right" v-if="hasHostPlat(['dingH5'])">
			<image v-if="$hasPermi('mobile:index:base:scanCode')" :src="$getImages('/assetsMobile/images/qrcode.png')" class="munes-icon" @click="handleQrCode"></image>
		</view>
		
		<view class="swiper-wrap" v-if="$hasPermi('mobie:index:base:swiper')">
			<u-swiper :list="swiperList" :height="166" :radius="8" indicator indicatorMode="dot"></u-swiper>
		</view>
		
		<view class="data-wrap">
			<view class="data-wrap-item" v-if="$hasPermi('mobie:index:base:realMile')">
				<image :src="$getImages('/assetsMobile/images/enterprises/data/licheng.png')" class="data-wrap-item-bg"></image>
				<view class="data-wrap-item-content">
					<view class="data-wrap-item-title">里程</view>
					<view class="data-wrap-item-label">今日里程</view>
					<view class="data-wrap-item-label">{{todayVehicleMileStats.realMile}}</view>
				</view>
				
			</view>
			<view class="data-wrap-item" v-if="$hasPermi('mobie:index:base:task')">
				<image :src="$getImages('/assetsMobile/images/enterprises/data/renwu.png')" class="data-wrap-item-bg"></image>
				<view class="data-wrap-item-content">
					<view class="data-wrap-item-title">任务</view>
					<view class="data-wrap-item-label">未完成  <text style="margin-left: 20rpx;">{{vehicleTaskStats.beginCount+vehicleTaskStats.unBeginCount}}</text></view>
					<view class="data-wrap-item-label">已完成  <text style="margin-left: 20rpx;">{{vehicleTaskStats.endCount}}</text></view>
				</view>
			</view>
			<view class="data-wrap-item" v-if="$hasPermi('mobie:index:base:vehicle')">
				<image :src="$getImages('/assetsMobile/images/enterprises/data/cheliang.png')" class="data-wrap-item-bg"></image>
				<view class="data-wrap-item-content">
					<view class="data-wrap-item-title">车辆</view>
					<view class="data-wrap-item-label">出车  <text style="margin-left: 20rpx;">{{vehicleDispatchStats.runCount}}</text></view>
					<view class="data-wrap-item-label">空闲  <text style="margin-left: 20rpx;">{{vehicleDispatchStats.freeCount}}</text></view>
				</view>
			</view>
			<view class="data-wrap-item" v-if="$hasPermi('mobie:index:base:driver')">
				<image :src="$getImages('/assetsMobile/images/enterprises/data/siji.png')" class="data-wrap-item-bg"></image>
				<view class="data-wrap-item-content">
					<view class="data-wrap-item-title">司机</view>
					<view class="data-wrap-item-label">出车  <text style="margin-left: 20rpx;">{{driverDispatchStats.runCount}}</text></view>
					<view class="data-wrap-item-label">空闲  <text style="margin-left: 20rpx;">{{driverDispatchStats.freeCount}}</text></view>
				</view>
			</view>
		</view>
			
      <!-- <view class="index-title">
        精准管理 <view class="dot"></view> 让管车更简单
      </view>
      <image :src="$getImages('/assetsMobile/images/index/page.png')" class="background-image"></image> -->
      <view class="page-warp-enterprises">
       <!-- <template v-for="(item,index) in enterprisesArr">
          <view v-if="$hasPermiOr(allPermission(item.sidebarList))" :key="index" class="home-munes" :class="index==0?'pd8':''">
              <view class="sidebar">
                  <Sidebar :direction="item.direction" :sidebarList="item.sidebarList" :label="item.label" :titleIcon="item.titleIcon"></Sidebar>
              </view>
          </view>
        </template> -->
		
		<!-- 动态菜单 start-->
		<template v-for="(item,index) in $store.state.user.dynList">
		  <view :key="`dyn${index}`" class="home-munes">
		      <view class="sidebar">
		          <sidebardyn :children="item.children" :label="item.meta.title" :titleIcon="item.mobileIcon" :himObj="himObj"></sidebardyn>
		      </view>
		  </view>
		</template>
		<!-- 动态菜单 end-->
      </view>
    </template>
    <!-- 企事业 end-->
	<template v-else>
      <view class="page1-warp">
        <template v-for="(item,index) in otherArr">
          <view v-if="$hasPermiOr(allPermission(item.sidebarList))" :key="index" class="home-munes">
              <view class="sidebar">
                <Sidebar :sidebarList="item.sidebarList" :label="item.label"></Sidebar>
              </view>
          </view>
        </template>
      </view>
    </template>
    
  </view>
</template>

<script>
import { getMobileRouters,boardDetail,getMessageNum } from "@/api/common/system";
import Sidebar from '@/components/sidebar'
import sidebardyn from '@/components/sidebardyn'
import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载，也可按需进行加载
import { isExternal } from "@/utils/validate";

export default {
    components: {
        Sidebar,
        sidebardyn,
    },
    data() {
        return {
           sanitationArr: [
            {
              // label:'',
              // titleIcon:'',
              direction:'vertical',
              sidebarList:[
                {
                    permission: 'mobile:index:sanTask:machineWorkRecord', // 权限
                    label: '机械作业', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/machine-bg.png'), // 图片
                    url: '/pagesSanitation/machineWorkRecord/machineWorkRecord', // 路径
                },
                
                {
                    permission: 'mobile:index:sanTask:wasteTransport', // 权限
                    label: '垃圾收运', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/collect-bg.png'), // 图片
                    url: '/pagesSanitation/wasteTransport/wasteTransport', // 路径
                },
				{
				    permission: 'mobile:index:sanTask:wasteTransfer', // 权限
				    label: '垃圾转运', // 标题
				    icon: this.$getImages('/assetsMobile/images/index/transport-bg.png'), // 图片
				    url: '/pagesSanitation/wasteTransfer/wasteTransfer', // 路径
				},
                
             
              ]
            },
          
           ],
           /* enterprisesArr:[
            {
              // label:'',
              // titleIcon:'',
              direction:'vertical',
              sidebarList:[
                {
                    permission: 'mobie:index:base:realtimeWatch', // 权限
                    label: '实时监控', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/monitor-bg.png'), // 图片
                    url: '/pages/realtimeWatch/realtimeWatch', // 路径
                },
                {
                    permission: 'mobile:index:dispatching:initiate', // 权限
                    label: '用车申请', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/vehApplication-bg.png'), // 图片
                    url: '/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_flow_veh', // 路径
                },
                {
                    permission: 'mobile:index:cost:initiate', // 权限
                    label: '费用申请', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/expApplication-bg.png'), // 图片
                    url: '/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_cost', // 路径
                },
              ]
            },
           
           ], */
           otherArr:[
            {
              label:'监控中心',
              sidebarList:[ // 监控中心
                {
                    permission: 'mobie:index:base:realtimeWatch', // 权限
                    label: '实时定位', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/realTimePosition.png'),//`https://www.yihaocg.com/mobile/image/indexNew/realTimePosition.png`, // 图片
                    url: '/pages/realtimeWatch/realtimeWatch', // 路径
                },
                {
                    permission: 'mobie:index:base:pastRoute', // 权限
                    label: '历史轨迹', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/historicaltrack.png'),//`https://www.yihaocg.com/mobile/image/indexNew/historicaltrack.png`, // 图片
                    url: '/pagesMap/pastRoute/pastRoute', // 路径
                },
               
            ]
            },
            {
              label:'报警报表',
              sidebarList:[ // 报警报表
                {
                    permission: 'mobile:index:base:proactiveSecurity', // 权限
                    label: '主动安全报警', // 标题
                    icon:  this.$getImages('/assetsMobile/images/index/zhudong.png'),//`https://www.yihaocg.com/mobile/image/alarm/zhudong.png`, // 图片
                    url: '/alarm/proactiveSecurity/index', // 路径
                },
                {
                    permission: 'mobile:index:base:driverBehavior', // 权限
                    label: '驾驶行为报警', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/jiashi.png'),//`https://www.yihaocg.com/mobile/image/indexNew/jiashi.png`, // 图片
                    url: '/alarm/driverBehavior/index', // 路径
                },
                {
                    permission: 'mobile:index:base:blindSpot', // 权限
                    label: '车辆盲点报警', // 标题
                    icon: this.$getImages('/assetsMobile/images/index/blindSpot.png'),//`https://www.yihaocg.com/mobile/image/indexNew/blindSpot.png`, // 图片
                    url: '/alarm/blindSpot/index', // 路径
                },
            ]
            },
		
			
         
            {
              label:'派车流程',
              titleIcon:this.$getImages(`/assetsMobile/images/index/menu/flow-icon.png`),
              // direction:'',
              sidebarList:[
                {
                    permission: 'mobile:index:dispatching:initiate', // 权限
                    label: '发起流程', // 标题
                    iconbg:'3',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-initiate-flow.png'), // 图片
                    url: '/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_flow_veh', // 路径
                },
                {
                    permission: 'mobile:index:dispatching:list', // 权限
                    label: '用车记录', // 标题
                    iconbg:'0',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-vehrecord.png'), // 图片
                    url: '/workflow/vehicleRecord/index', // 路径
                },
             ]
            },
            {
              label:'维保流程',
              titleIcon:this.$getImages(`/assetsMobile/images/index/menu/flow-icon.png`),
              // direction:'',
              sidebarList:[
                {
                    permission: 'mobile:index:maintenance:initiate', // 权限
                    label: '发起流程', // 标题
                    iconbg:'3',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-initiate-flow.png'), // 图片
                    url: '/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_flow_maintenance', // 路径
                },
                {
                    permission: 'mobile:index:maintenance:list', // 权限
                    label: '车辆维保记录', // 标题
                    iconbg:'1',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-mainrecord.png'), // 图片
                    url: '/workflow/vehicleMaintenanceRecord/index', // 路径
                },
             ]
            },
            {
              label:'费用流程',
              titleIcon:this.$getImages(`/assetsMobile/images/index/menu/flow-icon.png`),
              // direction:'',
              sidebarList:[
                {
                    permission: 'mobile:index:maintenance:initiate', // 权限
                    label: '发起流程', // 标题
                    iconbg:'3',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-initiate-flow.png'), // 图片
                    url: '/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_cost', // 路径
                },
                {
                    permission: 'mobile:index:maintenance:list', // 权限
                    label: '费用记录', // 标题
                    iconbg:'1',// 图标背景
                    icon: this.$getImages('/assetsMobile/images/index/menu/icon-mainrecord.png'), // 图片
                    url: '/workflow/recordCost/index', // 路径
                },
             ]
            },
            {
              label:'待办',
              sidebarList:[
                {
                    permission: 'mobile:index:base:flowstart', // 权限
                    label: '发起流程', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/start2.png'),//`http://tq.5000v.com:8032/assetsMobile/images/flow/start2.png`, // 图片
                    url: '/pages/flow/flow?redirect=/pages/workflowTask/index&type=start', // 路径
                },
                {
                    permission: 'mobile:index:base:flowmyLaunch', // 权限
                    label: '我发起的', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/myLanuch2.png'),//`http://tq.5000v.com:8032/assetsMobile/images/flow/myLanuch2.png`, // 图片
                    url: '/pages/flow/flow?redirect=/pages/workflowTask/index&type=myLaunch', // 路径
                },
                {
                    permission: 'mobile:index:base:flowtodo', // 权限
                    label: '我的待办', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/todo2.png'), // 图片
                    url: '/pages/flow/flow?redirect=/pages/workflowTask/index&type=todo', // 路径
                    hint:''
                },
                {
                    permission: 'mobile:index:base:flowdone', // 权限
                    label: '我的已办', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/done2.png'),//`http://tq.5000v.com:8032/assetsMobile/images/flow/done2.png`, // 图片
                    url: '/pages/flow/flow?redirect=/pages/workflowTask/index?type=done', // 路径
                },
              ]
            },
        
            {
              label:'司机任务',
              sidebarList:[
                {
                    permission: 'mobile:index:base:driverTask', // 权限
                    label: '任务列表', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/driverTask.png'), // 图片
                    url: '/workflow/driverTask/index', // 路径
                },
              ]
            },
            {
              label:'物品管理',
              sidebarList:[
                {
                    permission: 'mobile:index:material:materialApplication', // 权限
                    label: '物品申领', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/vehicleRecord.png'), // 图片
                    url: '/pagesBase/materialApplication/index', // 路径
                }, 
				        {
                    permission: 'mobile:index:material:materialRecord', // 权限
                    label: '申领记录', // 标题
                    icon: this.$getImages('/assetsMobile/images/flow/done2.png'), // 图片
                    url: '/pagesBase/materialRecord/index', // 路径
                },
              ]
            },
            {
              label:'矿山任务',
              sidebarList:[
                {
                  permission: 'mobile:index:mine:task', // 权限
                  label: '任务', // 标题
                  icon: this.$getImages('/assetsMobile/images/flow/driverTask.png'), // 图片
                  url: '/pagesMine/driverTask/index', // 路径
                },
              ]
            },
           ],
           // 动态菜单
			dynList: [],
			himObj: {
				'mobile:index:base:flowtodo': 0, //待办
				'mobile:index:base:sysMessage': 0, //车务消息
			}, 
			
			swiperList: [
				this.$getImages('/assetsMobile/images/enterprises/swipe1.png'),
				this.$getImages('/assetsMobile/images/enterprises/swipe2.png'),
				this.$getImages('/assetsMobile/images/enterprises/swipe3.png'),
				this.$getImages('/assetsMobile/images/enterprises/swipe4.png'),
				this.$getImages('/assetsMobile/images/enterprises/swipe5.png'),
			],
			
			todayVehicleMileStats: {
				realMile: 0,
			},
			vehicleTaskStats: {
				beginCount: 0,
				endCount: 0,
				unBeginCount: 0,
			},
			vehicleDispatchStats: {
				runCount: 0,
				freeCount: 0,
			},
			driverDispatchStats: {
				runCount: 0,
				freeCount: 0,
			},
		
        }
    },
    watch: {
        '$store.state.user.wsMsgNum': {

            handler(newVal) {
                if(this.$store.state.user.wsMsg==='flush_todo_num'){
                    this.updatataskCount()
                }
            }
        }
    },
	async created() {
		this.$store.dispatch('GetMobileRouters')
	},
    onLoad() {
        this.updatataskCount()
    },
	onShow() {
		/* 企事业数据看板 */
		if(this.hasPlat(['enterprises'])) {
			
			boardDetail({}).then((res) => {
				let {todayVehicleMileStats,vehicleTaskStats,vehicleDispatchStats,driverDispatchStats} = res.data
				
				this.copyProps(this.todayVehicleMileStats,todayVehicleMileStats)
				this.copyProps(this.vehicleTaskStats,vehicleTaskStats)
				this.copyProps(this.vehicleDispatchStats,vehicleDispatchStats)
				this.copyProps(this.driverDispatchStats,driverDispatchStats)
			})
		}
	},
    methods: {
		updatataskCount(){
            getMessageNum({}).then(res=>{
             this.himObj['mobile:index:base:flowtodo'] = res.data.todoTotalNum
             this.himObj['mobile:index:base:sysMessage'] = res.data.total
            })
        },
        toformTemplate() {
            uni.navigateTo({
                url: '/pages/formTemplate/formTemplate?id=1&name=uniapp'
            });
        },
        allPermission(list){
          return list.map((e) => e.permission)
        },
		handleQrCode() {
			
			if(dd.env.platform == "notInDingTalk") {
	
				uni.showToast({
					icon: 'none',
					title: '请在钉钉应用内使用该功能'
				})
				return
			} else {
				dd.scan({
				  type: 'qr',
				  success: (res) => {
				    const { text } = res;
					if (isExternal(text)) {
						window.location.href= text
					}
				  },
				  fail: () => {},
				  complete: () => {},
				});
			}
		},
    },
}
</script>

<style lang="scss" scoped>
.home-container {
  
  background: #F7F8FA;
  position: relative;
  
  .tipfixed {
  	position: fixed;
  	top: 0;
  	left: 0;
  	padding: 20rpx;
  	width: 100%;
  	background: rgba(0, 0, 0, 0.3);
  	z-index: 100;
  	color: #FFFFFF;
  	font-size: 24rpx;
  	
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  }
  
  .icon-fixed-right {
	  position: fixed;
	  top: 710rpx;
	  right: 0;
	  z-index: 10000;
	  .munes-icon{
	    width: 80rpx;
	    height: 80rpx;
		&+.munes-icon{
			margin-top: 40rpx;
		}
	  }
  }
  
  .background-image{
    width: 100%;
    height: 362rpx;
  }
  .index-title{
    width: 100%;
    font-family: PangMenZhengDao;
    font-size: 26px;
    color: #FFFFFF;
    position: absolute;
    top: 110rpx;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .dot{
      width: 10rpx;
      height: 10rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin: 0 22rpx;
    }
  }
  
  .swiper-wrap {
	 margin: 16rpx 28rpx 16rpx;
	 width: calc(100% - 56rpx);
	 border-radius: 16rpx;
  }
  
  .data-wrap {
	  display: flex;
	  flex-wrap: wrap;
	  // gap: 16rpx 18rpx;
	  justify-content: space-between;
	  margin: 0 28rpx 16rpx;
	  
	  .data-wrap-item {
		  // width: calc(50% - 16rpx);
		  width: 338rpx;
		  height: 164rpx;
		  position: relative;
		  
		 margin-top: 16rpx; 
		 
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
		 
		  
		  .data-wrap-item-bg {
			  position: absolute;
			  bottom: 0;
			  right: 0;
			  width: 100%;
			  height: 100%;
		  }
		  .data-wrap-item-content {
			   padding: 10rpx 28rpx;
			    z-index: 100;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
			  .data-wrap-item-title {
				  font-family: PingFangSC, PingFang SC;
				  font-weight: 500;
				  font-size: 32rpx;
				  color: #FFFFFF;
				  line-height: 44rpx;
				  text-align: left;
				  font-style: normal;
			  			  
			  }
			  .data-wrap-item-label {
				  font-family: PingFangSC, PingFang SC;
				  font-weight: 400;
				  font-size: 28rpx;
				  color: #FFFFFF;
				  line-height: 44rpx;
				  text-align: left;
				  font-style: normal;
			  }
		  }
		  
	  }
  }
  
  .page-warp-enterprises{
  /*  position: absolute;
    top:240rpx; */
    margin: 0 28rpx;
    width: calc(100% - 56rpx);
    overflow-y: auto;
    padding-bottom: 120rpx;
    .home-munes {
      padding: 20rpx;
      border-radius: 16rpx;
      background: #fff;
      margin-bottom: 16rpx;
    }
    .pd8{
      padding: 16rpx;
    }
  }
  
  
  .page-warp{
    position: absolute;
    top:240rpx;
    margin: 0 28rpx;
    width: calc(100% - 56rpx);
    overflow-y: auto;
    padding-bottom: 120rpx;
    .home-munes {
      padding: 20rpx;
      border-radius: 16rpx;
      background: #fff;
      margin-bottom: 16rpx;
    }
    .pd8{
      padding: 16rpx;
    }
  }
  .page1-warp{
    top:26rpx;
    padding-bottom: 120rpx;
    .home-munes {
      padding: 20rpx;
      background: #fff;
    }
  }
  
}
</style>