最新版本541200007

doum

13 小时以前 9a87baccb1cf2d707a775e414ddac07fd94cf8fc

 admin/src/views/index.vue

@@ -1,327 +1,277 @@
<template>
  <div class="home">
    <div class="home_total">
      <div class="home_total_head">在厂人员总览</div>
      <div class="home_total_list">
        <div class="home_total_list_item a">
          <span>352</span>
          <span>内部员工</span>
        </div>
        <div class="home_total_list_item b">
          <span>352</span>
          <span>访客</span>
        </div>
        <div class="home_total_list_item c">
          <span>352</span>
          <span>劳务人员</span>
        </div>
        <div class="home_total_list_item d">
          <span>352</span>
          <span>在场车辆</span>
        </div>
        <div class="home_total_list_item e">
          <span>352</span>
          <span>访客车辆</span>
        </div>
        <div class="home_total_list_item f">
          <span>352</span>
          <span>劳务车辆</span>
        </div>
        <div class="home_total_list_item g">
          <span>352</span>
          <span>供应商</span>
        </div>
      </div>
    </div>
    <div class="home_charts">
      <div class="home_charts_item">
        <div class="home_charts_item_label">在厂人员占比</div>
        <div class="home_charts_item_charts" id="chart1"></div>
      </div>
      <div class="home_charts_item">
        <div class="home_charts_item_label">劳务人员分布总览</div>
        <div class="home_charts_item_charts" id="chart2"></div>
      </div>
    </div>
    <div class="home_table">
      <div class="home_table_head">超时预警人员(3)</div>
      <div class="home_table_box">
        <el-table
          :data="list"
          :header-cell-style="{background: '#dcdde2', color: 'rgb(51, 51, 51)'}"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="访客姓名">
          </el-table-column>
          <el-table-column
            prop="name"
            label="访客电话">
          </el-table-column>
          <el-table-column
            prop="address"
            label="访客公司">
          </el-table-column>
          <el-table-column
            prop="address"
            label="公司类型">
          </el-table-column>
          <el-table-column
            prop="address"
            label="授权到期时间">
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="address"
            label="处理"
            width="80">
            <template slot-scope="scope">
              <el-button type="text">离场</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
  <div class="main_home">
    <div class="home_header">
      <div class="mb10 fs17">下午好，{{ userInfo.realname }}</div>
      <div class="fs13">
        今天是 {{ nowDate }} {{ nowWeek }}，欢迎访公务车钥匙智能柜管理系统
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { weeks } from '@/utils/config'
const colors = ['#52a4f7', '#7678f7', '#5fc6d5']
export default {
  name: 'Index',
  components: {
  },
  data () {
    return {
      list: [],
      page: 1
      searchForm: {
        timeType: null,
        timeName: '全部'
      },
      colors,
      nowDate: '',
      nowWeek: '',
      headerData: {},
      headerData1: {},
      staticData0: {},
      staticData01: {},
      staticData1: {},
      staticData2: {},
      staticData3: {},
      staticData4: {},
      manningRatio: []
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  created () {
  },
  mounted () {
    this.getcharts1()
    this.getcharts2()
    this.updateDate()
    // this.initData()
  },
  methods: {
    handleSizeChange () {

    },
    handleCurrentChange () {

    },
    getcharts1 () {
      const myChart = echarts.init(document.getElementById('chart1'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        grid: {
          bottom: '5%',
          top: '5%'
        },
        legend: {
          bottom: '0%',
          left: 'center',
          icon: 'circle'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              formatter: '{b} {d}%'
            },
            data: [
              { value: 1048, name: '劳务人员' },
              { value: 735, name: '内部员工' },
              { value: 580, name: '访客' }
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#fc8251',
                    '#5470c6',
                    '#91cd77'
                  ]
                  return colorList[colors.dataIndex]
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    getcharts2 () {
      const myChart = echarts.init(document.getElementById('chart2'))
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        grid: {
          bottom: '5%',
          top: '5%'
        },
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['海康威视', '农业有限公司', '字幕也有限公司', '万达股份有限公司', '阿里巴巴集团有限公司', '腾讯集团有限公司']
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: [1, 2, 3, 4, 5, 6],
            itemStyle: {
              normal: {
                color: '#fc8251'
              }
            }
          }
        ]
      })
    updateDate () {
      this.nowDate = dayjs().format('YYYY年M月D日')
      this.nowWeek = weeks[new Date().getDay()]
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/variables.scss";
.home {
  width: 100%;
  .home_table {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    margin-top: 20px;
    .home_table_head {
      font-size: 16px;
      font-weight: 600;
      color: black;
    }
    .home_table_box {
      width: 100%;
      margin-top: 15px;
    }
  }
  .home_charts {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home_charts_item {
      padding: 20px;
      box-sizing: border-box;
      flex: 1;
<style lang="scss" scoped>

::v-deep .el-input--small .el-input__inner {
  height: 30px !important; // 这里就是修改默认高度
  width: 120px;
}
div {
  box-sizing: border-box;
}

.home_title {
  font-weight: 600;
  font-size: 16px;
  color: #222222;
  line-height: 22px;
}
.mb50{
  margin-bottom: 50px;
}
.main {
  display: flex;
  position: relative;
  z-index: 99;

  .app_content {
    flex: 1;

    .static_card {
      height: 187px;
      color: #fff;
      display: flex;
      flex-direction: column;
      margin-right: 20px;
      background: #ffffff;
      .home_charts_item_label {
        font-size: 16px;
        font-weight: 600;
        color: black;
      }
      .home_charts_item_charts {
        width: 100%;
        height: 300px;
      }
      &:last-child {
        margin: 0 !important;
      }
    }
  }
  .home_total {
    width: 100%;
    background: #ffffff;
    margin-top: 20px;
    .home_total_head {
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      color: black;
      padding: 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #ececec;
    }
    .home_total_list {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .a {
        border-left: 5px solid rgba(129, 211, 248, 1) !important;
      }
      .b {
        border-left: 5px solid rgba(236, 128, 141, 1) !important;
      }
      .c {
        border-left: 5px solid rgba(250, 205, 145, 1) !important;
      }
      .d {
        border-left: 5px solid rgba(245, 154, 35, 1) !important;
      }
      .e {
        border-left: 5px solid rgba(128, 128, 255, 1) !important;
      }
      .f {
        border-left: 5px solid rgba(202, 249, 130, 1) !important;
      }
      .g {
        border-left: 5px solid rgba(194, 128, 255, 1) !important;
      }
      .home_total_list_item {
      justify-content: space-between;

      .card {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 80px;
        border-radius: 5px;
        border: 1px solid #ececec;
        margin-right: 15px;
        &:last-child {
          margin: 0 !important;
        height: 187px;
        background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
        box-shadow: 0px 2px 10px 0px rgba(32, 127, 247, 0.4);
        border-radius: 8px;
        margin-right: 14px;

        &:nth-of-type(2) {
          background: linear-gradient(270deg, #8383ff 0%, #6b6eff 100%);
        }
        span {
          &:first-child {
            font-weight: 500;
            font-size: 24px;
            color: black;

        &:nth-of-type(3) {
          background: linear-gradient(270deg, #42d49d 0%, #12bb8b 100%);
        }

        &:nth-of-type(4) {
          margin-right: 0;
          background: linear-gradient(270deg, #c430dee3 0%, #cd04b9cf 100%);
          //linear-gradient(270deg, #de3049b8 0%, #cd0421d4 100%);
          //background: linear-gradient(270deg, #30d3de 0%, #04b7cd 100%);
        }

        .header {
          height: 103px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 20px 12px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);

          img {
            width: 40px;
            height: 40px;
          }
          &:last-child {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-top: 2px;

          .num {
            font-weight: 600;
            font-size: 30px;
            margin-top: 12px;
          }
        }

        .content {
          height: 82px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 13px;
          padding: 15px 20px 20px;
        }
      }
    }

    .funcs {
      height: 149px;
      padding: 20px;
      background: #fff;
      margin: 10px 0;

      .list {
        display: flex;
        padding-top: 20px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 24px;
          cursor: pointer;

          img {
            width: 44px;
            height: 44px;
          }
        }
      }
    }
  }
  .static_wrap {
    .wrap {
      background: #fff;
      padding: 20px 20px 10px;
      border-radius: 2px;
      border: 1px solid #eeeeee;
      height: 280px;
      flex: 1;
      margin-top: 10px;
      margin-bottom: 20px;
      &:nth-of-type(2n) {
        //margin-left: 10px;
      }
      .echart {
        width: 100%;
        height: 190px;
        position: relative;
        display: flex;
        div{
          flex: 1;
          height: 190px;
        }
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .more {
          font-size: 13px;
          color: #999999;
        }
      }
    }

    .static1 {
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .echart_wrap {
          position: relative;

          .pie_text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
          }
        }

        .echart {
          width: 150px;
          height: 150px;
        }

        .list {
          margin-left: 36px;

          .item {
            display: flex;
            align-items: center;
            margin: 8px 0;

            .icon {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              margin-right: 6px;
              background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
            }

            .text {
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}

.main_home {
  background: #f4f7fc;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 92px 20px 20px;
  .home_header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(180deg, #076ae5 0%, rgba(32, 127, 247, 0) 100%);
  }
}
</style>