H5/shehong-vehicle-supervision.git

<template> 
  <div class="flex homePage"> 
    <div class="leftMap"></div> 
    <div class="right"> 
      <div class="firCard"> 
        <div class="companyCard"> 
          <div class="lineCard"></div> 
          <div class="name">运营公司(家)</div> 
          <div class="value">88888</div> 
        </div> 
        <div class="companyCard"> 
          <div class="lineCard"></div> 
          <div class="name">运营公司(家)</div> 
          <div class="value">88888</div> 
        </div> 
        <div class="companyCard"> 
          <div class="lineCard"></div> 
          <div class="name">运营公司(家)</div> 
          <div class="value">88888</div> 
        </div> 
      </div> 
      <!-- 今日预警 --> 
      <div class="todayWarn"> 
        <div class="title">今日预警</div> 
        <div class="warnList"> 
          <div 
            class="warnItem" 
            v-for="item in 5" 
            :key="item" 
            :class="['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][item - 1]" 
          > 
            <div class="grade">一级</div> 
            <div class="info"> 
              53453453245 川A99999 车辆急刹车 20分钟 11:09:09 
            </div> 
          </div> 
        </div> 
      </div> 
      <!-- 预警情况统计 --> 
      <div class="warnCount"> 
        <div class="title">预警情况统计</div> 
        <div class="countChart" id="countChart"></div> 
        <div class="noData" v-if="countList.length == 0"> 
          <el-empty description="暂无数据" :image-size="80"></el-empty> 
        </div> 
      </div> 
      <!-- 预警排行榜(前10) --> 
      <div class="warnRank"> 
        <div class="title">预警排行榜(前10)</div> 
        <div class="rankChart" id="rankChart"> 
          <div class="rankItem" v-for="(item, index) in rankList" :key="index"> 
            <div class="left">{{ item.name }}</div> 
            <div 
              class="rankRight" 
              :class="[0, 1, 2].includes(index) ? 'rankColor' : ''" 
            > 
              <div class="rank" :style="{ width: item.value + '%' }"></div> 
            </div> 
          </div> 
        </div> 
        <div class="noData" v-if="rankList.length == 0"> 
          <el-empty description="暂无数据" :image-size="80"></el-empty> 
        </div> 
      </div> 
    </div> 
  </div> 
</template> 
 
