<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" class="form">
      <div class="left">
        <el-form-item label="部门" prop="ipaddr">
          <el-select
            v-model="queryParams.ipaddr"
            placeholder="青选择部门"
            style="width: 320px"
          >
            <el-option
              v-for="item in 3"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="userName">
          <el-date-picker
            style="width: 320px"
            v-model="value2"
            type="month"
            placeholder="请选择时间"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
          />
        </el-form-item>
      </div>
      <div class="right">
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-row :gutter="10" class="rowbox">
      <el-col :span="6">
        <el-card class="quantity">
          <div class="num">32</div>
          <div class="title">设备总套数</div>
          <div class="ul">
            <div class="item">
              <p>64</p>
              <span>在线</span>
            </div>
            <div class="item">
              <p>0</p>
              <span>离线</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="quantity">
          <div class="num">32</div>
          <div class="title">过车数量</div>
          <div class="ul">
            <div class="item">
              <p>64</p>
              <span>同比</span>
            </div>
            <div class="item">
              <p>0</p>
              <span>环比</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="earlyWarning">
            <div class="lfet">
              <div class="item">
                <h3>1290</h3>
                <p>预警数量</p>
                <div>预警比：<span>16%</span></div>
              </div>
              <div class="item">
                <h3>1290</h3>
                <p>预警数量</p>
                <div>预警比：<span>16%</span></div>
              </div>
            </div>
            <div id="echarts1" ref="echarts1"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="rowbox">
      <el-col :span="6">
        <el-card class="cardtime">
          <div class="title">最近7天执法时长统计</div>
          <div id="echarts2" ref="echarts2"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="cardtype">
            <div class="left">
              <div class="title">超速类型数据统计</div>
              <div id="echarts3" ref="echarts3"></div>
            </div>
            <div class="right">
              <div class="item">
                <div class="title">超速10%以下</div>
                <div class="num">629</div>
              </div>
              <div class="item">
                <div class="title">超速10%-20%</div>
                <div class="num">629</div>
              </div>
              <div class="item">
                <div class="title">超速20%-50%</div>
                <div class="num">629</div>
              </div>
              <div class="item">
                <div class="title">超速50%以上</div>
                <div class="num">629</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="speeding">
          <div class="title">最近7天车辆超速情况统计</div>
          <div id="echarts4" ref="echarts4"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="bottomdata">
      <div class="top">
        <div class="left">
          <div class="on">大队设备使用情况</div>
          <div>中队设备使用情况</div>
        </div>
        <div class="right">
            <div class="day">
                 <div class="title">时间范围：</div>
            <el-date-picker
              style="width: 320px"
              v-model="value2"
              type="month"
              placeholder="请选择时间"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
            />
            </div>
           
        
         
            <el-input
              v-model="input2"
              style="width: 240px"
              placeholder="Please Input"
              :suffix-icon="Search"
            />
         

          <el-button type="primary" plain>导出Ecxle表格</el-button>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column sortable  prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { Right, Search } from "@element-plus/icons-vue";
import { ref } from "vue";

