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

<template>
  <div class="webindex">
    <div class="zongcons">
        <div class="maps">
          <div class="wenboxs">
            <div class="wenbox">
              <div class="tubiao"><span class="myiconfont icon-shishijiance1 tolzi"></span></div>
              <div class="tos">
                <div class="tit nums">河北仓库<span class="num">39</span>家</div>
                <div class="tit nums">货物数<span class="num">4575</span>个</div>
              </div>
            </div>
            <div class="wenbox">
              <div class="tubiao"><span class="myiconfont icon-louyuzidonghua tolzi"></span></div>
              <div class="tos">
                <div class="tit nums">河北仓库<span class="num">39</span>家</div>
                <div class="tit nums">货物数<span class="num">4575</span>个</div>
              </div>
            </div>
            <div class="wenbox">
              <div class="tubiao"><span class="myiconfont icon-shebeitaizhang tolzi"></span></div>
              <div class="tos">
                <div class="tit nums">北京仓库<span class="num">39</span>家</div>
                <div class="tit nums">货物数<span class="num">4575</span>个</div>
              </div>
            </div>
            <div class="wenbox">
              <div class="tubiao"><span class="myiconfont icon-zhihuilouyu tolzi"></span></div>
              <div class="tos">
                <div class="tit nums">上海仓库<span class="num">39</span>家</div>
                <div class="tit nums">货物数<span class="num">4575</span>个</div>
              </div>
            </div>
            <div class="wenbox">
              <div class="tubiao"><span class="myiconfont icon-rizhi2 tolzi"></span></div>
              <div class="tos">
                <div class="tit nums">江苏仓库<span class="num">39</span>家</div>
                <div class="tit nums">货物数<span class="num">4575</span>个</div>
              </div>
            </div>



          </div>
          <home-map></home-map>
        </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 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 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>
          <!-- -->
        </div>
    </div>


    <div class="rightbars tops">
      <!-- 第1个 -->

      <div class="topboxs">
        <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 class="bar">
              <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
            </div>
          </div>
        </div>
      </div>
      <!-- 第2个 -->
      <div class="topboxs">
        <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 class="bar">
            <pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
          </div>
          </div>
        </div>
      </div>
      <!-- 第3个 -->
      <div class="topboxs">
        <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 class="bar">
              <pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
            </div>
          </div>
        </div>
      </div>
      <!-- 第4个 -->
      <div class="topboxs">
        <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 class="bar">
              <pie-chartrenyuan :chart-data="dianziweilan_Chart"></pie-chartrenyuan>
            </div>
          </div>
        </div>
      </div>

      <!-- 11 -->
    </div>

  </div>
</template>

