<template>
    <div class="political-outlook">
        <div class="content">
            <div class="content-box">
                <div class="contentTop">
                    <div class="ctHead">
                        <div>按分包单位排名</div>
                    </div>
                    <div class="ctContent">
                        <div id="echartsSafe" ref="echarts1" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
                <div class="contentTop">
                    <div class="ctHead">
                        <div>按责任区域排名</div>
                    </div>
                    <div class="ctContent">
                        <div id="echartsSafe" ref="echarts2" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
                <div class="contentTop">
                    <div class="ctHead">
                        <div>安全隐患类型分析</div>
                    </div>
                    <div class="ctContent">
                        <div id="echartsSafe" ref="echarts3" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-one">
            <div class="tabList">
                <div>序号</div>
                <div>状态</div>
                <div>隐患级别</div>
                <div>隐患描述及要求</div>
                <div>整改时限</div>
                <div>检查人</div>
                <div>检查时间</div>
                <div>整改人</div>
                <div>分包单位</div>
                <div>操作</div>
            </div>
            <el-scrollbar class="listBox" ref="refScrollbar">
                <div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
                    <div>{{ index + 1 }}</div>
                    <div>{{ item.workerName }}</div>
                    <div class="list-img">
                        <el-image fit="contain" class="el-img" :src="BASEURL + '/image/' + item.fieldAcquisitionUrl"
                            :preview-src-list="[BASEURL + '/image/' + item.fieldAcquisitionUrl]">
                        </el-image>
                        <!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
                    </div>
                    <div>{{ item.phoneNumber }}</div>
                    <div>{{ item.personType == 1 ? item.teamName : item.personType == 2 ? item.departmentName : "" }}
                    </div>
                    <div>{{ item.phoneNumber }}</div>
                </div>
                <!-- <div class="notoDta" v-if="partyMemberList.length == 0">
                    <img src="@/assets/images/noData.png" alt="" />
                    <p>暂无数据</p>
                </div> -->
            </el-scrollbar>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
import type { TabsPaneContext } from "element-plus";
import { getSelectQualityStatisticsNumApi } from "@/api/modules/projectOverview";

import * as echarts from "echarts";
const echartsTest = ref();

let dataList = ref([
    {
        value: 30,
        show: true,
        name: "重大隐患",
        itemStyle: {
            normal: {
                color: "#EC6266",
                borderWidth: 20
            }
        }
    },
    {
        value: 70,
        show: true,
        name: "一般隐患",
        itemStyle: {
            normal: {
                color: "#6375C7",
                borderWidth: 20
            }
        }
    }
]);

const echarts1 = ref(null);
const echarts2 = ref(null);
const echarts3 = ref(null);


const store = GlobalStore();
const props = defineProps(["tip"]);
const BASEURL = import.meta.env.VITE_API_URL;
const dateTime = ref(null);
const calendarVal = ref(new Date());
const activeName = ref("first");
const activeIndex = ref("1" as any);
const onlineWorkList = ref([
    { name: "在职", value: 1 },
    { name: "离职", value: 2 }
]);
const enterpriseListData = ref([] as any);
const memberTypeList = ref([
    { name: "劳务人员", value: 1 },
    { name: "管理人员", value: 2 },
    { name: "临时人员", value: 3 }
]);
const alarmTypeList = ref(["报警", "预警"]);
let pageNo = ref(1 as any);
let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const deviceList = ref([] as any); // 设备列表
const searchForm = ref({
    memberType: "",
    belongCompany: "",
    workState: "",
    name: "",
    idCard: ""
});

