nsgk_mobile/src/views/onlineHome/workbench.vue

<template>
    <div class="app-container">
      <van-sticky>
      <van-nav-bar
        title="网上家园"
      >
        <template #left>
            <van-icon name="location" color="3A80FB" size="16"/>
          <p  style="color: #878787;margin-left: 5px">{{deptName}}</p>
        </template>
        <template #right>
          <van-icon name="wap-nav" color="#000" size="18"/>
        </template>
      </van-nav-bar>
      </van-sticky>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 96%;margin: 2%;height:120px;border-radius: 6px;">
        <van-swipe-item v-for="(image,index) in images" :key="index">
          <img :src="image" style="width:100%;height: 120px"/>
        </van-swipe-item>
      </van-swipe>
      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;background: #fff;">
        <van-cell style="border-radius: 6px;" is-link to="done">
          <template #title>
            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
            <p style="font-weight: bold;font-size: 18px;display: inline-block;">待办</p>
          </template>
          <template #label>
            <p style="padding-left: 10px;">
              {{taskList&&taskList.length>0?taskList[0].projectName+'等，共'+taskList.length+'条':'暂无待办事项'}}
            </p>
          </template>
        </van-cell>
      </van-row>
      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="display:inline-block;background: #FFA63E;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">业务申请</p>
          </template>
        </van-cell>
          <van-grid :border="false">
            <van-grid-item text="用章申请" >
              <div slot="default" style="background:#FFA63E;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
                <img src="../../../static/images/onlineHome/icon1.png" style="height: 25px;vertical-align: center;" alt />
              </div>
              <p style="margin-top: 5px;color: #666666;">用章申请</p>
            </van-grid-item>
            <van-grid-item text="宅基地申请" >
              <div slot="default">
                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                  <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
            </van-grid-item>
            <van-grid-item text="宅基地流转" >
              <div slot="default">
                <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon3.png" style="width: 25px;margin-top:5px;display: inline-block" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地流转</p>
            </van-grid-item>
            <van-grid-item text="宅基地退出" >
              <div slot="default">
                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon4.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">宅基地退出</p>
            </van-grid-item>
            <van-grid-item text="付款申请" >
              <div slot="default">
                <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon5.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">付款申请</p>
            </van-grid-item>
            <van-grid-item text="项目申报" >
              <div slot="default">
                <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">项目申报</p>
            </van-grid-item>
            <van-grid-item text="拨付申请" >
              <div slot="default">
                <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon7.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">拨付申请</p>
            </van-grid-item>
            <van-grid-item text="验收申请" >
              <div slot="default">
                <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                  <img src="../../../static/images/onlineHome/icon8.png" style="width: 25px" alt />
                </div>
              </div>
              <p style="margin-top: 5px;color: #666666;">验收申请</p>
            </van-grid-item>
          </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村三资管理</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="支出明细" to="expenditureDetail">
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon9.png" style="height: 25px;vertical-align: center;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">支出明细</p>
          </van-grid-item>
          <van-grid-item text="收入明细" to="incomeDetail">
            <div slot="default">
              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">收入明细</p>
          </van-grid-item>
          <van-grid-item text="收支明细" to="inAndOutDetail">
            <div slot="default">
              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">收支明细</p>
          </van-grid-item>
          <van-grid-item text="现金银行" >
            <div slot="default">
              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon10.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">现金银行</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="挂牌项目" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">挂牌项目</p>
          </van-grid-item>
          <van-grid-item text="成交公示" >
            <div slot="default">
              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">成交公示</p>
          </van-grid-item>
          <van-grid-item text="合同管理" >
            <div slot="default">
              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">合同管理</p>
          </van-grid-item>
          <van-grid-item text="招标管理" >
            <div slot="default">
              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">招标管理</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="宅基地申请" >
            <div slot="default" style="background:#539FFD;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
          </van-grid-item>
          <van-grid-item text="证书打印" >
            <div slot="default">
              <div style="background:#7790FE;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">证书打印</p>
          </van-grid-item>
          <van-grid-item text="公示查询" >
            <div slot="default">
              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">公示查询</p>
          </van-grid-item>
          <van-grid-item text="巡查执法" >
            <div slot="default">
              <div style="background:#1D6FE9;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon16.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">巡查执法</p>
          </van-grid-item>
          <van-grid-item text="村庄规划" >
            <div slot="default">
              <div style="background:#FFCE05;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon17.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">村庄规划</p>
          </van-grid-item>
          <van-grid-item text="基础档案" >
            <div slot="default">
              <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon18.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">基础档案</p>
          </van-grid-item>
          <van-grid-item text="盘活利用" >
            <div slot="default">
              <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon19.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">盘活利用</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权制度改革管理</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="财务管理" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">财务管理</p>
          </van-grid-item>
          <van-grid-item text="资产管理" >
            <div slot="default">
              <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">资产管理</p>
          </van-grid-item>
          <van-grid-item text="合同管理" >
            <div slot="default">
              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">合同管理</p>
          </van-grid-item>
          <van-grid-item text="股权管理" >
            <div slot="default">
              <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">股权管理</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">银农支付</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="付款审批" :to="{name:'approvalList'}" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">付款审批</p>
          </van-grid-item>
          <van-grid-item text="收款账户" :to="{name:'collectionList'}" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">收款账户</p>
          </van-grid-item>
          <van-grid-item text="付款账户" :to="{name:'paymentAccountList'}" >
            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">付款账户</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <van-row  style="margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村宅基地审批管理</p>
          </template>
        </van-cell>
        <van-grid :border="false">
          <van-grid-item text="建房申请" :to="{name:'applicationList'}" >
            <div slot="default" style="background:#539ffd;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
              <img src="../../../static/images/onlineHome/icon_zjd1.png" style="width: 25px;" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">建房申请</p>
          </van-grid-item>
          <van-grid-item text="使用权流转" :to="{name:'circulationList'}" >
            <div slot="default">
              <div style="background:#ffa63e;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
                <img src="../../../static/images/onlineHome/icon_zjd5.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">使用权流转</p>
          </van-grid-item>
          <van-grid-item text="有偿退出" :to="{name:'paidExit'}" >
            <div slot="default">
              <div style="background:#539ffd;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd7.png" style="width: 25px;" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">有偿退出</p>
          </van-grid-item>
          <van-grid-item text="使用权抵押" :to="{name:'mortgage'}" >
            <div slot="default">
              <div style="background:#3ac2db;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd6.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">使用权抵押</p>
          </van-grid-item>
          <van-grid-item text="农房利用" :to="{name:'utilization'}" >
            <div slot="default">
              <div style="background:#7dda4f;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd4.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">农房利用</p>
          </van-grid-item>
          <van-grid-item text="宅基地利用" :to="{name:'homesteadUtilize'}" >
            <div slot="default">
              <div style="background:#7dda4f;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd4.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">宅基地利用</p>
          </van-grid-item>
          <van-grid-item text="证书查看" :to="{name:'certificateList'}" >
            <div slot="default">
              <div style="background:#7790fe;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd2.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">证书查看</p>
          </van-grid-item>
          <van-grid-item text="公示信息" :to="{name:'informationList'}" >
            <div slot="default">
              <div style="background:#c568f5;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd3.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">公示信息</p>
          </van-grid-item>
          <van-grid-item text="任务上报" :to="{name:'taskReportingList'}" >
            <div slot="default">
              <div style="background:#c568f5;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd3.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">任务上报</p>
          </van-grid-item>
          <van-grid-item text="任务发布" :to="{name:'task'}" >
            <div slot="default">
              <div style="background:#c568f5;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd3.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">任务发布</p>
          </van-grid-item>
          <van-grid-item text="违法监管" :to="{name:'supervisionList'}" >
            <div slot="default">
              <div style="background:#c568f5;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
                <img src="../../../static/images/onlineHome/icon_zjd3.png" style="width: 25px" alt />
              </div>
            </div>
            <p style="margin-top: 5px;color: #666666;">违法监管</p>
          </van-grid-item>
        </van-grid>
      </van-row>
      <onlineHomeIndex></onlineHomeIndex>
    </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";
  import {getInfo} from "../../api/login";
  import {ListTodo} from "../../api/onlineHome/done";
    export default {
      components: {
        onlineHomeIndex
      },
        name: "workbench",
      data() {
        return {
          list1: [],
          images:['../../../static/images/onlineHome/tab.jpg'],
          deptName:"",
          queryParams: {
            pageNum: 1,
            pageSize: 100,
          },
          taskList:[],
        };
      },
      created() {
        getInfo().then(response => {
          console.log(response)
          this.deptName = response.user.deptName
        });
        ListTodo(this.queryParams).then((response) => {
          this.taskList = response.rows
        })
      },

    }
</script>

<style scoped>
    >>>.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 144px;
    text-align: center;
  }
  >>>.van-grid-item__content{
    padding:0.213333rem;
  }
  >>>.van-cell::after{
    border: none;
  }
  >>>.app-container{
    padding:0;
  }
</style>