WanZai_School/src/views/energy/energy.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">能耗管理</span>
    </div>
    <div class="middle">
      <div class="echarts">
        <div class="echarts1">
          <div class="title">水电量统计</div>
          <div id="annulus"></div>
          <div class="quantity_title">
            <div class="quantity">
              <div class="dosage">用电量</div>
              <div class="num">
                <!-- <el-col>
                  <el-statistic title="" :value="getWaterTj" />
                </el-col> -->
                <span class="unit">{{ getElcTj }}</span>
                <div class="units">kw·h</div>
              </div>
            </div>
            <div class="quantity">
              <div class="dosage">用水量</div>
              <div class="num">
                <!-- <el-col>
                  <el-statistic title="" :value="getElcTj" />
                </el-col> -->
                <span class="unit">{{ getWaterTj }}</span>
                <div class="units">L</div>
              </div>
            </div>
          </div>
        </div>
        <div class="echarts1 echarts2">
          <div class="title">区域统计</div>
          <div id="areaTJ"></div>
          <div class="quantity_title">
            <div class="btn">
              <div
                class="btn_li"
                :class="areaInd == 1 ? 'btn_active' : ''"
                @click="areaStatistics(1)"
              >
                水
              </div>
              <div
                class="btn_li"
                :class="areaInd == 2 ? 'btn_active' : ''"
                @click="areaStatistics(2)"
              >
                电
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="table1">
          <div class="title">区域能耗统计</div>
          <div class="table1Data">
            <div class="selInput">
              <span>月份 : </span>
              <!-- <el-select
                v-model="tableSearch1"
                class="m-2"
                placeholder="请选择月份"
              >
                <el-option label="1月" value="1" />
                <el-option label="2月" value="2" />
              </el-select> -->
              <el-date-picker
                v-model="tableSearch1"
                type="month"
                placeholder="请选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                @change="energyDissipation"
              />
            </div>
            <el-table
              :row-class-name="tableRowClassName"
              :data="table1Data.list"
              style="width: 100%"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '40px',
                border: 0,
              }"
            >
              <el-table-column
                align="center "
                type="index"
                width="80"
                label="序号"
              />
              <el-table-column align="center" prop="eNum" label="电（kw/h）" />
              <el-table-column align="center" prop="wNum" label="水（L）" />
              <el-table-column align="center" prop="name" label="楼栋" />
              <el-table-column align="center" prop="date" label="月份" />
            </el-table>
            <!-- 分页组件 -->
            <div class="pageSize">
              <span></span>
              <el-pagination
                small
                background
                :current-page="currentPage1"
                :page-size="pageSize1"
                layout="total, prev, pager, next, jumper, slot"
                :total="total1"
                @update:current-page="handleCurrentChange1"
              />
            </div>
          </div>
        </div>
        <div class="table1 table2">
          <div class="title">实时抄表</div>
          <div class="table1Data">
            <div class="selInput">
              <el-button-group style="margin-right:15px">
                <el-button @click="table2Change(0)" :type="table2Type==0?'primary':''">水</el-button>
                <el-button @click="table2Change(1)" :type="table2Type==1?'primary':''">电</el-button>
              </el-button-group>
              <span>通讯时间 : </span>
              <el-date-picker
                v-model="tableSearch2"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
                @change="meterReading"
              />
            </div>
            <el-table
              :row-class-name="tableRowClassName"
              :data="table2Data.list"
              style="width: 100%"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '40px',
                border: 0,
              }"
            >
              <el-table-column
                align="center "
                width="80"
                type="index"
                label="序号"
              />
              <el-table-column align="center" prop="buildAddress" label="楼栋" />
              <el-table-column align="center" prop="address" label="位置" />
              <el-table-column align="center" prop="meterPower" :label="table2Type==0?'水(吨)':'电(度)'" />
              <el-table-column align="center" prop="meterNo" label="表号" />
              <el-table-column align="center" prop="createTime" label="通讯时间" />
            </el-table>
            <!-- 分页组件 -->
            <div class="pageSize">
              <span></span>
              <el-pagination
                small
                background
                :current-page="currentPage2"
                :page-size="pageSize2"
                layout="total, prev, pager, next, jumper, slot"
                :total="total2"
                @update:current-page="handleCurrentChange2"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑按钮 -->
  <el-dialog
    class="editDialog"
    v-model="editVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="titleDialog"
    align-center
    width="600"
    :before-close="cancelEdit"
  >
    <el-form
      ref="editRef"
      :model="editRuleForm"
      :rules="editRules"
      label-width="90px"
      class="demo-ruleForm"
      :size="formSize"
      label-position="left"
      status-icon
    >
      <el-form-item label="用户部门 :" prop="userDepartment">
        <el-input
          v-model="editRuleForm.userDepartment"
          placeholder="请输入用户部门"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="用户名 :" prop="userName">
        <el-input
          v-model="editRuleForm.userName"
          placeholder="请输入用户名"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="用户角色 :" prop="userRoles">
        <el-select
          v-model="editRuleForm.userRoles"
          class="m-2"
          placeholder="请选择用户角色"
          style="width: 500px"
        >
          <el-option label="清洁工" value="1" />
          <el-option label="洗碗工" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="微校卡号 :" prop="schoolCard">
        <el-input
          v-model="editRuleForm.schoolCard"
          placeholder="请输入微校卡号"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="身份证号 :" prop="idNumber">
        <el-input
          v-model="editRuleForm.idNumber"
          placeholder="请输入身份证号"
          style="width: 500px"
        >
          <template #append>
            <div @click="readCard">读卡</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="指纹 :" prop="fingerprint">
        <el-input
          v-model="editRuleForm.fingerprint"
          placeholder="请输入指纹"
          style="width: 500px"
        >
          <template #append>
            <div @click="entering">录入</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmEdit(editRef)"
        >
          保存
        </el-button>
        <el-button @click="cancelEdit(editRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import * as echarts from "echarts";
