clsd/admin-ui/src/views/index.vue

<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      <span style="font-size: 19px">欢迎使用，{{ user.nickName }}</span>
      <iframe
        allowtransparency="true"
        frameborder="0"
        width="180"
        height="36"
        scrolling="no"
        style="padding-top: 10px"
        src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"
      ></iframe>
      <dselect v-model="deptId" style="width: 200px; float: right; margin-top: 10px"></dselect>
      <span style="float: right; padding-top: 16px; color: #838383">当前部门：</span>
    </div>
    <panel-group :cdata="data.count" />
    <!--散货过车和重量监控-->
    <div class="chart-wrapper">
      <div class="pop" style="width: 40%">
        <div class="out" style="margin: 0px; margin-top: 5px">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">
                  <span>散货过车和重量监控</span>
                  <span class="jz">截至{{ time }}</span>
                </div>
              </div>
              <div class="rows">
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(120, 215, 121, 1) 26%, rgba(95, 196, 91, 1) 100%)">
                      <div class="tti">本日</div>
                      <div class="num">
                        <span>{{ data.pass.sDayCar || 0 }}</span>
                        <span class="unit">辆</span>
                      </div>
                      <div class="num">
                        <span>{{ data.pass.sDayWeight ? (data.pass.sDayWeight / 1000).toFixed(0) : 0 }}</span>
                        <span class="unit">吨</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(181, 188, 253, 1) 26%, rgba(120, 141, 248, 1) 100%)">
                      <div class="tti">本周</div>
                      <div class="num">
                        <span>{{ data.pass.sWeekCar }}</span>
                        <span class="unit">辆</span>
                      </div>
                      <div class="num">
                        <span>{{ data.pass.sWeekWeight ? (data.pass.sWeekWeight / 1000).toFixed(0) : 0 }}</span>
                        <span class="unit">吨</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(255, 206, 153, 1) 26%, rgba(250, 168, 113, 1) 100%)">
                      <div class="tti">本月</div>
                      <div class="num">
                        <span>{{ data.pass.sMonthCar }}</span>
                        <span class="unit">辆</span>
                      </div>
                      <div class="num">
                        <span>{{ data.pass.sMonthWeight ? (data.pass.sMonthWeight / 1000).toFixed(0) : 0 }}</span>
                        <span class="unit">吨</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--集装箱过车和重量监控-->
      <div class="pop" style="width: 60%">
        <div class="out" style="margin: 0px; margin-top: 5px">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">
                  <span>集装箱过车和重量监控</span>
                  <span class="jz">截至{{ time }}</span>
                </div>
              </div>
              <div class="rows">
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(254, 152, 244, 1) 26%, rgba(255, 114, 233, 1) 100%)">
                      <div class="tti">本日</div>
                      <div class="rows">
                        <div class="row" style="text-align: center; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jDayCarI || 0 }}</span>
                            <span class="unit">辆(进)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jDayBoxNumI || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                        <div class="row" style="text-align: left; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jDayCarE || 0 }}</span>
                            <span class="unit">辆(出)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jDayBoxNumE || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(94, 173, 252, 1) 26%, rgba(68, 133, 254, 1) 100%)">
                      <div class="tti">本周</div>
                      <div class="rows">
                        <div class="row" style="text-align: center; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jWeekCarI || 0 }}</span>
                            <span class="unit">辆(进)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jWeekBoxNumI || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                        <div class="row" style="text-align: left; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jWeekCarE || 0 }}</span>
                            <span class="unit">辆(出)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jWeekBoxNumE || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(129, 159, 253, 1) 26%, rgba(52, 97, 243, 1) 100%)">
                      <div class="tti">本月</div>
                      <div class="rows">
                        <div class="row" style="text-align: center; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jMonthCarI || 0 }}</span>
                            <span class="unit">辆(进)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jMonthBoxNumI || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                        <div class="row" style="text-align: left; width: 50%">
                          <div class="num">
                            <span>{{ data.pass.jMonthCarE || 0 }}</span>
                            <span class="unit">辆(出)</span>
                          </div>
                          <div class="num">
                            <span>{{ data.pass.jMonthBoxNumE || 0 }}</span>
                            <span class="unit">标箱</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--场内作业车辆实时统计 -->
    <div class="chart-wrapper">
      <div class="pop" style="width: 100%">
        <div class="out" style="margin: 0px; margin-top: 5px">
          <div class="int">
            <div class="bos" style="border: 0px">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">
                  <span>散货一次性通行概率</span>
                  <span class="jz">截至{{ time }}</span>
                </div>
                <div class="years">
                  <div class="year active">本周</div>
                  <div class="year">更多</div>
                </div>
              </div>
              <div class="rows">
                <div class="row" style="width: 20%">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, rgba(254, 152, 244, 1) 26%, rgba(255, 114, 233, 1) 100%)">
                      <div class="tti" style="font-size: 20px; padding-top: 20px">场内散货作业车辆</div>
                      <div class="num" style="padding-top: 20px; padding-bottom: 20px">
                        <span>{{ data.count.scars || 0 }}</span>
                        <span class="unit">辆</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style="width: 20%">
                  <el-progress type="circle" :percentage="data.pass.sSuccess ? ((data.pass.sSuccess / data.pass.sDayCar) * 100).toFixed(0) : 0" :stroke-width="15"></el-progress>
                  <div class="day">本日通行概率</div>
                </div>
                <div class="row" style="width: 60%">
                  <BarChart :chartData="chartData1" type="line" height="160px"></BarChart>
                </div>
              </div>
              <div class="lab" style="margin-top: 20px">
                <div class="bsg"></div>
                <div class="tit">
                  <span>集装箱一次性通行概率</span>
                  <span class="jz">截至{{ time }}</span>
                </div>
              </div>
              <div class="rows">
                <div class="row" style="width: 20%">
                  <div class="ou">
                    <div class="in" style="background: linear-gradient(90deg, #46a6ff 26%, #81c2ff 100%)">
                      <div class="tti" style="font-size: 20px; padding-top: 20px">场内集装箱作业车辆</div>
                      <div class="num" style="padding-top: 15px; padding-bottom: 20px">
                        <span>{{ data.count.jcars }}</span>
                        <span class="unit">辆</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row" style="width: 20%">
                  <el-progress type="circle" :percentage="data.pass.jSuccess ? ((data.pass.jSuccess / data.pass.jDayCarI) * 100).toFixed(0) : 0" :stroke-width="15"></el-progress>
                  <div class="day">本日通行概率</div>
                </div>
                <div class="row" style="width: 60%">
                  <BarChart :chartData="chartData2" type="line" height="160px"></BarChart>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import BarChart from './dashboard/BarChart';