const queryParams = ref({
  ipaddr: "",
  userName: "",
});
const echarts1 = ref("");
const echarts2 = ref("");
const echarts3 = ref("");
const echarts4 = ref("");
function resetQuery() {}
function handleQuery() {}
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const shortcuts = [
  {
    text: "昨天",
    value: new Date(),
  },
  {
    text: "最近7天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "最近30天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

// const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");

function init() {
  const drawechar1 = echarts.init(echarts1.value, "macarons");
  drawechar1.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      top: 15,
      right: 0,
      bottom: 15,
      left: 0,
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["预警数量", "查扣数量"],
    },
    series: [
      {
        type: "bar",
        barWidth: 24,
        data: [
          {
            value: 200,
            itemStyle: {
              color: "#FF8606",
            },
          },
          {
            value: 500,
            itemStyle: {
              color: "#C307B6",
            },
          },
        ],
      },
    ],
  });

  const drawechar2 = echarts.init(echarts2.value, "macarons");
  drawechar2.setOption({
    color: ["#4D7BFF"],
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    legend: {
      show: false,
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    grid: {
      top: 40,
      right: 0,
      bottom: 15,
      left: 0,
      containLabel: true,
    },
    series: [
      {
        barWidth: 24,
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  });

  const drawechar3 = echarts.init(echarts3.value, "macarons");
  drawechar3.setOption({
    legend: {
      show: false,
    },
    grid: {
      right: 0,
      left: 0,
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: "90%",
        labelLine: {
          show: false,
        },

        label: {
          show: false,
          position: "center",
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  });

  const drawechar4 = echarts.init(echarts4.value, "macarons");
  drawechar4.setOption({
    color: ["#4D7BFF", "#FF8606", "#FF2A06", "#C307B6"],

    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    legend: {
      right: 0,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    grid: {
      top: 40,
      right: 0,
      bottom: 15,
      left: 0,
      containLabel: true,
    },
    series: [
      {
        barWidth: 15,
        name: "超速10%以下",
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
      {
        name: "超速10%-20%",
        barWidth: 15,
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
      {
        name: "超速20%-50%",
        barWidth: 15,
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
      {
        name: "超速50%以上",
        barWidth: 15,
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  });
}
nextTick(() => {
  init();
});
function resize() {
  //  commandstatsIntance.resize()
  //       usedmemoryInstance.resize()
}
window.addEventListener("resize", () => {
  resize();
});
</script>

<style lang="scss" scoped>
.rowbox {
  margin-bottom: 10px;
}
.form {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quantity {
  .num {
    font-size: 42px;
    color: #4d7bff;
  }
  .title {
    font-size: 14px;
    color: #5c667b;
  }
  .ul {
    display: flex;
    gap: 20px;
    .item {
      flex: 1;
      background: #f0f4ff;
      text-align: center;
      padding: 15px 0;
      border-radius: 4px;
      margin-top: 20px;
      p {
        font-size: 22px;
        margin: 0px;
        margin-bottom: 5px;
      }
      span {
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
.earlyWarning {
  display: flex;
  gap: 20px;

  .lfet {
    display: flex;
    gap: 20px;
    flex: 1;

    .item {
      padding: 15px;
      border-radius: 4px;
      flex: 1;
      background: #fff2e4;
      &:nth-of-type(2) {
        background: rgba(195, 7, 182, 0.1);
      }
      h3 {
        font-size: 42px;
        color: #333333;
        margin: 0px;
        font-weight: 800;
      }
      p {
        font-size: 14px;
        color: #5c667b;
        margin-bottom: 30px;
      }
      div {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        span {
          color: #333333;
          font-size: 20px;
          font-weight: 800;
        }
      }
    }
  }
  #echarts1 {
    flex: 1;
  }
}
.cardtime {
  .title {
    font-weight: 600;
    font-size: 16px;
    color: #333333;
  }
  #echarts2 {
    width: 100%;
    height: 300px;
  }
}
.cardtype {
  display: flex;
  gap: 20px;
  .left {
    flex: 1;
    .title {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
    }
    #echarts3 {
      height: 290px;
      width: 100%;
    }
  }
  .right {
    flex: 1;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    .item {
      width: 100%;
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px 15px;
      .title {
        font-size: 14px;
        color: #5c667b;
        padding-left: 20px;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0px;
          top: 50%;
          width: 15px;
          height: 15px;
          background: #000;
          border-radius: 15px;
          transform: translate(0, -50%);
          border: 5px solid #e6eff7;
        }
      }
      &:nth-of-type(1) {
        .title::after {
          background: #0691ff;
        }
      }
      &:nth-of-type(2) {
        .title::after {
          background: #ff8606;
        }
      }
      &:nth-of-type(3) {
        .title::after {
          background: #ff2a06;
        }
      }
      &:nth-of-type(4) {
        .title::after {
          background: #c307b6;
        }
      }
      .num {
        font-size: 24px;
        color: #333333;
        margin-top: 3px;
        margin-left: 20px;
      }
    }
  }
}
.speeding {
  position: relative;
  .title {
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    position: absolute;
  }
  #echarts4 {
    width: 100%;
    height: 320px;
  }
}
.bottomdata {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    .left {
      display: flex;
      align-items: center;
      background: #eff4ff;
      border-radius: 3px;
      overflow: hidden;
      div {
        padding: 10px 15px;
      }
      .on {
        background: #4d7bff;
        color: #fff;
      }
    }
    .right {
      display: flex;
      gap: 15px;
      align-items: center;
      .day{
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