const partyMemberList = ref({} as any);
const handleClick = (tab: TabsPaneContext, event: Event) => {
    //   console.log(tab, event)
    //   console.log('tab',tab.index)
    //   console.log('activeName',activeName.value)
    //   if(activeName.value === 'first') console.log('1')
    //   if(activeName.value === 'second') console.log('2')
    //   if(activeName.value === 'third') console.log('3')
    activeIndex.value = tab.index;
    console.log("activeIndex", activeIndex.value);
};
//获取企业列表
const getCompanyList = async () => {
    let data = {
        projectSn: store.sn,
        enterpriseName: "",
        userEnterpriseId: store.userInfo?.userEnterpriseId
    };
    const res: any = await getCompanyDataList(data);
    if (res.code == 200) {
        enterpriseListData.value = res.result;
    }
};
//获取数据
const getMemberCountList = async (tip: any) => {
    let requestData: any = {
        projectSn: store.sn,
        personType: searchForm.value.memberType, //人员类型
        enterpriseId: searchForm.value.belongCompany, //所属企业
        inserviceType: searchForm.value.workState, //在职状态
        idCard: searchForm.value.idCard, //身份证号
        workerName: searchForm.value.name, //姓名
        pageNo: tip == "search" ? 1 : pageNo.value,
        pageSize: 100
    };
    if (props.tip == "实时") {
        requestData.presence = 1;
    } else if (props.tip == "日累积") {
        requestData.attendance = 1;
    } else {
        requestData.inserviceType = 1;
    }
    const res: any = await getMemberInfoList(requestData);
    console.log("获取人员信息列表", res);
    if (tip == "more") {
        partyMemberList.value = partyMemberList.value.concat(res.result.records);
    } else {
        partyMemberList.value = res.result.records;
    }
    // 为图片拼接IP
    // partyMemberList.value.map((item:any) => {
    // 	item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
    // })
    if (res.result.pages == pageNo.value) {
        moreScroll.value = false;
    } else {
        pageNo.value = pageNo.value + 1;
    }
};

function Pie() {
    let dataArr = [];
    for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 10,
                itemStyle: {
                    normal: {
                        color: "#7cf4f1",
                        borderWidth: 0,
                        borderColor: "#7f6546"
                    }
                }
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 10,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            });
        }
    }
    return dataArr;
}

function drawEchart1() {
    let echartsTest = echarts.init(echarts1.value);
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        xAxis: {
            type: 'category',
            data: ['Mon11', 'Tue', 'Wed'],
            axisLabel: {
                color: "#fff",
                formatter: function (params: any) {
                    var val = "";
                    if (params.length > 4) {
                        val = params.substr(0, 4) + '...';
                        return val
                    } else {
                        return params
                    }
                }
            },
            axisTick: {
                // 轴刻度
                show: false,
                lineStyle: {
                    color: '#112F66',
                },

            },
            axisLine: {
                show: true,

                lineStyle: {
                    color: "#112F66"
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#112F66',
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "#fff",
            },
            axisTick: {
                // 轴刻度
                show: true,
                color: '#112F66',
            },
            axisLine: {
                show: true,
                // 轴线
                lineStyle: {
                    color: "#112F66"
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#112F66',
                }
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                data: [120, 200, 150],
                type: 'bar',
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: "#80f7ea"

                        },
                        {
                            offset: 1,
                            color: "#366ef3"
                        }
                    ])
                }
            }
        ]
    };
    echartsTest.setOption(option, true);
    window.addEventListener("resize", () => {
        console.log(echartsTest)
        echartsTest.resize();
    })
    console.log(echartsTest);
}

