supervise-monitor-ui/src/views/index.vue

<template>
  <div class="webindex">
    <div class="tops">
      <!-- 第1个 -->
      <div class="topbox">
        <div class="toptitle">入侵报警</div>
        <div class="mids">
          <div class="lefts">
            <div class="icon myiconfont iconbox iconbox_yellow">&#xe608;</div>
          </div>
          <div class="rights">
            <div class="note">正常：<span class="bluezi">26</span></div>
            <div class="note">离线：<span class="huizi">12</span></div>
            <div class="note">报警：<span class="redzi">11</span></div>
          </div>
        </div>
      </div>
      <!-- 第2个 -->
      <div class="topbox">
        <div class="toptitle">视频监控</div>
        <div class="mids">
          <div class="lefts">
            <div class="icon myiconfont iconbox iconbox_blue">&#xe64a;</div>
          </div>
          <div class="rights">
            <div class="note">正常：<span class="bluezi">36</span></div>
            <div class="note">离线：<span class="huizi">16</span></div>
            <div class="note"><span class="redzi"></span></div>
          </div>
        </div>
      </div>
      <!-- 第3个 -->
      <div class="topbox">
        <div class="toptitle">门禁管理</div>
        <div class="mids">
          <div class="lefts">
            <div class="icon myiconfont iconbox iconbox_zi">&#xe60b;</div>
          </div>
          <div class="rights">
            <div class="note">正常：<span class="bluezi">38</span></div>
            <div class="note">离线：<span class="huizi">15</span></div>
            <div class="note">报警：<span class="redzi">12</span></div>
          </div>
        </div>
      </div>
      <!-- 第4个 -->
      <div class="topbox">
        <div class="toptitle">电子围栏</div>
        <div class="mids">
          <div class="lefts">
            <div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</div>
          </div>
          <div class="rights">
            <div class="note">正常：<span class="bluezi">26</span></div>
            <div class="note">离线：<span class="huizi">12</span></div>
            <div class="note">报警：<span class="redzi">11</span></div>
          </div>
        </div>
      </div>
      <!-- 第5个 -->
      <div class="topbox">
        <div class="toptitle">电子巡更</div>
        <div class="mids">
          <div class="lefts">
            <div class="icon myiconfont iconbox iconbox_green">&#xe64c;</div>
          </div>
          <div class="rights">
            <div class="note">正常：<span class="bluezi">39</span></div>
            <div class="note">离线：<span class="huizi">15</span></div>
            <div class="note">报警：<span class="redzi">12</span></div>
          </div>
        </div>
      </div>
      <!-- 11 -->
    </div>
    <!-- 饼图 -->
    <div class="tbars">
      <!-- 第1个图表 -->
      <div class="tbar">
        <div class="title"><span class="iconfont icon-jiating greenzi"></span>入侵报警</div>
        <div class="bar">
          <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
        </div>
      </div>
      <!-- 第1个图表 -->
      <div class="tbar">
        <div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
        <div class="bar">
          <pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
        </div>
      </div>
      <!-- 第1个图表 -->
      <div class="tbar">
        <div class="title"><span class="iconfont icon-jiating greenzi"></span>门禁管理</div>
        <div class="bar">
          <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
        </div>
      </div>
      <!-- 第1个图表 -->
      <div class="tbar">
        <div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div>
        <div class="bar">
          <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
        </div>
      </div>
      <!-- 第1个图表 -->
      <div class="tbar">
        <div class="title"><span class="iconfont icon-jiating greenzi"></span>电子巡更</div>
        <div class="bar">
          <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
        </div>
      </div>
    </div>
    <!-- 第3行 -->
    <div class="con">
      <!-- 第1 -->
      <div class="news">
        <div class="title">
          <div class="newstits">提醒任务</div>
          <div class="more" @click="toMore()">更多></div>
        </div>
        <div class="content">
          <div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
            <div class="dot">&bull;</div>
            <div class="tit">{{item.title}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
        </div>
      </div>
      <!-- 第1 -->
      <div class="news">
        <div class="title">
          <div class="newstits">待办</div>
          <div class="more" @click="toMore()">更多></div>
        </div>
        <div class="content">
          <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
            <div class="dot">&bull;</div>
            <div class="tit">{{item.title}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
        </div>
      </div>
      <!-- 第1 -->
      <div class="news">
        <div class="title">
          <div class="newstits">工作流</div>
          <div class="more" @click="toMore()">更多></div>
        </div>
        <div class="content">
          <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
            <div class="dot">&bull;</div>
            <div class="tit">{{item.title}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
        </div>
      </div>
      <!-- 第1 -->
      <div class="news">
        <div class="title">
          <div class="newstits">门禁消息</div>
          <div class="more" @click="toMore()">更多></div>
        </div>
        <div class="content">
          <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
            <div class="dot">&bull;</div>
            <div class="tit">{{item.title}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { login1 } from '@/api/system/user/login.js'
  import * as echarts from "echarts";
  import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
  // 1.1入侵报警饼图
  const ruqinbaojing_Chart = {
    // seriesName: '入侵报警',
    unit: '次',
    color: ['#fe7f02', '#049f51', '#fdc004'],
    Data: {
      seriesData: [
        { value: 39, name: '正常' },
        { value: 16, name: '离线' },
        { value: 12, name: '报警' }
      ]
    },
    label: {
      normal: {
        position: 'inner',
        show: false
      }
    },

    // radius: ['50%', '55%']
  }
  // 1.2视频监控饼图
  const shipinjiankong_Chart = {
    // seriesName: '视频监控',
    unit: '次',
    color: ['#fe7f02', '#049f51', '#fdc004'],
    Data: {
      seriesData: [
        { value: 39, name: '正常' },
        { value: 16, name: '离线' },
        // { value: 12, name: '报警' }
      ]
    },
    label: {
      normal: {
        position: 'inner',
        show: false
      }
    },

    // radius: ['50%', '55%']
  }
  export default {
    name: 'index',
    components: {
      PieChartrenyuan
    },
    created() {
      var _self = this
      setInterval(function () {
        _self.getMessage();
      }, 20000)
    },
    data() {
      return {
        ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
        shipinjiankong_Chart: shipinjiankong_Chart,
        token: '',
        Datalista: [
          { title: '您有新任务了', createTime: '2023-05-23' },
          { title: '您有新任务了', createTime: '2023-05-23' },
          { title: '您有新任务了', createTime: '2023-05-23' },
          { title: '您有新任务了', createTime: '2023-05-23' },
          { title: '您有新任务了', createTime: '2023-05-23' },
        ],
        Datalist: [
          { title: '您有新消息了', createTime: '2023-05-23' },
          { title: '您有新消息了', createTime: '2023-05-23' },
          { title: '您有新消息了', createTime: '2023-05-23' },
          { title: '您有新消息了', createTime: '2023-05-23' },
          { title: '您有新消息了', createTime: '2023-05-23' },
        ],
      }
    },
    methods: {
      getMessage() {
        this.$notify({
          title: '报警消息',
          dangerouslyUseHTMLString: true,
          // // message: "<img src='" + warningIcon + "'>" + data.messageContent,
          message: "<img style='width:50px' src='/image/yujing.png'>" + "新的报警待处理",
          position: 'bottom-right',
          onClick: () => {
            alert("这是一条新订单")
            // this.playText('你有一条报警信息未读')
            // this.getServicePageLists()
          },
          duration: 3000,
        })
      },
      //  	getToken(){
      //  		let params = {
      //  			password: "329653",
      //					roleSid: "",
      //					token: "",
      //					userName: "15097329653",
      //					verifyCode: ""
      //  		}
      //  		login1(params).then(res => {
      //  			this.token = res.data.token
      //  			window.sessionStorage.setItem('token', res.data.token)
      //        })
      //  	}
    }
  }
</script>

<style lang="scss" scoped>
  .webindex {
    width: 100%;
    padding: 20px;
    height: 100%;
    background: radial-gradient(#fff, #f5f7f4, #fff);
  }

  .tops {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
  }

  .tops .topbox {
    width: 25%;
    margin: 0 20px 0 0;
    background-color: #fff;
    box-shadow: 0px 0px 10px #E9E9E9;
    border-radius: 5px;
    padding: 10px;
  }

  .tops .topbox:last-of-type {
    margin: 0;
  }

  .tops .topbox .toptitle {
    font-size: 20px;
    padding: 10px 20px;
    font-weight: bold;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #ececee;
  }

  .tops .topbox .mids {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 20px;
  }

  .tops .topbox .mids .lefts {
    width: 100px;
  }

  .tops .topbox .mids .lefts .iconbox {
    border-radius: 10px;
    line-height: 80px;
    width: 80px;
    height: 80px;
    color: #fff;
    font-size: 36px;
    text-align: center;
  }

  .iconbox_red {
    background-color: #df2f07;
  }

  .iconbox_yellow {
    background-color: #ff7521;
  }


  .iconbox_green {
    background-color: #07C160;
  }

  .iconbox_blue {
    background-color: #3f9bfa;
  }

  .iconbox_zi {
    background-color: #6421ff;
  }

  .iconbox_fen {
    background-color: #9b2efb;
  }

  .tops .topbox .mids .rights {
    flex: 1;
    padding: 2px 0 2px 10px;
  }

  .tops .topbox .mids .rights .note {
    color: #333;
    font-size: 14px;
    padding: 0 0 3px 0;
  }

  .tops .topbox .mids .rights .note span {
    font-size: 20px;
    padding: 0 5px;
  }

  /* 饼图部分 */
  .tbars {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 20px 0 0 0;
  }

  .tbar {
    width: 25%;
    margin: 0 20px 0 0;
    background-color: #fff;
    box-shadow: 0px 0px 10px #E9E9E9;
    border-radius: 5px;
    padding: 10px;
  }

  .tbar:last-of-type {
    margin: 0;
  }

  .tbar0 {
    border-bottom: 0px solid #032ab8;
  }

  .tbar .title {
    font-size: 20px;
    padding: 10px 20px;
    font-weight: bold;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #ececee;
  }

  .tbar .title span {
    padding: 0 10px 0 0;
  }

  .tbar .bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0px;
    height: 190px;

  }

  .con {
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  .news {
    width: 25%;
    margin: 0 20px 0 0;
    background-color: #fff;
    box-shadow: 0px 0px 10px #E9E9E9;
    border-radius: 5px;
    padding: 10px;
  }

  .news:last-of-type {
    margin: 0;
  }

  .news .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #ececee;
  }

  .news .title .newstits {
    font-weight: bold;
    color: #333;
    font-size: 16px;
  }

  .news .title .more {
    text-align: right;
    cursor: pointer;
    color: #6c6a6a;
    font-size: 14px;
  }

  .news .content {
    padding: 10px 0;
    height: 210px;
    overflow: hidden;
  }

  .news .content .newsli {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0px 0px;
    padding: 5px 10px;
    border-bottom: 1px solid #ececee;
  }

  .news .content .newsli .dot {
    padding: 0px 8px 0 0;
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    color: #047cf7;
  }

  .news .content .newsli .tit {
    padding: 0px 0;
    font-size: 14px;
    flex: 3;
    height: 25px;
    overflow: hidden;
    line-height: 25px;
    cursor: pointer;
  }

  // .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;}
  .news .content .newsli .time {
    padding: 0px 0;
    color: #666666;
    text-align: right;
    font-size: 14px;
    width: 100px;
    height: 25px;
    line-height: 25px;
  }
</style>