large-vue/src/views/screen/official/carWarning.vue

<template>
  <div>
    <div style="display: flex;width: 100%;flex-wrap: wrap">
      <div style="width: 50%;margin-bottom: 10px">
        <div class="c1_title_half">
          <div style="position: absolute;left: 20px;top: -5px;">公务车派车单总数</div>
        </div>
        <div style="display: flex;align-items: center">
          <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
          <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
            <span style="font-family: 'electronicFont'">5566</span>
            <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">单</span>
          </div>
        </div>
      </div>


      <div style="width: 50%;margin-bottom: 10px">
        <div class="c1_title_half">
          <div style="position: absolute;left: 20px;top: -5px;">均车派单数</div>
        </div>
        <div style="display: flex;align-items: center">
          <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
          <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
            <span style="font-family: 'electronicFont'">5566</span>
            <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">单</span>
          </div>
        </div>
      </div>

      <div style="width: 50%;margin-bottom: 10px">
        <div class="c1_title_half">
          <div style="position: absolute;left: 20px;top: -5px;">公务车行驶总里程</div>
        </div>
        <div style="display: flex;align-items: center">
          <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
          <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
            <span style="font-family: 'electronicFont'">5566</span>
            <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">公里</span>
          </div>
        </div>
      </div>

      <div style="width: 50%;margin-bottom: 10px">
        <div class="c1_title_half">
          <div style="position: absolute;left: 20px;top: -5px;">均车里程数</div>
        </div>
        <div style="display: flex;align-items: center">
          <img src="../../../assets/zhang/public_car.png" width="58" style="margin: 0 5px 0 33px">
          <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
            <span style="font-family: 'electronicFont'">5566</span>
            <span style="width: 15px;height: 24px;font-size: 14px;align-content: end">公里</span>
          </div>
        </div>
      </div>

    </div>
    <div class="c1_title">
      <div style="position: absolute;left: 20px;top: -5px;">单位用车活跃度</div>
    </div>
    <div style="display: flex;width: 100%;margin-bottom: 30px">
      <div style="width: 50%">
        <div class="c1_titleText">
          <div style="position: absolute;left: 20px;top: 8px;color: #FFFFFF;font-size: 12px;">前三名单位情况</div>
        </div>
        <bar-chart
          :chart-data="barData"
          :x-axis="barAxis"
          :y-axis="barYAxis"
          :grid="barGrid"
          :legend="legend"
          y-color="#FFF"
          l-color="#FFF"
          width="80%"
          height="254px"
          style="left: 30px;"
        />
      </div>
      <div style="width: 50%">
        <div class="c1_titleText">
          <div style="position: absolute;left: 20px;top: 8px;color: #FFFFFF;font-size: 12px;">后三名单位情况</div>
        </div>
        <bar-chart
          :chart-data="barData"
          :x-axis="barAxis1"
          :y-axis="barYAxis"
          :grid="barGrid"
          :legend="legend"
          y-color="#FFF"
          l-color="#FFF"
          width="80%"
          height="254px"
          style="left: 30px;"
        />
      </div>
    </div>
    <div class="c1_title">
      <div style="position: absolute;left: 20px;top: -5px;">单车活跃度排名</div>
    </div>
    <div style="width: 100%;padding: 0 15px 0 15px">
      <div class="flex-container">
        <div class="header" style="margin-bottom: 10px">
          <div class="flex-column" style="width: 60%">单位名称</div>
          <div class="flex-column">车牌号码</div>
          <div class="flex-column">派车单数</div>
        </div>
        <div class="dataBody">
          <div class="flex-row" style="margin-bottom: 10px" v-for="(item,index) in dataList" :key="index" @click="choose()">
            <div class="flex-column" style="width: 60%">{{item.unit}}</div>
            <div class="flex-column">{{item.car}}</div>
            <div class="flex-column">{{item.order}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "@/components/Echarts/PieChart";
import BarChart from '@/components/Echarts/BarChart.vue'

export default {
  name: "CarResource",
  components: { BarChart, PieChart },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.show = false;
      setTimeout(()=>{
        this.show = true;
      },100)
    },
  },
  data() {
    return {
      // 公务用车资源情况
      dataList: [
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
        {
          unit: "国网山西省电力公司太原供电公司",
          car: "晋C36727",
          order: 200,
        },
      ],
      barData: [
        {
          name: "公务车总数",
          type: "bar",
          itemStyle: {
            color: {
              type:'linear',
              x:0,//右
              y:0,//下
              x2:0,//左
              y2:1,//上
              colorStops:[
                {
                  offset:0,
                  color:'#FFD296'
                },
                {
                  offset:1,
                  color:'#D67C15'
                },
              ]
            }
          },
          barWidth: 10,
          data: [110, 140, 150],
        },
        {
          name: "派车单数",
          type: "bar",
          itemStyle: {
            color: {
              type:'linear',
              x:0,//右
              y:0,//下
              x2:0,//左
              y2:1,//上
              colorStops:[
                {
                  offset:0,
                  color:'#43DCDB'
                },
                {
                  offset:1,
                  color:'#00576D'
                },
              ]
            }
          },
          barWidth: 10,
          data: [110, 120, 130],
        },
      ],
      barAxis:{
        type: "category",
        data: [
          "国网山西省太原供电公司", "国网山西省运城供电公司", "国网山西省晋城供电公司"
        ],
        axisLabel: {
          color: "white",
          fontSize: 10,
          rotate: 65,
        },
        axisTick: {
          show: false,
        },
      },
      barAxis1:{
        type: "category",
        data: [
          "国网山西省朔州供电公司", "国网山西省阳泉供电公司", "国网山西省忻州供电公司"
        ],
        axisLabel: {
          color: "white",
          fontSize: 10,
          rotate: 65,
        },
        axisTick: {
          show: false,
        },
      },
      barYAxis:{
        type: "value",
        axisLabel: {
          color: "white",
        },
        splitLine: {
          show: true,
          lineStyle:{
            type:"dashed",
            color: '#504e4e',
            width:0.5,
            dashOffset: 0,
          }
        },
        axisTick: {
          show: false,
        },
        splitArea:false,
        axisLine: {
          show: false, //不显示坐标轴线
        },
        interval: 50,
      },
      barGrid: {
        top: 30,
        left: "2%",
        right: "2%",
        containLabel: true,
        bottom: 0,
      },
      legend:{
        orient: 'horizontal',
        textStyle: {
          fontSize: 10,
          color: '#FFFFFF'  // 设置文字颜色为白色
        },
        itemWidth: 8,  // 设置图例图标的宽度
        itemHeight: 8,  // 设置图例图标的高度
        icon: 'rect',
        right: 'left',  // 将图例放置在容器的左侧
        top: 'top',    // 将图例放置在容器的顶部
      },
      pieCenter: ["25%", "50%"],
      pieRadius: ["50%", "60%"],
      pieLegend: {
        orient: "vertical",
        top:60,
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      //各类车型
      totalPieData: [
        { value: 110, name: "商务车" },
        { value: 120, name: "越野车" },
        { value: 130, name: "小型客车" },
        { value: 140, name: "大型客车" },
        { value: 150, name: "小轿车" },
      ],
      totalCenter: ["30%", "50%"],
      totalPieLegend: {
        top: 20,
        right: 10,
        itemWidth: 8,
        itemHeight: 8,
        orient: "vertical",
        textStyle: {
          color: "#FFF",
        },
      },
      //车辆类型
      catePieData: [
        { value: 40, name: "新能源汽车" },
        { value: 20, name: "燃油汽车" },
      ],
      catePieLegend: {
        show: false,
      },
      catePieCenter: ["50%", "50%"],
      show:true
    };
  },
  created() {},
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.c1_title_half{
  width: 100%;
  height: 36px;
  background: url("../../../assets/images/main/title_pro.png") no-repeat;
  color: #00FFFF;
  margin: 20px 0 0 15px;
  position: relative;
}
.c1_title{
  width: 100%;
  height: 36px;
  background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
  color: #00FFFF;
  margin: 20px 0 0 15px;
  position: relative;
}
.c1_titleText{
  height: 32px;
  margin-left: 35px;
  margin-bottom: 10px;
  background: url("../../../assets/zhang/publicCar/titleBox.png") no-repeat;
  position: relative;
}
.flex-container {
  width: 100%;
}

.header{
  display: flex;  /* 每行使用 flexbox 布局 */
  position: relative;
  background-color: rgba(21, 105, 107, 0.5);
}

.flex-row {
  display: flex;  /* 每行使用 flexbox 布局 */
  position: relative;
}

.flex-row::before{
  content: "";
  height: 15px;
  border-left: 2px #00FFFF solid;
  position: absolute;
  left: 0;
  top: 10px
}

.flex-column {
  width: 25%;
  padding: 8px 12px;
  text-align: left;  /* 左对齐文本 */
  color: white;
}

.header .flex-column {
  color: #00ffff;
}

.dataBody{
  width:100%;
  height:250px;
  overflow: auto
}

.dataBody::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
</style>