function drawEchart2() {
    let ageChart = echarts.init(echarts2.value);
    
    var data = [
  { code: "5#号楼", stock: "aaa", fundPost: "21.987691" },
  { code: "4#号楼", stock: "bbb", fundPost: "20.377176" },
  { code: "3#号楼", stock: "ccc", fundPost: "19.127404" },
  { code: "2#号楼", stock: "ddd", fundPost: "18.40882" },
  { code: "1#号楼", stock: "eee", fundPost: "17.980597" },
];
function contains(arr, dst) {
  var i = arr.length;
  while ((i -= 1)) {
    if (arr[i] == dst) {
      return i;
    }
  }
  return false;
}

let attackSourcesColor = [
   "#0E90E5",
    "#0E90E5",
     "#0E90E5",
      "#0E90E5",
];
let attackSourcesColor1 = [
  "#0E90E5",
  "#0E90E5",
  "#0E90E5",
  "#0E90E5",
  "#0E90E5",
];
let attaData = [];
let attaName = [];
let topName = [];
data.forEach((it, index) => {
  attaData[index] = parseFloat(it.fundPost).toFixed(2);
  attaName[index] = it.stock;
  topName[index] = `${it.code}`;
});
var salvProMax = []; //背景按最大值
for (let i = 0; i < attaData.length; i++) {
  salvProMax.push(attaData[0]);
}
function attackSourcesDataFmt(sData) {
  var sss = [];
  sData.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    sss.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return sss;
}

let option = {
//   backgroundColor: "#000",
  tooltip: {
    show: true,
    // backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
    textStyle: {
      fontSize: 16,
    },
  },
  color: ["#F7B731"],
  legend: {
    pageIconSize: [12, 12],
    itemWidth: 20,
    itemHeight: 10,
    textStyle: {
      //图例文字的样式
      fontSize: 10,
      color: "#fff",
    },
    selectedMode: false,
    // data: ["个人所得(亿元)"],
  },
  grid: {
    left: "2%",
    right: "2%",
    width: "100%",
    bottom: "2%",
    top: "8%",
    // containLabel: true,
  },
  xAxis: {
    type: "value",

    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisPointer: {
        label: {
          show: true,
          //margin: 30
        },
      },
      pdaaing: [5, 0, 0, 0],
      postion: "right",
      data: attaName,
      axisLabel: {
        margin: 30,
        fontSize: 10,
        align: "left",
        padding: [10, 0, 0, 0],
        color: "#000",
        rich: {
          nt1: {
            color: "#fff",
            backgroundColor: attackSourcesColor1[0],
            width: 13,
            height: 13,
            fontSize: 10,
            align: "center",
            borderRadius: 100,
            lineHeight: "5",
            padding: [0, 1, 2, 1],
            // padding:[0,0,2,0],
          },
          nt2: {
            color: "#fff",
            backgroundColor: attackSourcesColor1[1],
            width: 13,
            height: 13,
            fontSize: 10,
            align: "center",
            borderRadius: 100,
            padding: [0, 1, 2, 1],
          },
          nt3: {
            color: "#fff",
            backgroundColor: attackSourcesColor1[2],
            width: 13,
            height: 13,
            fontSize: 10,
            align: "center",
            borderRadius: 100,
            padding: [0, 1, 2, 1],
          },
          nt: {
            color: "#fff",
            backgroundColor: attackSourcesColor1[3],
            width: 13,
            height: 13,
            fontSize: 10,
            align: "center",
            lineHeight: 3,
            borderRadius: 100,
            padding: [0, 1, 2, 1],
            lineHeight: 5,
          },
        },
        // formatter: function (value, index) {
        //   index = contains(attaName, value) + 1;
        //   if (index - 1 < 3) {
        //     return ["{nt" + index + "|" + index + "}"].join("\n");
        //   } else {
        //     return ["{nt|" + index + "}"].join("\n");
        //   }
        // },
      },
    },
    {
        type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        margin: 30,
         padding: [-120, 0, 0, -100],
        textStyle: {
          color: "#fff",
          fontSize: "10",
        },
      },
      data: attackSourcesDataFmt(attaName),
    },
    {
      //名称
      type: "category",
      offset: -10,
      position: "left",
      axisLabel: {
        color: `#fff`,
        fontSize: 10,
      },
      axisLine: {
        show: false,
      },
      inverse: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: ["#fff"],
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 32,
        fontSize: 10,
      },
      data: topName,
    },
  ],
  series: [
    {
      zlevel: 1,
      // name: "个人所得(亿元)",
      type: "bar",
      barWidth: "15px",
      animationDuration: 1500,
      data: attackSourcesDataFmt(attaData),
      align: "center",
      itemStyle: {
        normal: {
          // barBorderRadius: 10,
        },
      },
      label: {
        show: false,
        fontSize: 10,
        color: "#fff",
        textBorderWidth: 2,
        padding: [2, 0, 0, 0],
      },
    },
    {
      // name: "个人所得(亿元)",
      type: "bar",
      barWidth: 13,
      barGap: "-50%",
      margin: "30",
      data: salvProMax,
      textStyle: {
        //图例文字的样式
        fontSize: 10,
        color: "#fff",
      },
      itemStyle: {
        normal: {
          color: "#06407B",
          //width:"100%",
          fontSize: 10,
          // barBorderRadius: 30,
        },
      },
    },
  ],
};


    ageChart.setOption(option, true);
    window.addEventListener("resize", () => {
        ageChart.resize();
    })
}