import {
  ref,
  shallowRef,
  reactive,
  watch,
  nextTick,
  onMounted,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import eds from "@/utils/eds.js";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 用户类别占比
const category = shallowRef();
const getWaterTj = ref(); // 水
const getElcTj = ref(); // 电
// 区域统计
const areaTJEcharts = shallowRef();
const areaInd = ref(1); // 默认水
const areaData = ref();
const monthList = ref([]); // 月份
const monthTypeValue = ref([]); // 数据

// 区域能耗统计
const tableSearch1 = ref(); // 月份搜索
const table1Data = reactive({
  list: [],
});
const currentPage1 = ref(1); // 当前页
const pageSize1 = ref(4);
const total1 = ref(5); // 当前总数

// 实时抄表
const table2Type=ref(0); // 切换 0水 或 1电
const tableSearch2 = ref(); // 月份搜索
const table2Data = reactive({
  list: [],
});
const currentPage2 = ref(1); // 当前页
const pageSize2 = ref(4);
const total2 = ref(5); // 当前总数

// 用户类别占比
const echarts1 = async () => {
  category.value = echarts.init(document.getElementById("annulus"));
  category.value.setOption({
    // tooltip: {
    //   trigger: "item",
    // },
    // legend: {
    //   orient: "horizontal",
    //   bottom: "16%",
    //   left: "22%",
    //   itemGap: 20,
    //   itemWidth: 15,
    //   itemHeight: 15,
    // },
    // series: [
    //   {
    //     name: "用户类别占比",
    //     type: "pie",
    //     radius: ["70%", "90%"],
    //     center: ["30%", "60%"],
    //     // adjust the start angle
    //     startAngle: 180,
    //     label: {
    //       show: true,
    //       formatter(param) {
    //         // correct the percentage
    //         return param.name + " (" + param.percent * 2 + "%)";
    //       },
    //     },
    //     data: [
    //       {
    //         value: getElcTj.value, // getElcTj.value
    //         name: "用电",
    //         itemStyle: {
    //           color: "rgba(67, 181, 244, 1)",
    //         },
    //       },
    //       {
    //         value: getWaterTj.value, // getWaterTj.value
    //         name: "用水",
    //         itemStyle: {
    //           color: "#D4EDFB",
    //         },
    //       },
    //       {
    //         // make an record to fill the bottom 50%
    //         value: getElcTj.value + getWaterTj.value, // getElcTj.value + getWaterTj.value
    //         itemStyle: {
    //           // stop the chart from rendering this piece
    //           color: "none",
    //           decal: {
    //             symbol: "none",
    //           },
    //         },
    //         label: {
    //           show: false,
    //         },
    //       },
    //     ],
    //   },
    // ],
    tooltip: {
      formatter: (params) => {
        if (params.name != "") {
          return (
            params.name +
            " : " +
            params.value +
            "\n" +
            "(" +
            params.percent +
            "%)"
          );
        }
      },
    },
    legend: {
      orient: "horizontal",
      bottom: "15%",
      left: "27%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "56%"],
        center: ["35%", "35%"],
        color: ["rgba(67, 181, 244, 1)", "#D4EDFB"],
        hoverAnimation: false,
        startAngle: 70,
        selectedMode: "single",
        itemStyle: {
          normal: {
            // borderWidth: 8,
            // borderColor: "#021a24",
          },
        },
        label: {
          show: true,
          formatter: "{b}" + " " + "{c}",
        },
        data: [
          {
            name: "用电量",
            value: getElcTj.value,
          },
          {
            name: "用水量",
            value: getWaterTj.value,
          },
        ],
      },
    ],
  });
};
// 根据页面缩放重置echarts图表
const resizeChart = () => {
  category.value.resize();
  areaTJEcharts.value.resize();
};

