repaireschool_guanli/src/views/home/home.vue

<template>
  <div class="content-box">
    <div class="item">
      <div class="item_li">
        <div class="item_card" v-for="i in topTitleData" :key="i">
          <div class="top">
            <span>{{ i.name }}</span>
            <div class="cancel" v-if="i.name == '已完成'">
              <span>已完成 :&nbsp; {{ accomplishCount }}</span>
            </div>
            <div class="cancel" v-else>
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="bottom top">
            <span>{{ i.value }}</span>
            <div class="cancel" v-if="i.name == '已完成'">
              <span>已取消 :&nbsp; {{ cancelCount }}</span>
              <span>已关单 :&nbsp; {{ shutCount }}</span>
            </div>
            <div class="cancel" v-else>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="cartogram">
        <!-- 报修分析统计 -->
        <div class="annulus" ref="annulus">
          <div class="title">报修分析统计</div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day1" :key="index" @click="annulusBtn(index)"
                :class="tabIndex1 == index ? 'li_active' : ''">
                {{ i }}
              </li>
            </ul>
          </div>
          <div id="annulus"></div>
        </div>
        <!-- 报修趋势分析 -->
        <div class="annulus">
          <div class="title">报修趋势分析</div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day2" :key="index" @click="brokenBtn(index)"
                :class="tabIndex2 == index + 1 ? 'li_active' : ''">
                {{ i }}
              </li>
            </ul>
          </div>
          <div id="broken"></div>
        </div>
        <!-- 表格3  报修校区统计-->
        <div class="table1">
          <div class="title">报修校区统计</div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day3" :key="index" @click="table3Btn(index)"
                :class="tabIndex3 == index ? 'li_active' : ''">
                {{ i.name }}
              </li>
            </ul>
          </div>
          <div class="table">
            <el-table :data="tableData3.list" height="200" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column type="index" align="center" label="序号" />
              <el-table-column prop="schoolName" align="center" label="校区" />
              <el-table-column prop="ordersTotal" align="center" label="工单总数" />
              <el-table-column prop="ordersCompensation" align="center" label="有偿" />
              <el-table-column prop="ordersGratis" align="center" label="无偿" />
              <el-table-column prop="totalPrice" align="center" label="耗材总费用" />
            </el-table>
          </div>
        </div>
      </div>
      <!-- 第二排表格 -->
      <div class="cartogram">
        <!-- 表格1 总数据汇总分析 -->
        <div class="annulus table2">
          <div class="title">
            <span>总数据汇总分析</span>
          </div>
          <div class="table">
            <el-table :stripe="true" :data="tableData5.list" height="240" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column prop="dateName" align="center" label="时间" />
              <el-table-column prop="totalCount" align="center" label="工单总数" />
              <el-table-column prop="checkCount" align="center" label="待审核" />
              <el-table-column prop="receivingCount" align="center" label="待接单" />
              <el-table-column prop="maintainCount" align="center" label="维修中" />
              <el-table-column prop="disposeCount" align="center" label="待处理" />
              <el-table-column prop="affirmCount" align="center" label="待确认" />
              <el-table-column prop="accomplishCount" align="center" label="已完成" />
              <el-table-column prop="shutCount" align="center" label="已关单" />
              <el-table-column prop="cancelCount" align="center" label="已取消" />
            </el-table>
          </div>
        </div>
        <!-- 表格2  报修区域统计-->
        <div class="table1 table3">
          <div class="title">
            <span>报修区域统计</span>
            <div class="import" @click="importTable4">
              <img src="@/assets/importBlue.png" alt="" />
              <span>导出</span>
            </div>
          </div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day4" :key="index" @click="table4Btn(index)"
                :class="tabIndex4 == index ? 'li_active' : ''">
                {{ i.name }}
              </li>
            </ul>
          </div>
          <div class="table" v-loading="table4Load">
            <el-table :stripe="true" ref="table4" :data="tableData4.list" height="200" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column type="index" align="center" label="序号" />
              <el-table-column prop="schoolName" align="center" label="校区" />
              <el-table-column align="center" label="报修区域">
                <template #default="{ row }">
                  <span>{{ row.areaNames }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="ordersTotal" align="center" label="工单总数" width="80" />
              <el-table-column prop="ordersCompensation" align="center" label="有偿" width="60" />
              <el-table-column prop="ordersGratis" align="center" label="无偿" width="60" />
              <el-table-column prop="totalPrice" align="center" label="耗材总费用" />
            </el-table>
          </div>
        </div>
      </div>
      <!-- 第三排表格 -->
      <div class="cartogram cartogram3">
        <!-- 表格4 维修师傅效率统计 黄家湖-->
        <div class="annulus table2 table4">
          <div class="title">
            <div style="display: flex;align-items: center;">
              <span>黄家湖维修师傅效率统计</span>
              <el-input v-model="searchInput8" @input="searchTable8" placeholder="请搜索关键字" size="small"
                style="width: 150px;margin-left: 15px;"></el-input>
            </div>
            <div class="import" @click="importTable8">
              <img src="@/assets/importBlue.png" alt="" />
              <span>导出</span>
            </div>
          </div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day8" :key="index" @click="table8Btn(index)"
                :class="tabIndex8 == index ? 'li_active' : ''">
                {{ i.name }}
              </li>
            </ul>
          </div>
          <div class="table" v-loading="table8Load">
            <el-table ref="table8" :stripe="true" :data="tableData8.list" height="200" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column type="index" align="center" label="序号" />
              <!-- <el-table-column prop="schoolName" align="center" label="校区" /> -->
              <el-table-column prop="name" align="center" label="姓名">
                <template #default="{ row }">
                  <div style="color: rgb(111, 182, 184);cursor: pointer;" @click="cliName8(row)">{{ row.name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="workOrderTotal" align="center" label="工单总数" />
              <el-table-column prop="degreePraise" align="center" label="好评率" />
              <!-- <el-table-column prop="timeOut" align="center" label="超时率" /> -->
              <!-- <el-table-column prop="answer" align="center" width="130" label="平均响应时长（分）" /> -->
              <!-- <el-table-column prop="maintain" align="center" width="130" label="平均维修时长（分）" /> -->
              <el-table-column prop="totalPrice" align="center" width="130" label="耗材总费用（元）" />
            </el-table>
          </div>
        </div>
        <!-- 表格4 维修师傅效率统计 墨轩湖-->
        <div class="annulus table2 table4 Mtable">
          <div class="title">
            <div style="display: flex;align-items: center;">
              <span>墨轩湖维修师傅效率统计</span>
              <el-input v-model="searchInput6" @input="searchTable6" placeholder="请搜索关键字" size="small"
                style="width: 150px;margin-left: 15px;"></el-input>
            </div>
            <div class="import" @click="importTable6">
              <img src="@/assets/importBlue.png" alt="" />
              <span>导出</span>
            </div>
          </div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day6" :key="index" @click="table6Btn(index)"
                :class="tabIndex6 == index ? 'li_active' : ''">
                {{ i.name }}
              </li>
            </ul>
          </div>
          <div class="table" v-loading="table6Load">
            <el-table ref="table6" :stripe="true" :data="tableData6.list" height="200" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column type="index" align="center" label="序号" />
              <!-- <el-table-column prop="schoolName" align="center" label="校区" /> -->
              <el-table-column prop="name" align="center" label="姓名">
                <template #default="{ row }">
                  <div style="color: rgb(111, 182, 184);cursor: pointer;" @click="cliName6(row)">{{ row.name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="workOrderTotal" align="center" label="工单总数" />
              <el-table-column prop="degreePraise" align="center" label="好评率" />
              <!-- <el-table-column prop="timeOut" align="center" label="超时率" /> -->
              <!-- <el-table-column prop="answer" align="center" width="130" label="平均响应时长（分）" /> -->
              <!-- <el-table-column prop="maintain" align="center" width="130" label="平均维修时长（分）" /> -->
              <el-table-column prop="totalPrice" align="center" width="130" label="耗材总费用（元）" />
            </el-table>
          </div>
        </div>
        <!-- 表格5 维修物品统计-->
        <div class="table1 table5">
          <div class="title">
            <span>维修物品统计</span>
            <div class="import" @click="importTable7">
              <img src="@/assets/importBlue.png" alt="" />
              <span>导出</span>
            </div>
          </div>
          <div class="bottom">
            <ul>
              <li v-for="(i, index) in day7" :key="index" @click="table7Btn(index)"
                :class="tabIndex7 == index ? 'li_active' : ''">
                {{ i.name }}
              </li>
            </ul>
          </div>
          <div class="table" v-loading="table7Load">
            <el-table :stripe="true" ref="table7" :data="tableData7.list" height="200" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              textAlign: 'center',
            }">
              <el-table-column type="index" align="center" label="序号" />
              <el-table-column prop="articleName" align="center" label="名称" />
              <el-table-column prop="ordersTotal" align="center" label="工单总数" />
              <el-table-column prop="ordersCompensation" align="center" label="有偿" />
              <el-table-column prop="ordersGratis" align="center" label="无偿" />
              <el-table-column prop="totalPrice" align="center" label="耗材总费用" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <el-dialog class="reply" v-model="nameVisible6" :close-on-click-modal="false" :close-on-press-escape="false"
      title="师傅详情" align-center width="820" :before-close="cancelName6">
      <div class="reply">
        <div class="content">
          <table border>
            <tr>
              <td>姓名</td>
              <td>工单总数</td>
              <td>好评率</td>
              <td>超时率</td>
              <td>平时响应时长（分）</td>
              <td>平时维修时长（分）</td>
              <td>耗材总费用（元）</td>
            </tr>
            <tr>
              <td>{{ nameList6.name }}</td>
              <td>{{ nameList6.workOrderTotal }}</td>
              <td>{{ nameList6.degreePraise }}</td>
              <td>{{ nameList6.timeOut }}</td>
              <td>{{ nameList6.answer }}</td>
              <td>{{ nameList6.maintain }}</td>
              <td>{{ nameList6.totalPrice }}</td>
            </tr>
          </table>
          <!-- <div class="nameInfo">姓名: <span>{{ nameList.name }}</span></div>
          <div class="nameInfo">校区: <span>{{ nameList.schoolName }}</span></div>
          <div class="nameInfo">工单总数: <span> {{ nameList.workOrderTotal }}</span></div>
          <div class="nameInfo">好评率: <span>{{ nameList.degreePraise }}</span></div> -->
        </div>
        <!-- <div class="options">
          <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
            确定
          </el-button>
          <el-button @click="cancelName">取消</el-button>
        </div> -->
      </div>
    </el-dialog>
    <el-dialog class="reply" v-model="nameVisible8" :close-on-click-modal="false" :close-on-press-escape="false"
      title="师傅详情" align-center width="820" :before-close="cancelName8">
      <div class="reply">
        <div class="content">
          <table border>
            <tr>
              <td>姓名</td>
              <td>工单总数</td>
              <td>好评率</td>
              <td>超时率</td>
              <td>平时响应时长（分）</td>
              <td>平时维修时长（分）</td>
              <td>耗材总费用（元）</td>
            </tr>
            <tr>
              <td>{{ nameList8.name }}</td>
              <td>{{ nameList8.workOrderTotal }}</td>
              <td>{{ nameList8.degreePraise }}</td>
              <td>{{ nameList8.timeOut }}</td>
              <td>{{ nameList8.answer }}</td>
              <td>{{ nameList8.maintain }}</td>
              <td>{{ nameList8.totalPrice }}</td>
            </tr>
          </table>
          <!-- <div class="nameInfo">姓名: <span>{{ nameList.name }}</span></div>
          <div class="nameInfo">校区: <span>{{ nameList.schoolName }}</span></div>
          <div class="nameInfo">工单总数: <span> {{ nameList.workOrderTotal }}</span></div>
          <div class="nameInfo">好评率: <span>{{ nameList.degreePraise }}</span></div> -->
        </div>
        <!-- <div class="options">
          <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
            确定
          </el-button>
          <el-button @click="cancelName">取消</el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, reactive, nextTick, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 顶部数据
const topTitleData = ref([]); // 循环数据
const accomplishCount = ref(); // 已完成
const shutCount = ref(); // 已关单
const cancelCount = ref(); // 已取消

// 圆环统计图
const annulus = ref();
const day1 = ["全部", "本年", "本月", "本周", "今天"]; // 环形统计图按钮
let tabIndex1 = ref(2);
const echartsData1 = ref([]);

// 折现统计图
const day2 = ["本年", "本月", "本周", "今天"]; // 折现统计图按钮
let tabIndex2 = ref(2);

// 总数据汇总分析
const day3 = [
  {
    name: "全部",
    value: 0,
  },
  {
    name: "本年",
    value: 1,
  },
  {
    name: "本月",
    value: 2,
  },
  {
    name: "本周",
    value: 3,
  },
  {
    name: "今天",
    value: 4,
  },
];
let tabIndex3 = ref(2);
const tableData3 = reactive({
  list: [
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
  ],
});

// 报修区域统计(---------------)
const table4 = ref();
const day4 = [
  {
    name: "全部",
    value: 0,
  },
  {
    name: "本年",
    value: 1,
  },
  {
    name: "本月",
    value: 2,
  },
  {
    name: "本周",
    value: 3,
  },
  {
    name: "今天",
    value: 4,
  },
];
let tabIndex4 = ref(2); // 表格4
let table4CurrentPage = ref(1);
let table4pageCount = ref(10);
let table4Total = ref();
const table4Load = ref(false);
const scrolltop4 = ref(false); // 控制切换日期滚动条置顶
const tableData4 = reactive({
  list: [],
});

// 维修师傅效率统计 黄家湖（---------------）
const table8 = ref();
const day8 = [
  {
    name: "全部",
    value: 0,
  },
  {
    name: "本年",
    value: 1,
  },
  {
    name: "本月",
    value: 2,
  },
  {
    name: "本周",
    value: 3,
  },
  {
    name: "今天",
    value: 4,
  },
];
let tabIndex8 = ref(2); // 表格4
let table8CurrentPage = ref(1);
let table8pageCount = ref(10);
let table8Total = ref();
const table8Load = ref(false);
const scrolltop8 = ref(false); // 控制切换日期滚动条置顶
const tableData8 = reactive({
  list: [
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
  ],
});
const nameVisible8 = ref(false);// 点击名字弹窗
const nameList8 = reactive({
  workOrderTotal: "",// 工单总数
  degreePraise: "",// 好评率
  name: "",// 名字
  timeOut: "",// 超时率
  answer: "",// 平均响应时长（分）
  maintain: "",// 平均维修时长（分）
  totalPrice: "", // 耗材总费用（元）
})
const searchInput8 = ref() // 搜索关键字


// 维修师傅效率统计 墨轩湖（---------------）
const table6 = ref();
const day6 = [
  {
    name: "全部",
    value: 0,
  },
  {
    name: "本年",
    value: 1,
  },
  {
    name: "本月",
    value: 2,
  },
  {
    name: "本周",
    value: 3,
  },
  {
    name: "今天",
    value: 4,
  },
];
let tabIndex6 = ref(2); // 表格4
let table6CurrentPage = ref(1);
let table6pageCount = ref(10);
let table6Total = ref();
const table6Load = ref(false);
const scrolltop6 = ref(false); // 控制切换日期滚动条置顶
const tableData6 = reactive({
  list: [
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
  ],
});
const nameVisible6 = ref(false);// 点击名字弹窗
const nameList6 = reactive({
  workOrderTotal: "",// 工单总数
  degreePraise: "",// 好评率
  name: "",// 名字
  timeOut: "",// 超时率
  answer: "",// 平均响应时长（分）
  maintain: "",// 平均维修时长（分）
  totalPrice: "", // 耗材总费用（元）
})
const searchInput6 = ref() // 搜索关键字

// 维修物品统计（---------------）
const table7 = ref();
const day7 = [
  {
    name: "全部",
    value: 0,
  },
  {
    name: "本年",
    value: 1,
  },
  {
    name: "本月",
    value: 2,
  },
  {
    name: "本周",
    value: 3,
  },
  {
    name: "今天",
    value: 4,
  },
];
let tabIndex7 = ref(2); // 表格4
let table7CurrentPage = ref(1);
let table7pageCount = ref(10);
let table7Total = ref();
const table7Load = ref(false);
const scrolltop7 = ref(false); // 控制切换日期滚动条置顶
const tableData7 = reactive({
  list: [
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
  ],
});
// 总数据汇总分析
const tableData5 = reactive({
  list: [
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },
    {
      name: "黄家湖校区",
      address: 111,
    },

    {
      name: "黄家湖校区",
      address: 111,
    },
  ],
});

// 初始化统计图
// 环形图按钮（------------------------------）
const annulusBtn = (index) => {
  tabIndex1.value = index;
  cartogram();
  console.log(index);
};

const cartogram = async () => {
  // 基于准备好的dom，初始化echarts实例
  // 圆环统计图
  let data = {
    state: tabIndex1.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairAnalysis",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "圆环 报修分析统计");
  let echartsData1 = [];
  if (res.data.code == 200) {
    let obj = res.data.data;
    Object.keys(obj).forEach((key) => {
      if (key == "totalCount") {
      } else if (key == "checkCount") {
        echartsData1.push({
          name: "待审核",
          value: obj[key],
        });
      } else if (key == "receivingCount") {
        echartsData1.push({
          name: "待接单",
          value: obj[key],
        });
      } else if (key == "maintainCount") {
        echartsData1.push({
          name: "维修中",
          value: obj[key],
        });
      } else if (key == "accomplishCount") {
        echartsData1.push({
          name: "已完成",
          value: obj[key],
        });
      } else if (key == "shutCount") {
        echartsData1.push({
          name: "已关单",
          value: obj[key],
        });
      } else if (key == "cancelCount") {
        echartsData1.push({
          name: "已取消",
          value: obj[key],
        });
      } else if (key == "disposeCount") {
        echartsData1.push({
          name: "待处理",
          value: obj[key],
        });
      } else if (key == "affirmCount") {
        echartsData1.push({
          name: "待确认",
          value: obj[key],
        });
      } else if (key == "timeOutCount") {
        echartsData1.push({
          name: "已超时",
          value: obj[key],
        });
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  var myChart1 = echarts.init(document.getElementById("annulus"));
  myChart1.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "12%",
      top: "3%",
    },
    series: [
      {
        type: "pie",
        data: echartsData1,
        center: ["40%", "48%"],
        radius: ["48%", "65%"],
        label: {
          show: true,
          //   position: "center",
          formatter: "{c}",
          padding: 1,
        },
        labelLine: {
          show: true,
          //   length: -1,
        },
      },
    ],
  });
};

// 折现统计图按钮（----------------------------）
const brokenBtn = (index) => {
  tabIndex2.value = index + 1;
  cartogram2();
  // console.log(index+1);
};
const cartogram2 = async () => {
  let data = {
    state: tabIndex2.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairTrend",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "折现 报修趋势分析");

  let dayData = []; // 年份
  let newTitle = ""; // 年比（今年标题）
  let oldTitle = ""; // 年比（去年标题）

  // 月份
  let monthData = [];
  for (let j = 1; j <= 31; j++) {
    monthData.push(j);
  }
  let oldData = []; // 上-级数据
  let newData = []; // 当前数据
  let xname = "";
  if (res.data.code == 200) {
    res.data.data.forEach((item) => {
      if (tabIndex2.value == 1) {
        xname = "月";
        newTitle = "今年";
        oldTitle = "去年";
        dayData.push(item.trendComparisonName);
        oldData.push(item.trendComparisonCount);
        if (item.trendCount != null) {
          newData.push(item.trendCount);
        }
      } else if (tabIndex2.value == 2) {
        xname = "日";
        dayData = monthData;
        newTitle = "本月";
        oldTitle = "上月";
        if (item.trendComparisonCount != null) {
          oldData.push(item.trendComparisonCount);
        }
        if (item.trendCount != null) {
          newData.push(item.trendCount);
        }
      } else if (tabIndex2.value == 3) {
        xname = "周";
        dayData.push(item.trendComparisonName);
        newTitle = "本周";
        oldTitle = "上周";
        oldData.push(item.trendComparisonCount);
        if (item.trendCount != null) {
          newData.push(item.trendCount);
        }
      } else if (tabIndex2.value == 4) {
        xname = "小时";
        dayData.push(item.trendComparisonName);
        newTitle = "今天";
        oldTitle = "昨天";
        oldData.push(item.trendComparisonCount);
        if (item.trendCount != null) {
          newData.push(item.trendCount);
        }
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  // 折现统计图
  var myChart2 = echarts.init(document.getElementById("broken"));
  myChart2.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      // data: dayTitle,
      bottom: "25",
      icon: "circle",
      itemHeight: 8, // 修改icon图形大小
      itemGap: 30, // 修改间距
      textStyle: {
        fontSize: 10,
        color: "#000",
        padding: [0, 0, 0, -5], // 修改文字和图标距离
      },
    },
    grid: {
      top: "12%",
      left: "5%",
      right: "8%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        data: dayData,
        // axisLabel: {
        //   // 每个数据后面都会带有单位
        //   formatter: "{value}月",
        // },
        name: xname,
        nameLocation: "end",
        nameTextStyle: {
          padding: [60, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: newTitle,
        type: "line",
        // stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: newData,
        symbolSize: 4, // 点的大小
        symbol: "circle", // 折线点设置为实心点
        itemStyle: {
          normal: {
            color: "rgba(30, 125, 251, 1)", // 拐点的颜色
            borderColor: "white", // 拐点边框颜色
            borderWidth: 2, // 拐点边框大小
          },
        },
        lineStyle: {
          normal: {
            color: "rgba(30, 125, 251, 1)", // 折线点的颜色
          },
        },
        smooth: true, //平滑曲线图。值可为数字
        areaStyle: {
          //2.基础面积图。区域填充样式
          color: "rgba(30, 125, 251, 0.3)", //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
        },
      },
      {
        name: oldTitle,
        type: "line",
        // stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: oldData,
        symbolSize: 4, // 点的大小
        symbol: "circle", // 折线点设置为实心点
        itemStyle: {
          normal: {
            color: "rgba(111, 182, 184, 1)", // 拐点的颜色
            borderColor: "white", // 拐点边框颜色
            borderWidth: 2, // 拐点边框大小
          },
        },
        lineStyle: {
          normal: {
            color: "rgba(111, 182, 184, 1)", // 折线点的颜色
          },
        },
        smooth: true, //平滑曲线图。值可为数字
        areaStyle: {
          //2.基础面积图。区域填充样式
          color: "rgba(111, 182, 184, 0.3)", //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
        },
      },
    ],
  });
};

// 顶部展示数据
const titleTop = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairTotalData",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "顶部展示数据");
  if (res.data.code == 200) {
    topTitleData.value = [];
    let obj = res.data.data;
    Object.keys(obj).forEach((key) => {
      if (key == "totalCount") {
        topTitleData.value.push({
          name: "总数",
          value: obj[key],
        });
      } else if (key == "checkCount") {
        topTitleData.value.push({
          name: "待审核",
          value: obj[key],
        });
      } else if (key == "receivingCount") {
        topTitleData.value.push({
          name: "待接单",
          value: obj[key],
        });
      } else if (key == "maintainCount") {
        topTitleData.value.push({
          name: "维修中",
          value: obj[key],
        });
      } else if (key == "accomplishTotalCount") {
        topTitleData.value.push({
          name: "已完成",
          value: obj[key],
        });
        accomplishCount.value = obj[key];
      } else if (key == "accomplishCount") {
        // 已完成
        accomplishCount.value = obj[key];
      } else if (key == "shutCount") {
        // 已关单
        shutCount.value = obj[key];
      } else if (key == "cancelCount") {
        // 已取消
        cancelCount.value = obj[key];
      } else if (key == "disposeCount") {
        topTitleData.value.push({
          name: "待处理",
          value: obj[key],
        });
      } else if (key == "affirmCount") {
        topTitleData.value.push({
          name: "待确认",
          value: obj[key],
        });
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token")
      router.push({
        path: `/login`,
      });
    }
  }
};

const getlist = () => {
  titleTop(); // 顶部数据
  tableList3(); // 报修校区统计
  tableList4(); // 报修区域统计
  tableList5(); // 总数据汇总分析
  tableList6(); // 黄家湖维修师傅效率统计
  tableList8(); // 墨轩湖维修师傅效率统计
  tableList7(); // 维修物品统计
};
//  报修校区统计（----------------------）
const table3Btn = (index) => {
  tabIndex3.value = index;
  tableList3();
};
const tableList3 = async () => {
  let data = {
    state: tabIndex3.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairCampus",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "报修校区统计数据");
  if (res.data.code == 200) {
    tableData3.list = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 报修区域统计(---------------------)
const table4Btn = (index) => {
  tabIndex4.value = index;
  scrolltop4.value = true;
  // 重置页数
  table4CurrentPage.value = 1;
  table4pageCount.value = 10;
  tableList4();
};
const tableList4 = async () => {
  table4Load.value = true;
  let data = {
    state: tabIndex4.value,
    currentPage: table4CurrentPage.value,
    pageCount: table4pageCount.value,
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairArea",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "报修区域统计数据");
  if (res.data.code == 200) {
    table4Total.value = res.data.data.records.length;
    res.data.data.records.forEach((item) => {
      item.areaNames = item.areaName.slice(5);
    });
    if (table4CurrentPage.value > 1) {
      tableData4.list = tableData4.list.concat(res.data.data.records);
    } else {
      tableData4.list = res.data.data.records;
    }
    table4Load.value = false;
  } else {
    table4Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const tableScroll4 = (ele) => {
  // ele : 绑定的表格元素
  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
  let table = ele.layout.table.refs.bodyWrapper;
  table.addEventListener(
    "scroll",
    (e) => {
      if (scrolltop4.value) {
        e.target.scrollTop = 0;
        scrolltop4.value = false;
        console.log("置顶到顶部");
      }
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      // console.log(scrollTop, "scrollTop");
      // console.log(scrollHeight, "scrollHeight");
      // console.log(clientHeight);
      if (scrollTop + clientHeight == scrollHeight) {
        console.log("滚动到底部了");
        // 滚动到底部页面加一
        table4CurrentPage.value++;
        // 判断数据是否加载完
        if (table4Total.value >= table4pageCount.value) {
          console.log(table4Total.value, "加载完毕");
          tableList4();
        }
      }
    },
    true
  );
};
// 导出报修区域数据
const importTable4 = async () => {
  let datas = {
    state: tabIndex4.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairAreaExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "报修区域统计");
  if (res.status == 200) {
    let name = `报修区域统计`;
    var content = res.data;
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

// 总数据汇总分析
const tableList5 = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/repairSummarizing",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "总数据汇总分析");
  if (res.data.code == 200) {
    tableData5.list = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 维修师傅效率统计(黄家湖---------------------)
const table8Btn = (index) => {
  tabIndex8.value = index;
  scrolltop8.value = true;
  // 重置页数
  table8CurrentPage.value = 1;
  table8pageCount.value = 10;
  tableList8();
};
// 点击名字
const cliName8 = (row) => {
  console.log(row);
  nameVisible8.value = true
  nameList8.workOrderTotal = row.workOrderTotal // 工单总数
  nameList8.degreePraise = row.degreePraise // 好评率
  nameList8.timeOut = row.timeOut // 超时率
  nameList8.name = row.name // 名字
  nameList8.answer = row.answer // 平均响应时长（分）
  nameList8.maintain = row.maintain // 平均维修时长（分）
  nameList8.totalPrice = row.totalPrice  // 耗材总费用（元）
  nameList8.schoolName = row.schoolName
}
const cancelName8 = () => {
  nameVisible8.value = false
}
const tableList8 = async () => {
  table8Load.value = true;

  let data = {
    state: tabIndex8.value,
    currentPage: table8CurrentPage.value,
    pageCount: table8pageCount.value,
    schoolId: 1,
    keyWord: searchInput8.value
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorker",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "黄家湖维修师傅效率统计数据");
  if (res.data.code == 200) {
    table8Total.value = res.data.data.records.length;
    if (table8CurrentPage.value > 1) {
      tableData8.list = tableData8.list.concat(res.data.data.records);
    } else {
      tableData8.list = res.data.data.records;
    }
    table8Load.value = false;
  } else {
    table8Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const tableScroll8 = (ele) => {
  // ele : 绑定的表格元素
  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
  let table = ele.layout.table.refs.bodyWrapper;
  table.addEventListener(
    "scroll",
    (e) => {
      if (scrolltop8.value) {
        e.target.scrollTop = 0;
        scrolltop8.value = false;
        console.log("置顶到顶部");
      }
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      // console.log(scrollTop, "scrollTop");
      // console.log(scrollHeight, "scrollHeight");
      // console.log(clientHeight);
      if (scrollTop + clientHeight == scrollHeight) {
        console.log("滚动到底部了");
        // 滚动到底部页面加一
        table8CurrentPage.value++;
        // 判断数据是否加载完
        if (table8Total.value >= table8pageCount.value) {
          console.log(table8Total.value, "加载完毕");
          tableList8();
        }
      }
    },
    true
  );
};
// 黄家湖搜索关键字
const searchTable8 = async () => {
  table8Load.value = true;
  table8CurrentPage.value = 1
  table8pageCount.value = 10
  let data = {
    state: tabIndex8.value,
    currentPage: table8CurrentPage.value,
    pageCount: table8pageCount.value,
    schoolId: 1,
    keyWord: searchInput8.value
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorker",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "黄家湖维修师傅效率统计数据");
  if (res.data.code == 200) {
    if (res.data.data.records) {
      table8Total.value = res.data.data.records.length;
      if (table8CurrentPage.value > 1) {
        tableData8.list = tableData8.list.concat(res.data.data.records);
      } else {
        tableData8.list = res.data.data.records;
      }
    } else {
      tableData8.list = []
    }
    table8Load.value = false;
  } else {
    table8Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}
// 维修师傅效率统计导出
const importTable8 = async () => {
  let datas = {
    state: tabIndex8.value,
    schoolId: 1,
    keyWord: searchInput8.value
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorkerExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "黄家湖维修师傅效率统计");
  if (res.status == 200) {
    let name = `黄家湖维修师傅效率统计`;
    var content = res.data;
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

// 维修师傅效率统计(墨轩湖---------------------)
const table6Btn = (index) => {
  tabIndex6.value = index;
  scrolltop6.value = true;
  // 重置页数
  table6CurrentPage.value = 1;
  table6pageCount.value = 10;
  tableList6();
};
// 点击名字
const cliName6 = (row) => {
  console.log(row);
  nameVisible6.value = true
  nameList6.workOrderTotal = row.workOrderTotal // 工单总数
  nameList6.degreePraise = row.degreePraise // 好评率
  nameList6.timeOut = row.timeOut // 超时率
  nameList6.name = row.name // 名字
  nameList6.answer = row.answer // 平均响应时长（分）
  nameList6.maintain = row.maintain // 平均维修时长（分）
  nameList6.totalPrice = row.totalPrice  // 耗材总费用（元）
  nameList6.schoolName = row.schoolName
}
const cancelName6 = () => {
  nameVisible6.value = false
}
const tableList6 = async () => {
  table6Load.value = true;
  let data = {
    state: tabIndex6.value,
    currentPage: table6CurrentPage.value,
    pageCount: table6pageCount.value,
    schoolId: 2,
    keyWord: searchInput6.value
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorker",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "维修师傅效率统计数据");
  if (res.data.code == 200) {
    table6Total.value = res.data.data.records.length;
    if (table6CurrentPage.value > 1) {
      tableData6.list = tableData6.list.concat(res.data.data.records);
    } else {
      tableData6.list = res.data.data.records;
    }
    table6Load.value = false;
  } else {
    table6Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const tableScroll6 = (ele) => {
  // ele : 绑定的表格元素
  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
  let table = ele.layout.table.refs.bodyWrapper;
  table.addEventListener(
    "scroll",
    (e) => {
      if (scrolltop6.value) {
        e.target.scrollTop = 0;
        scrolltop6.value = false;
        console.log("置顶到顶部");
      }
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      // console.log(scrollTop, "scrollTop");
      // console.log(scrollHeight, "scrollHeight");
      // console.log(clientHeight);
      if (scrollTop + clientHeight == scrollHeight) {
        console.log("滚动到底部了");
        // 滚动到底部页面加一
        table6CurrentPage.value++;
        // 判断数据是否加载完
        if (table6Total.value >= table6pageCount.value) {
          console.log(table6Total.value, "加载完毕");
          tableList6();
        }
      }
    },
    true
  );
};
// 墨轩湖搜索关键字
const searchTable6 = async () => {
  table6Load.value = true;
  table6CurrentPage.value = 1
  table6pageCount.value = 10
  let data = {
    state: tabIndex6.value,
    currentPage: table6CurrentPage.value,
    pageCount: table6pageCount.value,
    schoolId: 2,
    keyWord: searchInput6.value
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorker",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "黄家湖维修师傅效率统计数据");
  if (res.data.code == 200) {
    if (res.data.data.records) {
      table6Total.value = res.data.data.records.length;
      if (table6CurrentPage.value > 1) {
        tableData6.list = tableData6.list.concat(res.data.data.records);
      } else {
        tableData6.list = res.data.data.records;
      }
    } else {
      tableData6.list = []
    }
    table6Load.value = false;
  } else {
    table6Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}
// 维修师傅效率统计导出
const importTable6 = async () => {
  let datas = {
    state: tabIndex6.value,
    schoolId: 2,
    keyWord: searchInput6.value
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceWorkerExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "墨轩湖维修师傅效率统计");
  if (res.status == 200) {
    let name = `墨轩湖维修师傅效率统计`;
    var content = res.data;
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

// 维修物品统计(---------------------)
const table7Btn = (index) => {
  tabIndex7.value = index;
  scrolltop7.value = true;
  // 重置页数
  table7CurrentPage.value = 1;
  table7pageCount.value = 10;
  tableList7();
};

const tableList7 = async () => {
  table7Load.value = true;
  let data = {
    state: tabIndex7.value,
    currentPage: table7CurrentPage.value,
    pageCount: table7pageCount.value,
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceGoods",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "维修物品统计数据");
  if (res.data.code == 200) {
    table7Total.value = res.data.data.records.length;
    if (table7CurrentPage.value > 1) {
      tableData7.list = tableData7.list.concat(res.data.data.records);
    } else {
      tableData7.list = res.data.data.records;
    }
    table7Load.value = false;
  } else {
    table7Load.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const tableScroll7 = (ele) => {
  // ele : 绑定的表格元素
  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
  let table = ele.layout.table.refs.bodyWrapper;
  table.addEventListener(
    "scroll",
    (e) => {
      if (scrolltop7.value) {
        e.target.scrollTop = 0;
        scrolltop7.value = false;
        console.log("置顶到顶部");
      }
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      // console.log(scrollTop, "scrollTop");
      // console.log(scrollHeight, "scrollHeight");
      // console.log(clientHeight);
      if (scrollTop + clientHeight == scrollHeight) {
        console.log("滚动到底部了");
        // 滚动到底部页面加一
        table7CurrentPage.value++;
        // 判断数据是否加载完

        if (table7Total.value >= table7pageCount.value) {
          console.log(table7Total.value, "加载完毕");
          tableList7();
        }
      }
    },
    true
  );
};

// 维修物品统计导出
const importTable7 = async () => {
  let datas = {
    state: tabIndex7.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/maintenanceGoodsExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
    responseType: "blob",
  });
  console.log(res, "维修物品统计");
  if (res.status == 200) {
    let name = `维修物品统计`;
    var content = res.data;
    var data = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(data);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(data);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

onMounted(() => {
  api.value = store.state.user.api;
  cartogram();
  cartogram2();
  getlist();
  tableScroll4(table4.value);
  tableScroll6(table6.value);
  tableScroll8(table8.value);
  tableScroll7(table7.value);
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  margin: 20px auto;
  //   background-color: #fff;
  //   border: 1px solid #000;
  color: #fff;
  display: flex;
  flex-direction: column;

  .item {
    // width: 97%;
    display: flex;
    align-items: center;
    height: 160px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
    // margin: 0 30px;
    padding: 20px 0;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .item_li {
      display: flex;
      justify-content: space-around;
      margin: 0 15px;
      align-items: center;
      width: 100%;

      .item_card {
        flex: 1;
        border-radius: 8px;
        height: 120px;
        margin: 0 10px;

        // padding: 0 15px;
        .top {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          height: 40px;
          color: #fff;
          padding-bottom: 10px;
          padding: 0 15px 10px 15px;

          span {
            font-size: 18px;
          }

          .cancel {
            display: flex;
            flex-direction: column;

            span {
              font-size: 14px;
              padding: 2px 5px;
            }
          }
        }

        .bottom {
          height: 59px;
          border: none;
          padding: 0 15px;
          align-items: center;

          span {
            font-size: 38px;
          }
        }
      }

      .item_card:nth-child(1) {
        background-color: rgba(111, 182, 184, 1);
      }

      .item_card:nth-child(2) {
        background-color: rgba(30, 125, 251, 1);
      }

      .item_card:nth-child(3) {
        background-color: rgba(237, 125, 100, 1);
      }

      .item_card:nth-child(4) {
        background-color: rgba(30, 125, 251, 1);
      }

      .item_card:nth-child(5) {
        background-color: rgba(237, 125, 100, 1);
      }

      .item_card:nth-child(6) {
        background-color: rgba(30, 125, 251, 1);
      }

      .item_card:nth-child(7) {
        background-color: rgba(111, 182, 184, 1);
      }
    }
  }

  .middle {
    width: 100%;
    // height: 100%;
    margin: 0 auto;
    overflow: auto;

    .cartogram {
      display: flex;
      justify-content: space-between;
      margin: 25px 0;

      .annulus {
        // width: 520px;
        flex: 1;
        height: 300px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

        .title {
          margin: 10px 30px;
          color: #000;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .import {
            cursor: pointer;

            img {
              width: 17px;
              height: 15px;
              margin-right: 5px;
              transform: translateY(3px);
            }

            span {
              color: rgba(30, 125, 251, 1);
            }
          }
        }

        ul {
          list-style: none;
          display: flex;
          padding: 0 20px;
          margin: 0 0 0 15px;

          li {
            color: #000;
            width: 60px;
            height: 25px;
            border-radius: 8px;
            border: 1px solid #ccc;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            margin-right: 20px;
          }

          .li_active {
            background-color: rgba(111, 182, 184, 1);
            color: #fff;
          }
        }

        // 圆环统计图
        #annulus {
          width: 100%;
          height: 250px;
        }

        // 折现统计图
        #broken {
          width: 100%;
          height: 250px;
        }
      }

      .annulus:nth-child(2) {
        margin: 0 20px;
      }

      // 表格1
      .table1 {
        // width: 584px;
        flex: 1.1;
        height: 300px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

        .title {
          margin: 10px 30px;
          color: #000;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .import {
            cursor: pointer;

            img {
              width: 17px;
              height: 15px;
              margin-right: 5px;
              transform: translateY(3px);
            }

            span {
              color: rgba(30, 125, 251, 1);
            }
          }
        }

        ul {
          list-style: none;
          display: flex;
          //   justify-content: space-around;
          padding: 0 20px;
          margin: 0 0 0 15px;

          li {
            color: #000;
            width: 60px;
            height: 25px;
            border-radius: 8px;
            border: 1px solid #ccc;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            margin-right: 20px;
          }

          .li_active {
            background-color: rgba(111, 182, 184, 1);
            color: #fff;
          }
        }

        .table {
          width: 90%;
          margin: 20px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 50px;
              color: #000;
            }
          }
        }
      }

      .table2 {
        flex: 2.04;
        margin-right: 20px;

        // 导出按钮颜色样式
        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .table {
          width: 95%;
          margin: 12px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 40px;
              color: #000;
            }
          }
        }
      }

      .table3 {
        .table {
          width: 90%;
          margin: 15px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 40px;
              color: #000;
            }
          }
        }
      }

      .table4 {
        flex: 1;

        .table {
          width: 95%;
          margin: 15px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 40px;
              color: #000;
            }
          }
        }
      }

      .Mtable {
        margin: 0 20px 0 0 !important;
      }

      .table5 {
        .table {
          width: 90%;
          margin: 15px auto;

          // 表头设置
          :deep(.el-table__header) {
            height: 40px;

            tr {
              color: #000;
            }
          }

          // 表格body
          :deep(.el-table__body) {
            .el-table__row {
              height: 40px;
              color: #000;
            }
          }
        }
      }
    }

    .cartogram3 {
      margin: 0;
    }
  }

  .footer {
    width: 96%;
  }

  // 维修师傅效率统计
  :deep(.reply) {
    //   height: 420px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 30px 10px 20px;

      .content {
        margin: 15px 0;

        table {
          width: 100%;
          border-collapse: collapse;
          color: #000;

          tr {
            td {
              padding: 20px 5px;
              text-align: center;
            }
          }
        }
      }

      .options {
        display: flex;
        flex-direction: row-reverse;
        margin: 20px 0 25px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }
      }
    }
  }
}
</style>