function drawEchart3() {
    console.log(echarts3.value);

    echartsTest.value = echarts.init(echarts3.value);
    let option = {
        tooltip: {
            trigger: "item"
        },
        title: {
            text: "2",
            subtext: "超期未整改数",
            x: "24%",
            y: "center",
            textAlign: "center",
            textStyle: {
                color: "#fff",
                fontSize: 26,
                fontWeight: "normal",
                // align: "center",
                fontFamily: "sadigitalNumber"
            },
            subtextStyle: {
                color: "#ccc",
                fontSize: 12,
                fontWeight: "normal"
                // align: "center"
            }
        },
        legend: {
            selectedMode: true, // 取消图例上的点击事件
            icon: "rect",
            type: "plain",
            orient: "vertical",
            left: "55%",
            top: "35%",
            align: "left",
            itemGap: 30,
            itemWidth: 8, // 设置宽度
            itemHeight: 7, // 设置高度
            symbolKeepAspect: false,
            textStyle: {
                color: "#000",
                rich: {
                    name: {
                        verticalAlign: "right",
                        align: "left",
                        fontSize: 14,
                        color: "#FFFFFF"
                    },
                    value: {
                        align: "left",
                        fontSize: 14,
                        color: "#FFFFFF"
                    }
                }
            },
            data: dataList.value.map(item => {
                if (item.show) {
                    return item.name;
                }
            }),
            formatter: function (data) {
                if (dataList.value && dataList.value.length) {
                    for (var i = 0; i < dataList.value.length; i++) {
                        if (data === dataList.value[i].name) {
                            var value = dataList.value[i].value;
                            var percentage = value + "%";
                            return "{name| " + data + "}  {gap|       }" + "{value|" + value + " " + "}";
                        }
                    }
                }
            }
        },
        series: [
            // 外侧光线
            {
                name: "",
                type: "gauge",
                center: ["25%", "55%"],
                radius: "90%",
                startAngle: 235,
                endAngle: -50,
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: [
                            [
                                100 / 100,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: "#526277"
                                    },
                                    {
                                        offset: 0.25,
                                        color: "rgba(4, 14, 54,0.4)"
                                    },
                                    {
                                        offset: 0.7,
                                        color: "rgba(4, 14, 54,0.4)"
                                    },
                                    {
                                        offset: 1,
                                        color: "#526277"
                                    }
                                ])
                            ],
                            [1, "rgba(255,255,255,0)"]
                        ]
                    }
                },

                axisTick: {
                    show: 0
                },
                splitLine: {
                    show: 0
                },
                axisLabel: {
                    show: 0
                },
                pointer: {
                    show: 0
                },
                detail: {
                    show: 0
                }
            },
            {
                name: "",
                type: "gauge",
                center: ["25%", "55%"],
                radius: "80%",
                startAngle: 245,
                endAngle: -115,
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: [
                            [
                                200 / 100,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 1,
                                        color: "#52bef0"
                                    },
                                    {
                                        offset: 0,
                                        color: "#13356b"
                                    }
                                ])
                            ],
                            [1, "rgba(255,255,255,0)"]
                        ]
                    }
                },

                axisTick: {
                    show: 0
                },
                splitLine: {
                    show: 0
                },
                axisLabel: {
                    show: 0
                },
                pointer: {
                    show: 0
                },
                detail: {
                    show: 0
                }
            },
            {
                name: "",
                type: "pie",
                radius: [65, 75],
                center: ["25%", "55%"],
                hoverAnimation: true,
                itemStyle: {
                    borderRadius: 10,
                    borderWidth: 10
                },
                label: {
                    show: false,
                    position: "center"
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },
                labelLine: {
                    show: false
                },
                data: dataList.value
            },
            {
                type: "pie",
                radius: ["57", "60"],
                center: ["25%", "55%"],
                label: {
                    show: false
                },
                data: Pie()
            }
        ]
    }
    echartsTest.value.setOption(option, true);
    window.addEventListener("resize", () => {
        console.log(echartsTest)
        echartsTest.value.resize();
    })
    console.log(echartsTest.value);
}

