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

<template>
  <div class="c1">
    <div class="c1_title">
      <span class="title">公务车实有数
            <span class="smallTitle">截止至{{timeString}}</span>
          </span>
    </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">
          <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>
</template>

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


export default {
  name: "TerminalData",
  components: {
    PieChart,
    BarChart
  },
  props: {
    carTypeNum: Array,
    carUseNum: Array,
    carActivationNum: Array,
    resourceData:{},
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.resetData();
    },
  },
  data() {
    return {
      //在线数
      currentTime: new Date(),
      pieData: [],
      catePieData: [
        { value: 0, name: "新能源汽车" },
        { value: 0, name: "燃油汽车" },
      ],
      totalPieData: [
        { value: 0, name: "商务车" },
        { value: 0, name: "越野车" },
        { value: 0, name: "小型客车" },
        { value: 0, name: "大型客车" },
        { value: 0, 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,
        },
      ],
    };
  },
  computed: {
    timeString() {
      const year = this.currentTime.getFullYear();
      const month = String(this.currentTime.getMonth() + 1);
      const day = String(this.currentTime.getDate());
      return `${year}年${month}月${day}日`;
    },
  },
  created() {
    this.handlePie();
    this.handleBar();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {

    //初始化
    resetData(){
      this.show = false;
      setTimeout(()=>{
        this.show = true;
      },100)
    },

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

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

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

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

      this.barAxis = {
        type: "category",
        data: [
          "公司名称一",
          "公司名称一",
          "公司名称一",
          "公司名称一",
          "公司名称一",
        ],
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },
        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,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.c1{
  width: 580px;
  height: 920px;
}
.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;
  padding-left: 20px !important;
  .title {
      display: block;
      position: relative;
      top: -5px !important;
    }
    .smallTitle{
      font-size: 10px;
      font-weight: 100;
      color: #ffffff;
    }
}
.c1_body{
  width: 550px;
}
.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: flex-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;
}
</style>