|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <div class="module-main">
|
|
|
+ <div class="module-box">
|
|
|
+ <div class="module-public module-top-box">
|
|
|
+ <div class="header">
|
|
|
+ 员工状态总览
|
|
|
+ </div>
|
|
|
+ <div class="center-box">
|
|
|
+ <div class="center-left-box">
|
|
|
+ <div class="nums">{{count1}}</div>
|
|
|
+ <div class="title">任务中的员工</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-box">
|
|
|
+ <dv-scroll-board :config="config" class="bottom-left-box" />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue';
|
|
|
+import Component from 'vue-class-component';
|
|
|
+import api from '../../api';
|
|
|
+
|
|
|
+@Component({
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+})
|
|
|
+export default class Echarts extends Vue {
|
|
|
+ config = {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ config2 = {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ config3 = {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ count1 = 0;
|
|
|
+
|
|
|
+ count2 = 0;
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getWxUserStatus();
|
|
|
+ setInterval(() => {
|
|
|
+ this.getWxUserStatus();
|
|
|
+ }, 5000 * 60);
|
|
|
+ }
|
|
|
+
|
|
|
+ getWxUserStatus() {
|
|
|
+ api.getWxUserStatus().then((res) => {
|
|
|
+ this.count1 = res.data.list2.count;
|
|
|
+ this.count2 = res.data.list.count;
|
|
|
+ this.config = {
|
|
|
+ header: ['姓名', '维修次数', '最新位置'],
|
|
|
+ headerBGC: '#163f85',
|
|
|
+ headerHeight: 45,
|
|
|
+ data: res.data.list2.list,
|
|
|
+ align: 'center',
|
|
|
+ oddRowBGC: '#163f85',
|
|
|
+ evenRowBGC: '#13397d',
|
|
|
+ rowNum: 4,
|
|
|
+ };
|
|
|
+ this.config2 = {
|
|
|
+ header: ['姓名', '维修次数', '最新位置'],
|
|
|
+ headerBGC: '#163f85',
|
|
|
+ headerHeight: 45,
|
|
|
+ data: res.data.list.list,
|
|
|
+ align: 'center',
|
|
|
+ oddRowBGC: '#163f85',
|
|
|
+ evenRowBGC: '#13397d',
|
|
|
+ rowNum: 4,
|
|
|
+ };
|
|
|
+ }).catch(() => {}).finally(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .module-box .header{
|
|
|
+ width: 97%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #0BE2DF;
|
|
|
+ padding-left: 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module-top-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-left-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-left-box .nums{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #11E799;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-left-box .title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #11E799;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-right-box{
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-right-box .nums{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFE400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .module-top-box .center-box .center-right-box .title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFE400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .module-top-box .bottom-box{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 120px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .module-top-box .bottom-box .bottom-left-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // display: inline-block;
|
|
|
+ // float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .module-top-box .bottom-box .bottom-right-box{
|
|
|
+ width: 49%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|