<script> 
import * as echarts from "echarts"; 
export default { 
  data() { 
    return { 
      activeIndex: "1", 
      activeIndex2: "1", 
      countList: [], //预警情况统计数据 
      rankList: [ 
        { name: "射洪客运公司", value: 90 }, 
        { name: "滴滴网约车客运公司", value: 80 }, 
        { name: "滴滴网约车客运公司", value: 70 }, 
        { name: "滴滴网约车客运公司", value: 60 }, 
        { name: "滴滴网约车客运公司", value: 50 }, 
        { name: "滴滴网约车客运公司", value: 40 }, 
        { name: "滴滴网约车客运公司", value: 30 }, 
        { name: "滴滴网约车客运公司", value: 20 }, 
        { name: "滴滴网约车客运公司", value: 10 }, 
        { name: "滴滴网约车客运公司", value: 0 }, 
      ], //预警排行榜数据 
    }; 
  }, 
  onload() {}, 
  methods: { 
    handleSelect(key, keyPath) { 
      console.log(key, keyPath); 
    }, 
    // 获取预警情况统计 
    getCountList() { 
      echarts.dispose(document.getElementById("countChart")); 
      if (this.countList.length > 0) { 
        this.chartTnit(); 
      } 
    }, 
    chartTnit(x, y1, y2) { 
      // 基于准备好的dom，初始化echarts实例 
      const myChart = echarts.init(document.getElementById("countChart")); 
      // 绘制数量图表 
      myChart.setOption({ 
        tooltip: { 
          trigger: "axis", 
          axisPointer: { 
            // 坐标轴指示器，坐标轴触发有效 
            type: "cross", // 默认为直线，可选为：'line' | 'cross' 
          }, 
          //  formatter: '{b}月\n' 
        }, 
        legend: { 
          x: "right", 
          itemWidth: 12, 
          itemHeight: 12, 
          itemGap: 56, // 设置间距 
          textStyle: { 
            color: "rgba(68, 68, 68, 0.65)", 
            fontSize: 16, 
            padding: [0, 0, 0, 8], 
          }, 
          data: ["充电电费", "充电服务费"], 
        }, 
        grid: { 
          width: "auto", 
          height: "auto", 
          left: "0", 
          right: "5%", 
          bottom: "0", 
          top: "15%", 
          containLabel: true, 
        }, 
        xAxis: { 
          type: "category", 
          axisLabel: { 
            color: "rgba(80, 105, 122, 1)", 
            fontSize: 15, 
            lineHeight: 23, 
            fontFamily: "PingFangSC, PingFang SC", 
            // formatter:'{value}月' 
          }, 
          axisTick: { 
            show: true, 
          }, 
          axisLine: { 
            lineStyle: { 
              color: "RGBA(234, 234, 234, 1)", 
            }, 
          }, 
          splitLine: { 
            // 去掉网格线 
            show: false, 
          }, 
          data: x, 
        }, 
        yAxis: { 
          type: "value", 
          axisLabel: { 
            color: "rgba(80, 105, 122, 1)", 
            fontSize: 15, 
            lineHeight: 23, 
            fontFamily: "PingFangSC, PingFang SC", 
            formatter: "{value} 元", 
          }, 
          splitLine: { 
            // show: false  // 去掉网格线 
            color: "rgb(242, 242, 242, 1)", 
          }, 
          axisTick: { 
            alignWithLabel: true, 
          }, 
        }, 
        series: [ 
          { 
            name: "充电服务费", 
            type: "bar", 
            barMaxWidth: 13, 
            // showBackground: true, 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient( 
                0, 
                0, 
                0, 
                1, // x0, y0, x1, y1 
                [ 
                  { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色 
                  { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色 
                ] 
              ), 
            }, 
            // label: { 
            //     show: true, 
            //     fontSize: 12, 
            //     lineHeight: 17, 
            //     // align:'right', 
            //     color: 'rgba(123, 123, 123, 1)', 
            //     position: 'right', // 设置标签显示在柱状条右侧 
            //     // formatter: function (params) { 
            //     //     return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户' 
            //     // } // 使用模板字符串保留两位小数 
 
            // }, 
            data: y1, 
          }, 
          { 
            name: "充电电费", 
            type: "bar", 
            barMaxWidth: 13, 
            // showBackground: true, 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient( 
                0, 
                0, 
                0, 
                1, // x0, y0, x1, y1 
                [ 
                  { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色 
                  { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色 
                ] 
              ), 
            }, 
 
            data: y2, 
          }, 
        ], 
      }); 
      myChart.resize(); 
    }, 
    // 获取预警排行榜数据 
    getRankList() {}, 
  }, 
}; 
</script> 
 