const getSafeInfo = async () => {
    const res: any = await getSelectQualityStatisticsNumApi({ projectSn: store.sn });
    console.log("获取隐患智能分析", res);
    // safeData.value = res.result;
    // dataList.value[0].value = res.result.rectificationNum;
    // dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
    // questionTotal.value = res.result.totalNum;
    // drawEchart();
};

onMounted(async () => {
    await getSafeInfo();
    drawEchart1();
    drawEchart2();
    drawEchart3();
    // await getCompanyList();
    // await getMemberCountList("search");
    refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
        // console.log("滚动容器", e);
        const scrollTop = e.target.scrollTop;
        const scrollHeight = e.target.scrollHeight;
        const clientHeight = e.target.clientHeight;
        // console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
        // 向上加载更多
        if (scrollTop >= scrollHeight - clientHeight - 1) {
            // console.log("加载更多");
            if (moreScroll.value) {
                getMemberCountList("more");
            }
        }
    });
});
</script>

<style lang="scss" scoped>
.content {
    padding: 0 20px;
    height: 35%;

    .content-box {
        display: flex;
        flex-direction: row;

        .contentTop {
            margin-top: 10px;
            width: 33%;
            height: 100%;

            .ctHead {
                // background-color: #002f69;
                padding-bottom: 5px;
                color: #fff;
                height: 15%;
                font-size: 16px;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;

                text {
                    font-size: 24px;
                    color: #fc4c4c;
                }
            }

            .ctContent {
                height: 100%;
                // background-color: darkred;
            }
        }
    }

}

@mixin flex {
    display: flex;
    align-items: center;
}

