修改首页

董国庆

6 天以前 3f0d4c3df5d21e48da5d4ec658d9bcf54ec10319

 src/view/home/index.vue

@@ -66,44 +66,44 @@
        </div>
      </div> -->

      <div class="firCard">
            <div class="companyCard">
              <div class="lineCard"></div>
              <div class="name">运营公司(家)</div>
              <div class="value">{{ carStatusData.enterprise || 0 }}</div>
        <div class="firCard">
          <div class="companyCard">
            <div class="lineCard"></div>
            <div class="name">运营公司(家)</div>
            <div class="value">{{ carStatusData.enterprise || 0 }}</div>
          </div>
          <div class="companyCard">
            <div class="statusLeft">
              <div class="name">运营车辆(辆)</div>
              <div class="value">{{ carStatusData.car || 0 }}</div>
            </div>
            <div class="companyCard">
              <div class="statusLeft">
                <div class="name">运营车辆(辆)</div>
                <div class="value">{{ carStatusData.car || 0 }}</div>
              </div>


              <div class="statusLeft">
                <div class="name">在线</div>
                <div class="num">{{ carStatusData.online || 0 }}</div>
              </div>
              <div class="statusLeft">
                <div class="name">离线</div>
                <div class="num">{{ carStatusData.offline || 0 }}</div>
              </div>

              <div class="statusLeft">
                <div class="name">故障</div>
                <div class="num">{{ carStatusData.breakdown || 0 }}</div>
              </div>

              <div class="statusLeft">
                <div class="name">异常</div>
                <div class="num">{{ carStatusData.abnormal || 0 }}</div>
              </div>
            <div class="statusLeft">
              <div class="name">在线</div>
              <div class="value">{{ carStatusData.online || 0 }}</div>
            </div>
            <!-- <div class="companyCard">
            <div class="statusLeft">
              <div class="name">离线</div>
              <div class="value onLine">{{ carStatusData.offline || 0 }}</div>
            </div>

            <div class="statusLeft">
              <div class="name">故障</div>
              <div class="value breakdown">{{ carStatusData.breakdown || 0 }}</div>
            </div>

            <div class="statusLeft">
              <div class="name">异常</div>
              <div class="value abnormal">{{ carStatusData.abnormal || 0 }}</div>
            </div>
          </div>
          <!-- <div class="companyCard">
          <div class="lineCard"></div>
          <div class="name">驾驶员(人)</div>
          <div class="value">{{ carStatusData.driver || 0 }}</div>
        </div> -->
          </div>
        </div>


      </div>
@@ -111,12 +111,12 @@
        <!-- 左边统计 -->
        <div class="leftData">
          <div class="warnCount">
            <div class="title ">预警类型排行榜</div>
            <div class="title ">预警类型排行</div>
            <div class="countChart" id="countChart"></div>
          </div>
          <!-- 预警排行榜(前10) -->
          <div class="warnRank">
            <div class="title mt-0">公司预警排行榜</div>
            <div class="title mt-0">公司预警排行</div>
            <div class="rankChart" id="rankChart">
              <div class="rankItem" v-for="(item, index) in rankList" :key="index">
                <div class="left">{{ item.name }}</div>
@@ -136,7 +136,7 @@
        </div>
        <!-- 右边 内容 -->
        <div class="right">
          

          <!-- 今日预警 -->
          <div class="todayWarn">
            <div class="title">今日预警</div>
@@ -167,7 +167,7 @@
          <!-- 预警情况统计 -->
          <div class="warnCount">
            <div class="title ">预警情况统计</div>
            <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%" :height="300">
            <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%" :height="321">
              <el-table-column prop="operate_type" label="车辆类型">
                <template #default="{ row }">
                  <span class="operate_type" @click="toWarningList(row.operate_type)">{{ row.operate_type }}</span>
@@ -979,21 +979,30 @@
      display: flex;
      height: calc(100% - 138px);
      padding-top: 20px;

      .title {
      margin-top: 10px;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.88);
      line-height: 25px;
      text-transform: none;
      margin-bottom: 10px;
    }
        font-weight: 600;
        font-size: 18px;
        color: #fff;
        line-height: 25px;
        text-transform: none;
      padding: 5px 0;

      }

      .title:nth-child(1) {
        background: url("../../assets/6.png") no-repeat center center;
        background-size: 100% 100%;
        padding-left: 30px;
      }




      .leftData {
        display: flex;
        flex-direction: column;
        width: 493px;
        width: 443px;
        height: 100%;
        padding-right: 20px;

@@ -1012,6 +1021,14 @@
          width: 100%;
          height: 88%;
        }

        .title {
          background: url("../../assets/3.png") no-repeat center center;
          background-size: 100% 100%;
          padding-left: 14px;
        }



        .noData {
          display: flex;
@@ -1034,6 +1051,11 @@
        background: #f4f4ff;
        padding: 10px;
        margin-top: 10px;
        .title {
        background: url("../../assets/1.png") no-repeat center center;
        background-size: 100% 100%;
        padding-left: 14px;
      }

        .rankChart {
          padding: 5px;
@@ -1142,14 +1164,12 @@
      background: #f4f4ff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      padding: 14px 20px 20px 20px;
      padding: 14px 20px 14px 20px;
      margin-right: 20px;

      .fir {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        margin-top: 11px;

        .countCard {
          background: #ffffff;
@@ -1315,7 +1335,7 @@
      background: #f4f4ff;
      // margin-bottom: 10px;
      padding: 10px;
      width: 473px;
      width: 423px;
      padding-left: 20px;

      .companyCard {
@@ -1346,13 +1366,23 @@

        .value {
          padding-left: 10px;
          margin-bottom: 22px;
          margin-bottom: 12px;
          text-align: left;
          font-weight: 900;
          font-size: 18px;
          color: #0e6efd;
          line-height: 21px;
        }
        .onLine{
          color: #000000;
        }
        .breakdown{
          color:   #ffa500;
        }
        .abnormal{
          color: #ff0000;
        }
        
      }

      .companyCard:nth-child(2) {
@@ -1379,7 +1409,7 @@
    // position: absolute;
    // right: 0;
    // top: 0;
    width: 493px;
    width: 443px;
    // flex: 1;
    display: flex;
    flex-direction: column;
@@ -1393,13 +1423,12 @@
    // overflow-y: auto;

    .title {
      margin-top: 10px;
      padding: 5px 0;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.88);
      color: #fff;
      line-height: 25px;
      text-transform: none;
      margin-bottom: 10px;
    }

    .mt-0 {
@@ -1480,9 +1509,10 @@
      flex: 1;

      .warnList {
        height: 100%;
        margin-top: 5px;
        height: calc(100% - 45px);
        overflow-y: auto;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        border-radius: 10px 10px 0px 0px;
        background-color: #fff;

@@ -1599,6 +1629,13 @@
      background: #f4f4ff;
      margin-bottom: 0px !important;
      flex: 1;
    

      .title {
        background: url("../../assets/5.png") no-repeat center center !important;
        background-size: 100% 100% !important;
        padding-left: 14px;
      }

      #countChart {
        width: 100%;
@@ -1690,6 +1727,9 @@
      }
    }
  }
  ::v-deep .el-table .el-table__cell{
    padding:8px 0px !important;
  }
}

.operate_type {