import Vue from 'vue';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    BarChart
  },
  data() {
    return {
      user: this.$store.state.user,
      data: { count: {}, pass: {} },
      deptId: this.$store.state.user.deptId,
      time: this.util.getDate('times'),
      chartData1: [], //散货
      chartData2: [] //集装箱
    };
  },
  watch: {
    deptId(val) {
      this.getData();
      this.getWeek();
    }
  },
  created() {
    //this.getData();
    //this.getWeek();
  },
  methods: {
    getData() {
      this.ajax({ url: '/home/index', data: { deptId: this.deptId } }).then((response) => {
        this.data = response.data;
      });
    },
    getWeek() {
      this.chartData1 = [];
      this.chartData2 = [];
      this.ajax({ url: '/home/weekSelect', data: { deptId: this.deptId } }).then((response) => {
        response.data.s.forEach((item) => {
          this.chartData1.push({ name: item.date, value: ((item.success / item.total) * 100).toFixed(0) });
        });
        response.data.j.forEach((item) => {
          this.chartData2.push({ name: item.date, value: ((item.success / item.total) * 100).toFixed(0) });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px 20px 0px 20px;
  .mtitle {
    margin-bottom: 20px;
    margin-top: -15px;
  }
  .chart-wrapper {
    margin-top: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    background: #fff;
    border-radius: 5px;
    .pop {
      float: left;
      width: 33.33%;
      overflow: hidden;
      .out {
        margin: 10px;
        .int {
          padding: 15px 15px 10px 15px;
          overflow: hidden;
        }
      }
    }
  }
  .bos {
    float: left;
    padding: 0px 10px 0px 10px;
    width: 100%;
    .years {
      float: right;
      margin-top: -30px;
      overflow: hidden;
      .year {
        float: left;
        padding: 5px 10px;
        background-color: #f6f6f6;
        cursor: pointer;
        font-size: 14px;
        color: #545555;
        &.active {
          background-color: rgb(64, 158, 255);
          color: white;
        }
      }
    }
    .rows {
      overflow: hidden;
      .row {
        float: left;
        width: 33.3333%;
        text-align: center;
        .ou {
          padding: 0px 10px 0px 10px;
          .in {
            padding: 10px;
            text-align: center;
            color: white;
            border-radius: 10px;
            .tti {
              font-size: 30px;
              font-weight: bold;
            }
            .num {
              padding-top: 5px;
              font-size: 22px;
              .unit {
                font-size: 15px;
                padding-left: 5px;
              }
            }
          }
        }
        .day {
          font-size: 18px;
          padding-top: 7px;
          color: #838383;
        }
      }
    }
  }
}
</style>