// 获取用电量和用水量 (11111111111111111)
const getWaterElc = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getWaterTj",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)).num, "用水量");
  if (res.data.code == 200) {
    getWaterTj.value = JSON.parse(eds.decryptDes(res.data.data)).num;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.nessage,
      center: true,
    });
  }
  let ress = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getElcTj",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(ress, JSON.parse(eds.decryptDes(ress.data.data)).num, "用电量");
  if (ress.data.code == 200) {
    getElcTj.value = JSON.parse(eds.decryptDes(ress.data.data)).num;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.nessage,
      center: true,
    });
  }
  nextTick(() => {
    echarts1();
  });
};
// 获取区域统计数据 (22222222222222222222222)
// 切换水/电
const areaStatistics = (ind) => {
  areaInd.value = ind;
  getMonWaterElc();
};
const getMonWaterElc = async () => {
  let res = "";
  if (areaInd.value == 1) {
    res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/wechat/getMonWater",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
  } else {
    res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/wechat/getMonElc",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
  }
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)),
    "水、电 区域统计"
  );
  if (res.data.code == 200) {
    if (areaInd.value == 1) {
      areaData.value = JSON.parse(eds.decryptDes(res.data.data));
      monthList.value = []; // 横坐标月份
      monthTypeValue.value = []; // 月份对应数据
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      monthTypeValue.value = [
        {
          name: "探问楼",
          type: "bar",
          data: arr1,
          itemStyle: {
            color: "rgb(67, 181, 244)",
          },
          barGap: "0%", // 同一列柱子的间距
          barWidth: 20, // 柱子的宽度
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "探理楼",
          type: "bar",
          data: arr2,
          itemStyle: {
            color: "rgb(158, 207, 142)",
          },
          barGap: "0%", // 同一列柱子的间距
          barWidth: 20, // 柱子的宽度
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "探学楼",
          type: "bar",
          data: arr3,
          itemStyle: {
            color: "rgb(242, 204, 118)",
          },
          barGap: "0%", // 同一列柱子的间距
          barWidth: 20, // 柱子的宽度
          emphasis: {
            focus: "series",
          },
        },
      ];
      areaData.value.forEach((item) => {
        if (item.lt.length > 0) {
          item.lt.forEach((i) => {
            if (i.name == "探问楼") {
              arr1.push(i.num);
            }
            if (i.name == "探理楼") {
              arr2.push(i.num);
            }
            if (i.name == "探学楼") {
              arr3.push(i.num);
            }
          });
        } else {
          arr1.push(0);
          arr2.push(0);
          arr3.push(0);
        }
      });
      console.log(monthTypeValue.value, "水 数据整合 区域统计");

      areaData.value.forEach((item) => {
        monthList.value.push(item.date);
      });
    }else {
      areaData.value = JSON.parse(eds.decryptDes(res.data.data));
      monthList.value = []; // 横坐标月份
      monthTypeValue.value = []; // 月份对应数据
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      monthTypeValue.value = [
        {
          name: "探问楼",
          type: "bar",
          data: arr1,
          itemStyle: {
            color: "rgb(67, 181, 244)",
          },
          barGap: "0%", // 同一列柱子的间距
          barWidth: 20, // 柱子的宽度
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "探理楼",
          type: "bar",
          data: arr2,
          itemStyle: {
            color: "rgb(158, 207, 142)",
          },
          barGap: "0%", // 同一列柱子的间距
          barWidth: 20, // 柱子的宽度
          emphasis: {
            focus: "series",
          },
        },
      ];
      areaData.value.forEach((item) => {
        if (item.lt.length > 0) {
          item.lt.forEach((i) => {
            if (i.name == "探问楼") {
              arr1.push(i.num);
            }
            if (i.name == "探理楼") {
              arr2.push(i.num);
            }
          });
        } else {
          arr1.push(0);
          arr2.push(0);
        }
      });
      console.log(monthTypeValue.value, "电 数据整合 区域统计");

      areaData.value.forEach((item) => {
        monthList.value.push(item.date);
      });
    }
    if(areaTJEcharts.value){
      areaTJEcharts.value.dispose();
    }
    nextTick(() => {
      echarts2();
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.nessage,
      center: true,
    });
  }
};
// 区域统计图表
const echarts2 = async () => {
  areaTJEcharts.value = echarts.init(document.getElementById("areaTJ"));
  areaTJEcharts.value.setOption({
    legend: {
      orient: "horizontal",
      bottom: "5%",
      left: "center",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },

    grid: {
      show: false,
      top: "10%", // 一下数值可为百分比也可为具体像素值
      right: "8%",
      bottom: "25%",
      left: "10%",
    },
    dataZoom: [
      {
        type: "slider",
        realtime: true,
        start: 40,
        end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, // 组件高度
        left: 5, // 左边的距离
        right: 5, // 右边的距离
        bottom: 2, // 下边的距离
        show: true, // 是否展示
        fillerColor: "rgba(180, 226, 251, 1)", // 滚动条颜色
        borderColor: "rgba(180, 226, 251, 0.12)",
        handleSize: 0, // 两边手柄尺寸
        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        zoomLock: true, // 是否只平移不缩放
        moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
        zoomOnMouseWheel: true, // 鼠标移动能触发数据窗口缩放
      },
      {
        type: "inside", // 支持内部鼠标滚动平移
        start: 0,
        end: 70,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
      },
    ],
    // dataset: {
    //   source: [
    //     ["product", "2015", "2016", "2017"],
    //     ["教学楼", 43.3, 85.8, 93.7],
    //     ["行政楼", 83.1, 73.4, 55.1],
    //     ["食堂", 86.4, 65.2, 82.5],
    //     ["其他", 72.4, 53.9, 39.1],
    //   ],
    // },
    xAxis: {
      type: "category",
      axisLine: {
        show: true,
        //这是x轴文字颜色
        lineStyle: {
          color: "##5B5B5B",
        },
      },
      axisTick: {
        show: false,
      },
      data: monthList.value,
    },
    yAxis: {
      name: "吨/度",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      axisLine: {
        //这是x轴文字颜色
        show: true,
        lineStyle: {
          color: "##5B5B5B",
        },
      },
      splitLine: {
        //x轴的网格 样式
        lineStyle: {
          color: "#F0EEEE",
          width: 1,
          type: "dashed",
        },
      },
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: monthTypeValue.value,
  });
  // areaTJEcharts.value.setOption({
  //   legend: {},
  //   tooltip: {},
  //   dataset: {
  //     source: [
  //       ["product", "2015", "2016", "2017"],
  //       ["Matcha Latte", 43.3, 85.8, 93.7],
  //       ["Milk Tea", 83.1, 73.4, 55.1],
  //       ["Cheese Cocoa", 86.4, 65.2, 82.5],
  //       ["Walnut Brownie", 72.4, 53.9, 39.1],
  //     ],
  //   },
  //   xAxis: { type: "category" },
  //   yAxis: {},
  //   // Declare several bar series, each will be mapped
  //   // to a column of dataset.source by default.
  //   series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  // });
};

// 区域能耗统计 (333333333333333333333333)
const energyDissipation = async () => {
  let paramsData = {
    currentPage: currentPage1.value,
    pageCount: pageSize1.value,
  };
  let data = {
    date: tableSearch1.value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getMeterMonthPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: paramsData,
    data: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "区域能耗统计");
  if (res.data.code == 200) {
    table1Data.list = JSON.parse(eds.decryptDes(res.data.data)).list;
    total1.value = JSON.parse(eds.decryptDes(res.data.data)).total;
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.nessage,
    //   center: true,
    // });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.nessage,
      center: true,
    });
  }
};
const handleCurrentChange1 = (value) => {
  // console.log(value);
  currentPage1.value = value;
  energyDissipation();
};
// 实时抄表 (44444444444444444444444444)
const table2Change=(flag)=>{
  table2Type.value=flag
  meterReading()
}
const meterReading = async () => {
  let paramsData = {
    currentPage: currentPage2.value,
    pageCount: pageSize2.value,
    
  };
  let data = {
    date: tableSearch2.value,
    type:table2Type.value
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/wechat/getMeterDayPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: paramsData,
    data: data,
  });
  console.log(res,JSON.parse(eds.decryptDes(res.data.data)), "实时抄表");
  if (res.data.code == 200) {
    table2Data.list = JSON.parse(eds.decryptDes(res.data.data)).list;
    total2.value = JSON.parse(eds.decryptDes(res.data.data)).total;
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.nessage,
    //   center: true,
    // });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.nessage,
      center: true,
    });
  }
};
const handleCurrentChange2 = (value) => {
  // console.log(value);
  currentPage2.value = value;
  meterReading();
};
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

