tnc-fe/src/views/dashboard/IndexChart2.vue

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '12px' }">
        <a-card :loading="loading" :bordered="false">
          <template v-slot:title><a-icon type="tags" theme="twoTone"/>系统公告</template>
          <a slot="extra" @click="showMoreMsg">更多>></a>

          <a-table :dataSource="announcementList" size="small" rowKey="id" :columns="columns" :pagination="false">

          </a-table>
        </a-card>
      </a-col>
<!--      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">-->

<!--        <a-card :loading="loading" :bordered="false">-->
<!--          <template v-slot:title><a-icon type="tags" theme="twoTone"/>部门公告</template>-->
<!--          <a slot="extra" @click="showMoreMsg">更多>></a>-->
<!--          <a-table :dataSource="announcementList" size="small" rowKey="id" :columns="columns" :pagination="false">-->

<!--          </a-table>-->
<!--        </a-card>-->
<!--      </a-col>-->

    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <template v-if="isManager">
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>最新动态</template>
            <a slot="extra" @click="showMoreTaskLeader">更多>></a>
            <template v-if="recentWorkList && recentWorkList.length === 0">
              <a-empty />
            </template>
            <template v-else>
              <a-timeline>
                <a-timeline-item v-for="recent in recentWorkList">{{recent.createTime}} {{recent.realname}}提交了【{{recent.customerName}}】的资料</a-timeline-item>
              </a-timeline>
            </template>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>我的任务</template>
            <a slot="extra" @click="showMoreTaskLeader">更多>></a>
            <template v-if="subTaskWorkList && subTaskWorkList.length === 0">
              <a-empty />
            </template>
            <template v-else>
              <a-table :dataSource="subTaskWorkList" size="small" rowKey="id" :columns="subTaskWorkColumns" :pagination="false">

                <template v-slot:taskCheck="text, record">
                  <a @click="taskCheckLeader(record)">稽核</a>
                </template>
              </a-table>
            </template>

          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>本月目标</template>
            <a slot="extra" @click="showMoreTaskLeader">更多>></a>
            <template v-if="targetWorkObj.allCount > 0">
              <a-descriptions size="small" bordered :column="1">
                <a-descriptions-item label="总数">{{ targetWorkObj.allCount }}</a-descriptions-item>
                <a-descriptions-item label="未完善">{{ targetWorkObj.undoCount }}</a-descriptions-item>
                <a-descriptions-item label="待稽核">{{ targetWorkObj.uncheckCount }}</a-descriptions-item>
                <a-descriptions-item label="待整改">{{ targetWorkObj.checkedCount }}</a-descriptions-item>
                <a-descriptions-item label="通过">{{ targetWorkObj.doneCount }}</a-descriptions-item>
              </a-descriptions>
            </template>
            <template v-else>
              <a-empty />
            </template>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
          <a-table size="small" :style="{ margin: '0px 12px 0px 12px' }"
                   :dataSource="mainTaskList"
                   rowKey="id"
                   :columns="taskColumns"
                   :customRow="customRow"
                   :rowSelection="{type:'checkbox',selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                   :pagination="false">
          </a-table>
        </a-col>
      </template>
      <template v-else>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>最新动态</template>
            <a slot="extra" @click="showMoreTaskManager">更多>></a>
            <template v-if="recentInfoList && recentInfoList.length === 0">
              <a-empty />
            </template>
            <template v-else>
              <a-timeline>
                <a-timeline-item v-for="(recent,index) in recentInfoList" :key="index">{{recent.createTime}} {{recent.realname}}稽核了【{{recent.customerName}}】的资料</a-timeline-item>
              </a-timeline>
            </template>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>我的任务</template>
            <a slot="extra" @click="showMoreTaskManager">更多>></a>
            <template v-if="subTaskInfoList && subTaskInfoList.length === 0">
              <a-empty />
            </template>
            <template v-else>
              <a-table :dataSource="subTaskInfoList" size="small" rowKey="id" :columns="subTaskInfoColumns" :pagination="false">
                <template v-slot:taskCheck="text, record">
                  <a @click="taskCheckManager(record)">完善</a>
                </template>

              </a-table>
            </template>

          </a-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
          <a-card :loading="loading" :bordered="true" :style="{ margin: '12px' }">
            <template v-slot:title><a-icon type="tags" theme="twoTone"/>本月目标</template>
            <a slot="extra" @click="showMoreTaskManager">更多>></a>
            <template v-if="targetInfoObj.allCount > 0">
              <a-descriptions size="small" bordered :column="1">
                <a-descriptions-item label="总数">{{targetInfoObj.allCount}}</a-descriptions-item>
                <a-descriptions-item label="未完善">{{targetInfoObj.undoCount}}</a-descriptions-item>
                <a-descriptions-item label="待稽核">{{targetInfoObj.uncheckCount}}</a-descriptions-item>
                <a-descriptions-item label="待整改">{{targetInfoObj.checkedCount}}</a-descriptions-item>
                <a-descriptions-item label="通过">{{targetInfoObj.doneCount}}</a-descriptions-item>
              </a-descriptions>
            </template>
            <template v-else>
              <a-empty />
            </template>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
          <a-table size="small" :style="{ margin: '0px 12px 0px 12px' }"
                   :dataSource="mainTaskList"
                   rowKey="id"
                   :columns="taskColumns"
                   :customRow="customRow"
                   :rowSelection="{type:'checkbox',selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                   :pagination="false">
          </a-table>
        </a-col>
      </template>

    </a-card>

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="environment" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="team" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px"  />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import { httpAction, getAction, postAction } from '@api/manage'

  const rankList = []
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: '白鹭岛 ' + (i+1) + ' 号店',
      total: 1234.56 - i * 100
    })
  }
  const barData = []
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  }
  export default {
    name: "IndexChart2",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        rankList,
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,
        url: {
          taskList: '/smsCheck/index/taskList',
          typeWork: '/smsCheck/index/typeWork',
          typeInfo: '/smsCheck/index/typeInfo',
        },
        announcementList: [],
        taskId: '',
        infoLogList: [],
        isManager: false,
        recentWorkList: [],
        subTaskWorkList: [],
        targetWorkObj: [],
        recentInfoList: [],
        subTaskInfoList: [],
        isFirst: true,
        targetInfoObj: [],
        mainTaskList: [],
        selectedRowKeys: [],
        columns:[
          {
          title: '标题',
          align:"left",
          dataIndex: 'titile'
        },{
          title: '消息类型',
          align:"center",
          dataIndex: 'msgCategory',
          customRender: function (text) {
            if (text == '1') {
              return "通知公告";
            } else if (text == "2") {
              return "系统消息";
            } else {
              return text;
            }
          }
        },{
          title: '发布人',
          align:"center",
          dataIndex: 'sender'
        },{
          title: '发布时间',
          align:"center",
          dataIndex: 'sendTime'
        },{
          title: '优先级',
          align:"center",
          dataIndex: 'priority',
          customRender:function (text) {
            if(text=='L'){
              return "低";
            }else if(text=="M"){
              return "中";
            }else if(text=="H"){
              return "高";
            } else {
              return text;
            }
          }
        }],
        subTaskWorkColumns:[
          {
          title: '客户名称',
          align:"left",
          dataIndex: 'customerName'
        },{
          title: '服务号码',
          align:"left",
          dataIndex: 'smsNumber'
        },{
            title: '操作',
            align:"left",
            dataIndex: 'op',
            scopedSlots: { customRender: 'taskCheck' }
          }
        ],
        subTaskInfoColumns:[
          {
            title: '客户名称',
            align:"left",
            dataIndex: 'customerName'
          },{
            title: '服务号码',
            align:"left",
            dataIndex: 'smsNumber'
          },{
            title: '操作',
            align:"left",
            dataIndex: 'op',
            scopedSlots: { customRender: 'taskCheck' }
          }
        ],
        taskColumns:[
          {
          title: '任务名称',
          align:"left",
          dataIndex: 'taskName'
        },{
          title: '任务状态',
          align:"left",
          dataIndex: 'taskStateText'
        },{
          title: '任务开始时间',
          align:"left",
          dataIndex: 'taskStartTime'
        },{
          title: '任务结束时间',
          align:"left",
          dataIndex: 'taskEndTime'
        },
        //   {
        //   title: '描述',
        //   align:"left",
        //   dataIndex: 'description'
        // }
        ],
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
      //this.getMesFirst();
    },
    methods: {
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
        this.getMsgList();
        this.getMainTaskList();
      },
      getMsgList() {
        let httpUrl = '/sys/sysAnnouncementSend/getMyAnnouncementSend?pageNo=1&pageSize=5';
        let params = {};
        let that = this;
        // 发送请求
        getAction(httpUrl, params)
          .then((res) => {
            if(res.success){
              that.announcementList = res.result.records;
            }else{
              that.announcementList = [];
            }
          }).finally(() => {

        })
      },
      getMainTaskList() {
        let httpUrl = this.url.taskList + '?&column=createTime&order=desc';
        let params = {};
        let that = this;
        // 发送请求
        getAction(httpUrl, params)
          .then((res) => {
            if(res.success){
              that.mainTaskList = res.result.records;
              that.isManager = res.result.isManager;
              if(that.mainTaskList && that.mainTaskList.length > 0) {
                that.taskId = that.mainTaskList[0].id;
                if (that.selectedRowKeys.length === 0) {
                  that.getWorkOrInfoList();
                } else {
                  that.getWorkOrInfoList(that.taskId);
                }
              }

            }else{
              that.mainTaskList = [];
            }
          }).finally(() => {

        })
      },
      getWorkList(taskIds) {
        let httpUrl = this.url.typeWork;
        httpUrl += '?pageNo=1&pageSize=5&column=createTime&order=desc';
        if (taskIds) {
          httpUrl += '&taskIds=' + taskIds
        }
        let params = {};
        let that = this;
        // 发送请求
        getAction(httpUrl, params)
          .then((res) => {
            if(res.success){
              that.recentWorkList = res.result.recentList;
              that.subTaskWorkList = res.result.subTaskList;
              that.targetWorkObj = res.result.targetObj;
            }else{
              that.infoLogList = [];
            }
          }).finally(() => {

        })
      },
      getInfoList(taskIds) {
        let httpUrl = this.url.typeInfo;
        httpUrl += '?pageNo=1&pageSize=5&column=createTime&order=desc';
        if (taskIds) {
          httpUrl += '&taskIds=' + taskIds
        }
        let params = {};
        let that = this;
        // 发送请求
        getAction(httpUrl, params)
          .then((res) => {
            if(res.success){
              that.recentInfoList = res.result.recentList;
              that.subTaskInfoList = res.result.subTaskList;
              that.targetInfoObj = res.result.targetObj;
            }else{
              that.recentInfoList = [];
              that.subTaskInfoList = [];
              that.targetInfoObj = {};
            }
          }).finally(() => {

        })
      },
      showMoreMsg() {
        this.$router.push({ path: '/isps/userAnnouncement' })
      },
      showMoreTaskLeader() {
        this.$router.push({ path: '/sms/check/task'})
      },
      taskCheckLeader(record) {
        this.$router.push({ path: '/sms/check/task/check/check', query: { id: record.id} })
      },
      showMoreTaskManager() {
        this.$router.push({ path: '/dataupload/data/main'})
      },
      taskCheckManager(record) {
        this.$router.push({ path: '/sms/check/data/edit', query: { id: record.id} })
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        this.taskId = selectedRowKeys;
        this.getWorkOrInfoList(this.taskId);
      },
      customRow(record, index) {
        let that = this;
        return {
          on: {
            // 鼠标单击行
            click: (event) => {
              // 查询是否已经选中 索引大于 -1
              let index = that.selectedRowKeys.findIndex((item,index)=>{
                return item === record.id
              });
              // 存在则移除，不存在则添加
              if (index > -1) {
                that.selectedRowKeys.splice(index, 1);
              } else {
                that.selectedRowKeys.push(record.id);
              }
              let taskIds = that.selectedRowKeys;
              that.getWorkOrInfoList(taskIds);
            },
          }
        }
      },
      // 根据用户的角色获取对应的数据
      getWorkOrInfoList(taskIds) {
        if (this.isManager) {
          this.getWorkList(taskIds);
        } else {
          this.getInfoList(taskIds);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>