large-vue/src/views/screen/logistics/car/carStockDialog.vue

<template>
  <div class="c1" @mouseleave="leaveFun">
    <div style="display: flex;justify-content: center;width: 100%;flex-wrap: wrap">
      <div style="position: relative;height: 38px">
        <div class="overTitle">监控管理</div>
        <img src="@/assets/images/main/cont_title_bg.png" width="284" alt="" class="Img">
      </div>
      <div class="c1_bg">
        <div class="c1_title"></div>
        <div class="c1_body">
          <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 10px;flex-wrap: wrap">
            <div style="display: flex;width: 100%;align-items: center;justify-content: center;margin-bottom: 10px;">
              <img src="../../../../assets/zhang/pubicCar/car.png" width="68" style="margin-right: 20px">
              <div class="carInstall">
                <div style="width: 90%;display: flex;flex-wrap: wrap">
                  <div style="width: 80%;margin-bottom: 10px">公务车终端安装率</div>
                  <div style="width: 20%;text-align: right">87%</div>
                  <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
                    <div style="width: 87%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
                  </div>
                </div>
                <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
              </div>
            </div>
            <div style="display: flex;width: 100%;align-items: center;justify-content: center">
              <img src="../../../../assets/zhang/pubicCar/car.png" width="68" style="margin-right: 20px">
              <div class="carInstall">
                <div style="width: 90%;display: flex;flex-wrap: wrap">
                  <div style="width: 80%;margin-bottom: 10px">公务车终端在线率</div>
                  <div style="width: 20%;text-align: right">50%</div>
                  <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
                    <div style="width: 50%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
                  </div>
                </div>
                <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;width: 100%;flex-wrap: wrap">

          <div style="width: 50%;">
            <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%;">
            <div class="c1_title_half">
              <div style="position: absolute;left: 20px;top: -5px;">未带工单预警数</div>
            </div>
            <div style="display: flex;align-items: center;cursor: pointer" @click="chooseX">
              <img src="../../../../assets/zhang/pubicCar/pentagonCar.png" width="55" 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-top: 10px">
            <div class="c1_title_half">
              <div style="position: absolute;left: 20px;top: -5px">超速预警数</div>
            </div>
            <div style="display: flex;align-items: center;cursor: pointer" @click="chooseY">
              <img src="../../../../assets/zhang/pubicCar/pentagonCar.png" width="55" 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-top: 10px">
            <div class="c1_title_half">
              <div style="position: absolute;left: 20px;top: -5px;">节假日预警数</div>
            </div>
            <div style="display: flex;align-items: center;cursor: pointer" @click="chooseZ">
              <img src="../../../../assets/zhang/pubicCar/pentagonCar.png" width="55" 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>
    </div>
  </div>
</template>

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

export default {
  name: "BuildingSaveDialog",
  components: {
    BarChart,
    PieChart,
    LineChart,
  },
  props: {},
  data() {
    return {
      // 公务用车资源情况
      dataList: [
        {
          name: "月均车运行天数",
          data: "56",
          unit: "天",
        },
        {
          name: "日派车单数",
          data: "30",
          unit: "单",
        },
        {
          name: "日行驶里程",
          data: "26",
          unit: "公里",
        },
      ],
      pieData: [
        {
          value: 30,
          name: "企业负责人用车",
          itemStyle: {
            color: "#00FFFF",
          },
        },
        {
          value: 26,
          name: "企业用车",
          itemStyle: {
            color: "#2F82FE",
          },
        },
      ],
      pieCenter: ["27%", "50%"],
      pieRadius: ["50%", "60%"],
      pieLegend: {
        orient: "vertical",
        top: 50,
        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: {
        orient: "vertical",
        top: 60,
        right: 23,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      catePieCenter: ["27%", "50%"],
      carTypeBarData: [
        {
          name: "",
          type: "bar",
          itemStyle: {
            color: "#D9821D",
          },
          barWidth: 20,
          data: [110, 120, 130, 140, 150],
        },
      ],
      carTypeBarAxis: {
        type: "category",
        data: ["商务车", "越野车", "小型客车", "大型客车", "小轿车"],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
          rotate: 25,
          interval: 0
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
      },
      carTypeBarYAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: "辆",
        nameTextStyle: {
          color: "#fff",
          padding: [0,30,0,0],
          fontSize: 14,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      carTypeBarLegend: {
        show: false,
      },
      carTotalData: [
        {
          name: "",
          type: "bar",
          itemStyle: {
            color: "#43DCDB"
          },
          barWidth: 40,
          data: [110, 120, 58, 200],
        },
      ],
      carTotalAxis: {
        type: "category",
        data: ["本部 ", "直属单位", "市公司", "县公司"],
        axisLabel: {
          color: "white" // 设置横坐标轴字体颜色为红色
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      carTotalYAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: "数量(辆)",
        nameTextStyle: {
          color: "#fff",
          padding: [0,5,0,0],
          fontSize: 14,
        },
        axisLine: {
          lineStyle: {
            color: "#465A64",
          },
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      carTotalLegend: {
        show: false,
      },
      barGrid: {
        top: 30,
        left: "2%",
        right: "2%",
        containLabel: true,
        bottom: 0,
      },
    };
  },
  created() {},
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    chooseX(){
      this.$emit('chooseX')
    },
    chooseY(){
      this.$emit('chooseY')
    },
    chooseZ(){
      this.$emit('chooseZ')
    },
    //鼠标移出
    leaveFun(){
      setTimeout(()=>{
        this.$emit("closeDialog")
      },200)
    },

    preventDefault() {
      console.log(11);
    },
  },
};
</script>

<style lang="scss" scoped>
.c1 {
  width: 580px;
  height: 920px;
  padding-top: 19px;
  background: url("../../../../assets/images/main/main_bg.png") no-repeat;
  background-size: cover;
}
.overTitle{
  width: 100%;
  top: -5px;
  color: white;
  font-family: 'PingFangSC';
  font-size: 20px;
  font-weight: 900;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c1_bg{
  width: 550px;
  height: 849px;
  background: url("../../../../assets/images/main/components_long_bg.png") no-repeat;
  background-size: cover;
  margin-top: 4px;
}
.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_title::after{
  content: '公务车终端概况';
  position: absolute;
  left: 20px;
  top: -5px;
}
.carInstall{
  width: 403px;
  height: 74px;
  margin-right: 3px;
  background: url("../../../../assets/zhang/pubicCar/gradientBox.png") no-repeat;
  color: #CFF8FF;
  font-size: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.carInstall::after{
  content: '';
  position: absolute;
}
.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;
}
</style>