.political-outlook {
    height: 97%;
    margin: 0 60px;

    .content {
        // height: 95%;
        width: 100%;
        margin-top: 30px;
        // background: url("@/assets/images/cardImg.png") no-repeat;
        background-size: 100% 100%;
        padding: 20px 15px;

        .top-statistics {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(3, 1fr);
            color: white;
            margin: 0 5%;

            .statistics-item {
                width: 240px;
                height: 95px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                position: relative;

                .title {
                    position: absolute;
                    top: 4%;
                    left: 4%;
                }

                &-content {
                    display: inline-block;
                    width: 50%;
                    height: auto;
                    text-indent: 1.5em;
                }

                &-content:nth-child(2) {
                    margin-top: 8%;
                }

                &-content:nth-child(3) {
                    margin-top: 8%;
                }
            }

            .statistics-item:nth-child(1) {
                background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
                background-size: 100% 100%;
            }

            .statistics-item:nth-child(2) {
                background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
                background-size: 100% 100%;
            }

            .statistics-item:nth-child(3) {
                background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
                background-size: 100% 100%;
            }

            .statistics-item:nth-child(4) {
                background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
                background-size: 100% 100%;
            }

            .statistics-item:nth-child(5) {
                background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
                background-size: 100% 100%;
            }

            .statistics-item:nth-child(6) {
                background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
                background-size: 100% 100%;
            }
        }

        .top-data-show {
            display: flex;

            .top-left {
                width: 60%;
                display: flex;
                flex-direction: column;

                :deep() {
                    .el-calendar {
                        background-color: transparent;
                    }

                    .el-calendar__header {
                        display: none;
                    }

                    .el-calendar__body {
                        padding: 0px;
                    }

                    .el-calendar-table thead {
                        background-color: #143a85;

                        th {
                            color: white;
                        }

                        th:nth-child(1) {
                            border-left: 1px solid #284a8e;
                        }

                        th:last-child {
                            border-right: 1px solid #284a8e;
                        }
                    }

                    .el-calendar-table .el-calendar-day:hover {
                        color: white;
                        background-color: #143a85;
                    }

                    .el-calendar-table td.is-today {
                        color: white;
                        background-color: #143a85;
                    }

                    .el-calendar-table tbody {
                        .el-calendar-table__row {

                            .prev,
                            .current,
                            .next {
                                border-color: #35538c;
                                color: white;

                                .el-calendar-day {
                                    text-align: center;
                                    height: 40px;
                                }
                            }
                        }
                    }
                }
            }

            .top-right {
                width: 40%;
                color: white;

                .right-title-data {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    >div {
                        span:nth-child(1) {
                            font-size: 18px;
                            margin-right: 5px;
                        }
                    }

                    >span {
                        margin-top: 5px;
                    }
                }

                .right-inspect-data {
                    margin-top: 12%;

                    .inspect-data-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 3%;

                        .inspect-style {
                            width: 10px;
                            height: 10px;
                            border: 1px solid #fff;
                            margin-right: 5px;
                            margin-top: 2px;
                        }

                        .inspect-one {
                            background-color: #EE1A1A;
                        }

                        .inspect-two {
                            background-color: #079CAF;
                        }

                        .inspect-three {
                            background-color: #FFDF00;
                        }

                        >span:nth-child(2) {
                            margin-right: auto
                        }

                        >span:nth-child(3) {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }



        :deep() {
            .el-tabs__item {
                color: white;
            }

            .el-tabs__item.is-active {
                color: var(--el-color-primary);
            }
        }
    }
}

.table-one {
    margin-top: 40px;
    height: 50%;

    .tabList {
        display: flex;
        // width: 100%;
        height: 10%;
        background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
        background-size: 100% 100%;
        // position: absolute;
        left: 75.5%;
        top: 75%;
        color: #ccc;
        font-size: calc(100vw * 14 / 1920);
        line-height: 30px;
        align-items: center;
        margin-top: 1%;

        div {
            text-align: center;
            width: 17%;
        }
    }

    .listBox {
        height: 69%;

        .listStyle {
            display: flex;
            align-items: center;
            text-align: center;
            color: #fff;
            font-size: 12px;
            margin-bottom: 5px;

            .list-img {
                .el-img {
                    width: 30px;
                    height: 30px;

                    img {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            div {
                width: 17%;
                white-space: nowrap; //单行
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .listStyle:hover {
            background: #091f3f;
        }
    }
}

.notoDta {
    top: 35%;
    width: 20%;
    left: 40%;
    position: absolute;
    text-align: center;

    img {
        width: 40%;
        margin: 5% 30%;
    }

    p {
        color: #fff;
        font-size: calc(100vw * 14 / 1920);
        margin: -6% 37%;
    }
}

// element 组件样式
:deep() {

    .el-date-editor .el-range-input,
    .el-range-separator {
        color: #fff;
    }

    .el-input__wrapper {
        background: #112d59;
    }

    .el-input__inner {
        color: #fff;
    }

    .el-button {
        background-color: #2758c0;
        color: white;
        border-color: transparent;
    }
}

// ::v-deep .el-select .el-input .el-select__caret {
// 	color: #fff;
// }</style>