onMounted(() => {
  api.value = store.state.user.api;
  getWaterElc(); // 用户类别占比
  getMonWaterElc(); // 区域统计
  energyDissipation(); // 区域能耗
  meterReading(); //实时抄表

  window.addEventListener("resize", resizeChart);
});
onUnmounted(() => {
  category.value.dispose();
  areaTJEcharts.value.dispose();
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 800px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  border-radius: 8px;
  margin: 20px auto;
  background-color: #fff;
  // color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      margin-right: 20px;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }

  .middle {
    width: 100%;
    height: calc(100% - 61px);
    overflow: auto;
    margin: 0 auto;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    .echarts {
      // flex: 1;
      height: 345px;
      width: calc(100% - 40px);
      margin: 10px 0 15px 0;
      display: flex;

      .echarts1 {
        width: 50%;
        // min-width: 500px;
        height: 100%;
        // height: 500px;
        margin-right: 20px;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
        position: relative;
        .title {
          font-size: 18px;
          font-weight: 700;
          margin: 16px 30px;
        }
        #annulus {
          width: 100%;
          height: 300px;
          // height: calc(100% - 56px);
        }
        .quantity_title {
          position: absolute;
          z-index: 999;
          top: 87px;
          right: 47px;
          color: rgba(91, 91, 91, 1);
          font-size: 20px;
          .quantity {
            margin-bottom: 20px;
            .num {
              display: flex;

              color: rgba(42, 42, 42, 1);
              .el-col {
                flex: none;
                display: flex;
                align-items: center;
                :deep(.el-statistic__number) {
                  font-size: 30px;
                  font-weight: 600;
                }
              }
              .unit {
                font-size: 26px;
                font-weight: 800;
              }
              .units {
                transform: translate(5px, 5px);
              }
            }
          }
        }
      }
      .echarts2 {
        margin-right: 0;
        #areaTJ {
          width: 100%;
          height: calc(100% - 56px);
          // height: 300px;
        }
        .quantity_title {
          position: absolute;
          z-index: 999;
          top: 20px;
          right: 80px;
          font-size: 18px;
          color: rgba(0, 97, 255, 1);
          .btn {
            display: flex;
            .btn_li {
              width: 65px;
              height: 28px;
              border-radius: 5px;
              background: rgba(235, 242, 255, 1);
              text-align: center;
              line-height: 28px;
              margin-right: 15px;
              cursor: pointer;
            }
            .btn_active {
              background: rgba(0, 97, 255, 1);
              color: #fff;
            }
          }
        }
      }
    }
    .table {
      // flex: 1;
      height: 360px;
      width: calc(100% - 40px);
      display: flex;
      justify-content: space-between;
      .table1 {
        width: 50%;
        // min-width: 500px;
        height: 100%;
        // height: 500px;
        margin-right: 20px;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
        position: relative;
        .title {
          font-weight: 700;
          margin: 16px 30px 10px;
          font-size: 18px;
        }
        .table1Data {
          margin: 0 30px;
          height: calc(100% - 51px);
          .selInput {
            margin-bottom: 10px;
            font-size: 14px;
          }

          .el-table--fit {
            height: 65%;

            :deep(.el-table__header-wrapper) {
              background-color: #000;
              font-size: 14px;

              tr {
                color: #000;
              }
            }

            :deep(.el-table__row) {
              height: 40px;
              font-size: 14px;
              color: #000;
              &:hover {
                td {
                  background-color: rgba(223, 236, 254, 1);
                }
              }
            }

            :deep(.el-table__row):nth-child(2n) {
              .el-table-fixed-column--right {
                background-color: rgba(240, 243, 247, 1);
              }
            }

            :deep(.el-table__row td) {
              padding: 0;
              border: 0;
            }

            .el-button--primary {
              margin-left: 5px;
            }

            :deep(.el-table__body .even) {
              background-color: #fff;
            }

            :deep(.el-table__body .odd) {
              background-color: rgba(240, 243, 247, 1);
            }

            :deep(.edit) {
              display: flex;
              align-items: center;
              justify-content: center;
              color: rgba(111, 182, 184, 1);
            }

            :deep(.look) {
              padding: 0 10px;
              cursor: pointer;
              color: rgba(30, 125, 251, 1);
            }

            .del {
              padding: 0 10px;
              color: rgba(212, 48, 48, 1);
              cursor: pointer;
            }

            // :deep(.look):hover {
            //   color: red;
            // }
            // :deep(.del):hover {
            //   color: red;
            // }
          }
          .pageSize {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 18px 0 0;

            span {
              color: #000;
            }

            .el-pagination {
              // width: 1600px;
              :deep(.el-pagination__total) {
                color: #000;
              }

              :deep(.el-pagination__goto) {
                color: #000;
              }

              :deep(.el-pagination__classifier) {
                color: #000;
              }

              :deep(.el-input__wrapper) {
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                box-shadow: none;
              }

              :deep(.el-pager li) {
                margin: 0 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }

              :deep(.el-pager li.is-active) {
                // background-color: rgba(0, 97, 255, 0.8);
                border: 1px solid rgba(0, 97, 255, 1);
                color: rgba(0, 97, 255, 1);
              }

              :deep(.btn-prev) {
                margin-right: 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }

              :deep(.btn-next) {
                margin-left: 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }
            }
          }
        }
      }
      .table2 {
        margin: 0;
      }
    }
  }
  // 编辑按钮
  :deep(.editDialog) {
    //   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: 30px 30px 10px 30px;
      .el-form-item__content {
        width: 200px;
        .el-input-group__append {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
          cursor: pointer;
          user-select: none;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>