large-vue/src/views/pad/official/terminalDataDialog.vue

<template>
  <div style="display: flex;width: 100%">
    <div class="c1" >
    <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">
            <img src="../../../assets/zhang/publicCar/car.png" width="68" style="margin-right: 20px">
            <div class="carNum" v-for="(it, index) in resourceData.totalCarNum.split('')">
              <span v-if="index < resourceData.cd" style="color: rgba(0,255,255,0.3)">{{ it }}</span>
              <span v-if="index >= resourceData.cd">{{ it }}</span>
            </div>
            <div class="carText">辆</div>
          </div>
          <div class="c1_titleText"></div>
          <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px">
            <div class="carTypeNumBox" v-for="(it, index) in carTypeNum">
              <div style="display: flex;width: 100%;height: 25px">
                <img src="../../../assets/zhang/publicCar/miniCar.png" width="18" style="object-fit: cover">
                <div style="color: white;font-size: 15px">{{ it.type }}</div>
              </div>
              <div style="width: 100%;height: 25px;color: #00FFFF;display: flex">
                <div style="font-size: 30px;font-family: 'electronicFont'">{{ it.num }}</div>
                <div style="font-size: 10px;height: 100%;display: flex;align-items: end;margin-top: 4px">辆</div>
              </div>
            </div>
          </div>
          <div style="display: flex;width: 100%;">
            <div style="width: 50%">
              <div class="c1_titleText_half1"></div>
              <div style="display: flex;align-items: center;margin-bottom: 10px;padding-left: 30px">
                <div style="height: 50px;margin-right: 15px" v-for="(it, index) in carUseNum">
                  <div style="display: flex;width: 100%;height: 25px;align-items: center">
                    <img src="../../../assets/zhang/publicCar/miniCar.png" width="30" style="object-fit: cover">
                    <div style="color: white;font-size: 13px">{{ it.type }}</div>
                  </div>
                  <div style="width: 100%;height: 25px;color: #00FFFF;display: flex;margin-left: 10px">
                    <div style="font-size: 30px;font-family: 'electronicFont'">{{ it.num }}</div>
                    <div style="font-size: 10px;height: 100%;display: flex;align-items: end;margin-top: 4px">辆</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 50%">
              <div class="c1_titleText_half2"></div>
              <div style="display: flex;align-items: center;margin-bottom: 10px;padding-left: 30px">
                <div style="height: 50px;margin-right: 15px" v-for="(it, index) in carActivationNum">
                  <div style="display: flex;width: 100%;height: 25px;align-items: center">
                    <img src="../../../assets/zhang/publicCar/miniCar.png" width="30" style="object-fit: cover">
                    <div style="color: white;font-size: 13px">{{ it.type }}</div>
                  </div>
                  <div style="width: 100%;height: 25px;color: #00FFFF;display: flex;margin-left: 10px">
                    <div style="font-size: 30px;font-family: 'electronicFont'">{{ it.num }}</div>
                    <div style="font-size: 10px;height: 100%;display: flex;align-items: end;margin-top: 4px">辆</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;width: 100%;flex-wrap: wrap;margin-top: 10px">
          <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: 10px 5px 0 33px">
              <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 10px">
                <span style="font-family: 'electronicFont'">{{ resourceData.establishmentsCarNum }}</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">
              <div style="position: relative">
                <img src="../../../assets/zhang/publicCar/arcBlueEx.png" width="90" style="margin: 20px 5px 0 33px">
                <div style="position: absolute;color: #00FFFF;width: 158px;top: 5px;font-size: 34px;font-family: 'electronicFont';text-align: center">
                  {{ Number.isNaN(resourceData.percentageLack) ? 0 : resourceData.percentageLack }}<span style="font-size: 12px">%</span>
                </div>
              </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">
              <div style="position: relative">
                <img src="../../../assets/zhang/publicCar/arcBlueEx.png" width="90" style="margin: 20px 5px 0 33px">
                <div style="position: absolute;color: #00FFFF;width: 158px;top: 5px;font-size: 34px;font-family: 'electronicFont';text-align: center">{{ Number.isNaN(resourceData.percentagePosess) ? 0 : resourceData.percentagePosess }}<span style="font-size: 12px">%</span></div>
              </div>
            </div>
          </div>

          <div style="width: 50%;margin-bottom: 10px">
            <div class="c1_title_half">
              <div style="position: absolute;left: 20px;top: -5px;">2025年度公务车车辆数</div>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 20px">
              <div style="position: relative;cursor: pointer" @click="chooseX">
                <img src="../../../assets/zhang/publicCar/arcBlue.png" width="97" style="margin: 10px 5px 0 33px">
                <div style="position: absolute;width: 55px;color: #00FFFF;top: 5px;left: 55px;font-size: 12px;text-align: center">年度增加车辆数</div>
              </div>
              <div style="width: 108px;height: 24px;color: #00FFFF;font-size: 34px;margin-bottom: 20px">
                <span style="font-family: 'electronicFont'">{{ resourceData.yearAddNum }}</span>
                <span style="width: 15px;height: 24px;font-size: 10px;align-content: end">辆</span>
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <div style="position: relative;cursor: pointer" @click="chooseY">
                <img src="../../../assets/zhang/publicCar/arcOrange.png" width="97" style="margin: 10px 5px 0 33px">
                <div style="position: absolute;width: 55px;color: #FEC72F;top: 5px;left: 55px;font-size: 12px;text-align: center">年度减少车辆数</div>
              </div>
              <div style="width: 108px;height: 24px;color: #FEC72F;font-size: 34px;margin-bottom: 20px">
                <span style="font-family: 'electronicFont'">{{ resourceData.yearReduceNum }}</span>
                <span style="width: 15px;height: 24px;font-size: 10px;align-content: end">辆</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
    <div style="flex: 1" @click="leaveFun"></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: {
    carTypeNum: Array,
    carUseNum: Array,
    carActivationNum: Array,
    resourceData:{}
  },
  data() {
    return {
      //在线数
      pieData: [],
      catePieData: [
        { value: 40, name: "新能源汽车" },
        { value: 20, name: "燃油汽车" },
      ],
      totalPieData: [
        { value: 110, name: "商务车" },
        { value: 120, name: "越野车" },
        { value: 130, name: "小型客车" },
        { value: 140, name: "大型客车" },
        { value: 150, name: "小轿车" },
      ],
      catePieLegend: {
        orient: "vertical",
        top: 60,
        right: 23,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      totalPieLegend: {
        top: 20,
        right: 10,
        itemWidth: 8,
        itemHeight: 8,
        orient: "vertical",
        textStyle: {
          color: "#FFF",
        },
      },
      pieLegend: {
        orient: "vertical",
        top: 50,
        right: 30,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      pieCenter: ["27%", "50%"],
      totalCenter: ["30%", "50%"],
      catePieCenter: ["27%", "50%"],
      pieRadius: ["35%", "50%"],

      //各单位终端在线
      barData: [],
      barAxis: {},
      barYAxis: {},
      barLegend: {},

      personInOutBarData: [
        {
          name: "员工",
          type: "bar",
          itemStyle: {
            color: "#43DCDB",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 10,
          data: [110, 120, 130, 140, 150, 160, 155, 145, 135, 125, 115, 15],
        },
        {
          name: "访客",
          type: "bar",
          itemStyle: {
            color: "#FFD296",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 10,
          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
        },
      ],
      personInOutBarAxis: {
        type: "category",
        data: [
          "01月",
          "02月",
          "03月",
          "04月",
          "05月",
          "06月",
          "07月",
          "08月",
          "09月",
          "10月",
          "11月",
          "12月",
        ],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#08595B",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      personInOutBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: "人",
        nameTextStyle: {
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      personInOutBarLegend: {
        top: 0,
        orient: "horizontal",
        right: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      barGrid: {
        top: 30,
        left: "2%",
        right: "5%",
        containLabel: true,
        bottom: 0,
      },
      departmentPersonInOutBarData: [
        {
          name: "员工",
          type: "bar",
          itemStyle: {
            color: "#43DCDB",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 10,
          data: [110, 150, 160, 135, 115, 15],
        },
        {
          name: "访客",
          type: "bar",
          itemStyle: {
            color: "#FFD296",
            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
          },
          barWidth: 10,
          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
        },
      ],
      departmentPersonInOutBarAxis: {
        type: "category",
        data: ["财务资产部", "离退休工作部", "后勤保障部", "物资管理部", "数字化工作部", "纪委办公室"],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#08595B",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      departmentPersonInOutBarYaxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        name: "人",
        nameTextStyle: {
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      },
      departmentPersonInOutBarLegend: {
        top: 0,
        orient: "horizontal",
        right: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      visitorDataList: [
        {
          name: "于俊",
          time: "2024 / 11 / 15 15:01",
          department: "财务资产部",
        },
        {
          name: "于俊",
          time: "2024 / 11 / 15 14:58",
          department: "财务资产部",
        },
        {
          name: "于俊",
          time: "2024 / 11 / 15 14:55",
          department: "财务资产部",
        },
        {
          name: "于俊",
          time: "2024 / 11 / 15 14:01",
          department: "财务资产部",
        },
      ],
      warningList: [
        {
          name: "国网太原供电公司",
          data1: 356,
          data2: 100,
          data3: 56,
          data4: 67,
          data5: 133,
        },
        {
          name: "国网临汾供电公司",
          data1: 324,
          data2: 80,
          data3: 95,
          data4: 63,
          data5: 86,
        },
        {
          name: "国网晋城供电公司",
          data1: 286,
          data2: 80,
          data3: 65,
          data4: 46,
          data5: 95,
        },
        {
          name: "国网长治供电公司",
          data1: 275,
          data2: 84,
          data3: 72,
          data4: 63,
          data5: 56,
        },
        {
          name: "国网运城供电公司",
          data1: 268,
          data2: 70,
          data3: 65,
          data4: 73,
          data5: 60,
        },
      ],
    };
  },
  created() {
    this.handlePie();
    this.handleBar();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    chooseX(){
      this.$emit('chooseX')
    },
    chooseY(){
      this.$emit('chooseY')
    },

    //实例化饼图
    handlePie() {
      this.pieData = [
        { value: 100, name: "离线数" },
        { value: 200, name: "在线数" },
      ];
    },

    //实例化柱状图
    handleBar() {
      this.barData = [
        {
          name: "总数",
          type: "bar",
          itemStyle: {
            color: "#43DCDB",
          },
          barWidth: 10,
          data: [320, 332, 201, 334, 390, 100],
        },
        {
          name: "离线数",
          type: "bar",
          itemStyle: {
            color: "#EAA553",
          },
          barWidth: 10,
          data: [220, 232, 301, 334, 190, 200],
        },
        {
          name: "在线数",
          type: "bar",
          itemStyle: {
            color: "#1B5CBB",
          },
          barWidth: 10,
          data: [120, 332, 101, 134, 290, 300],
        },
      ];

      this.barGrid = {
        top: 30,
        bottom: 0,
        left: "2%",
        right: "5%",
        containLabel: true,
      };

      this.barLegend = {
        right: 20,
        top: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      };

      this.barAxis = {
        type: "category",
        data: [
          "国网太原供电公司",
          "国网运城供电公司",
          "国网临汾供电公司",
          "国网晋城供电公司",
          "国网吕梁供电公司",
        ],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
          rotate:-50
        },
        axisLine: {
          lineStyle: {
            color: "#08595B",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: false,
      };

      this.barYAxis = {
        name: "数量(个)",
        nameTextStyle: {
          color: "#fff",
          padding: [0, 0, 0, 5],
          fontSize: 14,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#FFF",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        splitArea: false,
      };
    },

    //鼠标移出
    leaveFun() {
      setTimeout(() => {
        this.$emit("closeDialog");
      }, 200);
    },

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

<style lang="scss" scoped>
.c1 {
  width: 580px;
  height: 1000px;
  padding-top: 19px;
  background: url("../../../assets/images/main/main_bg.png") no-repeat;
  background-size: 100% 100%;
}
.Img {
  width: 284px;
  height: 32px;
}
.c1_bg{
  width: 550px;
  height: 920px;
  background: url("../../../assets/images/main/components_long_bg.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 4px;
}
.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_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;
}
.carNum{
  width: 40px;
  height: 58px;
  margin-right: 3px;
  background: url("../../../assets/zhang/publicCar/numBack.png") no-repeat;
  color: #00FFFF;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: oblique;
}
.carText{
  width: 40px;
  height: 58px;
  color: #00FFFF;
  font-size: 24px;
  margin-left: 3px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.c1_titleText{
  width: 100%;
  height: 32px;
  margin-left: 35px;
  margin-bottom: 10px;
  background: url("../../../assets/zhang/publicCar/titleBox.png") no-repeat;
  position: relative;
}
.c1_titleText::after{
  content: '车辆类型';
  position: absolute;
  color: #FFFFFF;
  font-size: 12px;
  left: 20px;
  top: 8px;
}
.carTypeNumBox{
  width: 95px;
  height: 50px;
}
.c1_titleText_half1{
  height: 32px;
  margin-left: 35px;
  margin-bottom: 10px;
  background: url("../../../assets/zhang/publicCar/titleBox.png") no-repeat;
  position: relative;
}
.c1_titleText_half1::after{
  content: '车辆用途';
  position: absolute;
  color: #FFFFFF;
  font-size: 12px;
  left: 20px;
  top: 8px;
}
.c1_titleText_half2{
  height: 32px;
  margin-left: 35px;
  margin-bottom: 10px;
  background: url("../../../assets/zhang/publicCar/titleBox.png") no-repeat;
  position: relative;
}
.c1_titleText_half2::after{
  content: '动力类型';
  position: absolute;
  color: #FFFFFF;
  font-size: 12px;
  left: 20px;
  top: 8px;
}
.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>