<style scoped lang="less"> 
.homePage { 
  display: flex; 
  .leftMap { 
    width: 100%; 
    height: 100%; 
    flex: 1; 
  } 
  .right { 
    width: 493px; 
    height: calc(100% - 20px); 
    margin: 20px 17px 0 20px; 
    background: #ffffff; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 
    border-radius: 10px 10px 0px 0px; 
    padding: 20px; 
    .title { 
      margin-top: 30px; 
      font-weight: 600; 
      font-size: 18px; 
      color: rgba(0, 0, 0, 0.88); 
      line-height: 25px; 
      text-transform: none; 
      margin-bottom: 10px; 
    } 
    .firCard { 
      display: flex; 
      justify-content: space-between; 
      .companyCard { 
        width: 140px; 
        height: 90px; 
        background: #f4f4ff; 
        border-radius: 0px 10px 10px 0px; 
        position: relative; 
        .lineCard { 
          position: absolute; 
          left: 0; 
          top: 0; 
          width: 4px; 
          height: 90px; 
          background: #0e6efd; 
          border-radius: 2px; 
        } 
        .name { 
          margin: 18px 0 12px 19px; 
 
          font-size: 12px; 
          color: rgba(0, 0, 0, 0.6); 
          line-height: 17px; 
        } 
        .value { 
          margin-bottom: 22px; 
          text-align: center; 
          font-weight: 900; 
          font-size: 18px; 
          color: #0e6efd; 
          line-height: 21px; 
        } 
      } 
    } 
    .todayWarn { 
      .warnList { 
        height: 134px; 
        overflow-y: auto; 
        .warnItem { 
          height: 26px; 
          background: rgba(39, 129, 255, 0.06); 
          border-radius: 4px; 
          padding: 2px; 
          display: flex; 
          align-content: center; 
          margin-bottom: 10px; 
          .grade { 
            height: 22px; 
            background: #e6f4ff; 
            border-radius: 4px; 
            border: 1px solid #bae0ff; 
            margin-right: 11px; 
            box-sizing: border-box; 
            padding: 1px 8px; 
 
            font-weight: 400; 
            font-size: 12px; 
            color: #1677ff; 
            line-height: 20px; 
          } 
          .info { 
            font-size: 12px; 
            color: rgba(0, 0, 0, 0.8); 
            line-height: 26px; 
          } 
        } 
        .warnItem:last-child { 
          margin-bottom: 0 !important; 
        } 
        .oneWarn { 
          background: rgba(255, 77, 79, 0.06); 
          .grade { 
            background: #fff1f0; 
            border: 1px solid #ffccc7; 
            color: rgba(255, 77, 79, 1); 
          } 
        } 
        .twoWarn { 
          background: rgba(250, 173, 20, 0.06); 
          .grade { 
            background: #fffbe6; 
            border-radius: 4px; 
            border: 1px solid #fff1b8; 
            color: rgba(250, 173, 20, 1); 
          } 
        } 
        .threeWarn { 
          background: rgba(39, 129, 255, 0.06); 
          .grade { 
            background: #e6f4ff; 
            border: 1px solid #bae0ff; 
            color: #1677ff; 
          } 
        } 
        .fourWarn { 
          background: rgba(82, 196, 26, 0.06); 
          .grade { 
            background: #f6ffed; 
            border-radius: 4px; 
            border: 1px solid #d9f7be; 
            color: rgba(82, 196, 26, 1); 
          } 
        } 
      } 
 
      .warnList::-webkit-scrollbar { 
        width: 8px; 
        height: 8px; 
        background-color: #f5f5f5; 
      } 
 
      .warnList::-webkit-scrollbar-thumb { 
        background-color: #ccc; 
        border-radius: 4px; 
      } 
 
      .warnList::-webkit-scrollbar-thumb:hover { 
        background-color: #aaa; 
      } 
    } 
    .warnCount { 
      position: relative; 
      .countChart { 
        width: 453px; 
        height: 150px; 
      } 
      .noData { 
        display: flex; 
        flex-direction: column; 
        align-content: center; 
        justify-content: center; 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 150px; 
      } 
    } 
    .warnRank { 
      position: relative; 
      .rankChart { 
        width: 453px; 
        height: 300px; 
        .rankItem { 
          display: flex; 
          align-content: center; 
          margin-bottom: 14px; 
          .left { 
            flex: 2; 
            padding-right: 25px; 
            font-weight: 400; 
            font-size: 12px; 
            color: rgba(0, 0, 0, 0.45); 
            line-height: 17px; 
            text-align: right; 
          } 
          .rankRight { 
            flex: 5; 
            height: 15px; 
            background: rgba(93, 112, 146, 0.2); 
            border-radius: 8px; 
            .rank { 
              height: 15px; 
              border-radius: 8px; 
              background: rgba(93,112,146,0.6); 
            } 
          } 
          .rankColor { 
            background: rgba(91, 143, 249, 0.2); 
            .rank { 
              background: rgba(91, 143, 249, 0.85); 
            } 
          } 
        } 
        .rankItem:last-child { 
          margin-bottom: 0 !important; 
        } 
      } 
      .noData { 
        display: flex; 
        flex-direction: column; 
        align-content: center; 
        justify-content: center; 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 300px; 
      } 
    } 
  } 
} 
</style>