<script>
  import { login1 } from '@/api/system/user/login.js'
  import * as echarts from "echarts";
  import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
  import HomeMap from '@/views/dashboard/components/HomeMap'
  // 1.1入侵报警饼图
  const ruqinbaojing_Chart = {
  // seriesName: '入侵报警',
  unit: '次',
  color: ['#34ffff', '#34abff', '#4c6eff'],
  Data: {
    seriesData: [
    { value: 56, name: '正常' },
      { value: 39, name: '离线' },
      { value: 28, 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: 19, name: '离线' },
      // { value: 12, name: '报警' }
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },

  // radius: ['50%', '55%']
}
  // 1.3门禁管理饼图
  const menjinguanli_Chart = {
  // seriesName: '门禁管理',
  unit: '次',
  color: [ '#FCCE10',
  '#E87C25',
  '#C1232B'],
  Data: {
    seriesData: [
    { value: 28, name: '正常' },
      { value: 22, name: '离线' },
      { value:18, name: '报警' }
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },

  // radius: ['50%', '55%']
}
  // 1.4电子围栏饼图
  const dianziweilan_Chart = {
  // seriesName: '电子围栏',
  unit: '次',
  color: ['#9BCA63',
  '#FAD860',
  '#F3A43B'],
  Data: {
    seriesData: [
    { value: 24, name: '正常' },
      { value: 8, name: '离线' },
      { value: 16, name: '报警' }
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },

  // radius: ['50%', '55%']
}
  // 1.电子巡更饼图
  const dianzixungeng_Chart = {
  // seriesName: '电子巡更',
  unit: '次',
  color: ['#60C0DD',
  '#D7504B',
  '#C6E579'],
  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,HomeMap,
    },
    created() {
      var _self = this
      setInterval(function () {
        _self.getMessage();
      }, 20000)
    },
    data() {
      return {
        ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
        shipinjiankong_Chart:shipinjiankong_Chart,
        menjinguanli_Chart: menjinguanli_Chart,
        dianziweilan_Chart: dianziweilan_Chart,
        dianzixungeng_Chart: dianzixungeng_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:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span>",

         message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
         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>
.zongcons{margin: 0;padding: 0;flex: 1;width: 100%;height: calc(100% - 160px);}
.rightbars{

}
.zongcons .maps{width: 100%;height: 620px;}
  .webindex {
    display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;align-items: flex-start;
    width: 100%; padding: 20px;
    height: 100%;overflow-y: auto;
    background: radial-gradient(#fff,#f5f7f4, #fff);
  }
  .tops {width: 470px;
  // display: flex;
  // flex-direction: row;
  // flex-wrap: nowrap;
  // justify-content: flex-start;align-items: flex-start;
  padding: 0 0 0 20px;
  margin: 0px;
}
.tops .topboxs {width: 100%;

  padding: 15px 0px 0 0 !important;

}
.topbox {
  // width: 25%;
  //margin: 20px 20 0 0 !important;
  background-color: #fff;
  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
  padding: 10px;
}
// .tops .topbox:last-of-type {
//   margin: 0;
// }
.topbox .toptitle {
  font-size: 20px;
  padding: 10px 20px;
  font-weight: bold;  color: #333;font-size: 16px;
  border-bottom: 1px solid #ececee;
}
.topbox .mids {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;align-items: center;
  margin: 0;
  padding: 20px ;
}
.topbox .mids .lefts{width: 100px;}
.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;
	}
.topbox .mids .rights {flex: 1;
  padding: 2px 0 2px 10px;
}
.topbox .mids .rights .note {
  color: #333;
  font-size: 14px;
  padding: 0 0 3px 0;
}
.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: calc(100% / 2);
  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:160px;
  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;
}

/////

.wenboxs {
    padding: 20px;
    margin: 0;
    position: absolute;
    z-index: 600;
    top: 30px;
    // background-color: rgba($color: #ffffff, $alpha: 0.7);
    // box-shadow: 0px 0px 6px #0d27c2;
    background-color: #fff;
  box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
  }

  .wenboxs .wenbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    font-size: 18px;
    color: #8d8e90;
    padding: 10px;
    border-bottom: 1px solid #E9E9E9;
  }

  .wenboxs .wenbox:last-of-type {
    border-bottom: 0px solid #E9E9E9;
  }

  .wenbox .tubiao {
    margin: 0 5px;
    font-size: 18px;
    // color: #b7d8fa;
    padding: 0 5px 0 0;
  }

  .wenbox .tubiao .tolzi {
    color: #3f9bfa;
    font-size: 40px;
  }

  .bluezi {
    // color: #042d6a;
    font-size: 18px !important;
  }

  .wenbox .tos {
    margin: 0;
    font-size: 14px;
    color: #474848;
    padding: 0;
    text-align: left;
  }

  .wenbox .tos .tit {
    margin: 0;
    font-size: 14px;
    // color: #6f7172;
    padding: 0 0 10px 0;
  }

  .wenbox .tos .nums {
    margin: 0;
    padding: 0;
  }

  .wenbox .tos .nums .num {
    font-size: 20px;
    padding: 0 5px;
    font-weight: bold;
    display: inline-block;
    color: #fc6f04;
  }

</style>