MingGao_vue/minggao/src/page/forecasting/cbd/deviceTongji.vue

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/cbd' }"
        >虫情测报</el-breadcrumb-item
      >
      <el-breadcrumb-item>害虫排名</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="equipInfo">
      <div>
        <el-button type="success" size="mini" @click="goBackPage()"
          ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
        >
      </div>
      <div class="dateBox">
        <DateSearch
          ref="timeCirculation"
          @dateChange="dateChange"
          @btnSelected="btnSelected"
          @timeScreen="timeScreen"
        ></DateSearch>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :md="24" :lg="19">
        <el-card class="box-card" v-loading="lineLoading">
          <div class="chartsSelect">
            <!-- <el-select
              v-model="pestName"
              @change="screenInsect()"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in worms"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> -->
          </div>
          <div class="charts">
            <highcharts
              :options="options"
              v-if="ChartData.length > 0"
            ></highcharts>
            <div class="noDataClass" v-else>暂无数据</div>
          </div>
        </el-card>
      </el-col>

      <!-- 害虫排行 -->
      <el-col :md="24" :lg="5">
        <el-card v-if="isShow" v-loading="pieLoading" style="height: 442px">
          <div class="chartsSelect">
            <div style="color: #333333">害虫排名</div>
            <div class="deviceTongji_rankingBox">
              <ul class="deviceTongji_rankingBox_ul">
                <li class="backdropStyle">
                  <div class="backdropStyle_box">
                    <div class="backdropStyle_boxName">
                      {{ plantSeniorityObj.name }}
                    </div>
                    <!-- <div style="font-size: 15px; margin: 3px 0 0 0; text-align: center;"> -->
                    <div
                      style="
                        font-size: 15px;
                        margin: 3px 0 0 7%;
                        text-align: center;
                      "
                    >
                      {{ plantSeniorityObj.val }}头
                    </div>
                    <div class="backdropStyle_boxNum">第一名</div>
                  </div>
                </li>
                <li
                  v-for="(item, index) in plantSeniorityArr"
                  :key="index"
                  class="deviceTongji_rankingBox_list"
                >
                  <div class="deviceTongji_rankingBox_listNumber">
                    {{ item.sum }}
                  </div>
                  <div class="deviceTongji_rankingBox_listName">
                    {{ item.name }}
                  </div>
                  <div class="deviceTongji_rankingBox_listSum">
                    {{ item.val }}头
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
        <el-card
          style="
            height: 442px;
            color: #7a7373;
            line-height: 402px;
            font-size: 25px;
            text-align: center;
          "
          v-else
          >暂无数据</el-card
        >
      </el-col>
    </el-row>
    <!-- 搜索 + 导出 -->
    <div class="dataTableSearch">
      <!-- <el-button type="primary" size="mini" @click="deriveData()"
        >导出</el-button
      > -->

      <!-- 搜索 -->
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入需要查看的害虫名称"
        @change="handleSelect"
        @select="handleSelect"
        clearable
      ></el-autocomplete>
    </div>

    <!-- 统计信息 -->
    <el-card class="box-card" style="margin: -60px 0 0 0">
      <el-table
        @cell-click="plantName"
        v-loading="tabLoading"
        :data="tableDataA"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="device_id" label="设备ID"></el-table-column>
        <el-table-column prop="device_name" label="设备名称"></el-table-column>
        <el-table-column prop="pest_name" label="害虫名称(数量)">
          <template slot-scope="scope">
            <div style="width: 195px; height: 29px; cursor: pointer">
              <span v-for="(item, index) in scope.row.pest_name" :key="index">{{
                item.pest_name + "、"
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pest_num" label="种类个数"></el-table-column>
        <el-table-column prop="device_addr" label="设备位置"></el-table-column>
      </el-table>
      <el-pagination
        v-if="tableDataA.length > 0"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="queryInfo.page"
        @current-change="changePage"
        :page-size="10"
      ></el-pagination>
    </el-card>
    <!-- 病虫害档案弹框 -->
    <el-dialog
      title="病虫害档案"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
    >
      <ul class="expertDiagnosis_library_main_popUp">
        <li class="expertDiagnosis_library_main_popUp_li">
          <div class="expertDiagnosis_library_main_popUp_li_name">
            害虫名称：
          </div>
          <div class="expertDiagnosis_library_main_popUp_li_nameVal">
            {{ popUpData.name }}
          </div>
        </li>

        <li class="expertDiagnosis_library_main_popUp_li">
          <div class="expertDiagnosis_library_main_popUp_li_img">
            害虫图片：
          </div>
          <div class id="viewerDom" v-viewer>
            <img
              style="cursor: pointer"
              :src="popUpData.img_urls"
              @error="$imghost + errImg"
              alt
              class="expertDiagnosis_library_main_popUp_li_imgVal"
            />
          </div>
        </li>

        <li class="expertDiagnosis_library_main_popUp_li">
          <div class="expertDiagnosis_library_main_popUp_li_details">
            详细信息：
          </div>
          <!-- <div class="expertDiagnosis_library_main_popUp_li_detailsVal">
            {{ popUpData.prevention }}
          </div> -->
          <div>
            <div
              v-for="(item, index) in preventio"
              :key="index"
              class="expertDiagnosis_library_main_popUp_li_detailsVal"
            >
              {{ item }}
            </div>
          </div>
        </li>
      </ul>
    </el-dialog>

    <!-- 害虫名称数量 -->
    <el-dialog
      title="害虫名称数量"
      width="30%"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisibleA"
    >
      <ul class="dialogFormVisibleA_ul">
        <li
          @click="plantQuery(item)"
          class="dialogFormVisibleA_list"
          v-for="(item, index) in dialogFormVisibleAList"
          :key="index"
        >
          {{ item.pest_name }} - {{ item.num }}个
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import DateSearch from "@/components/DateSearch";
import { arrayMax } from "highcharts";
import HighCharts from "highcharts";
export default {
  //限时数据文本的字数限时
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 11) {
        return value.slice(0, 11) + "...";
      }
      return value;
    },
  },

  data() {
    return {
      queryInfo: {
        begin: "",
        end: "",
        page: 1,
        pageall: 1,
      },
      tableDataAllA: [], //统计
      tableDataAllB: [], //详细
      tableDataA: [],
      worms: [],
      pestName: "",
      lineData: [],
      ChartData: [],
      allPest: [],
      lineLoading: true,
      pieLoading: false,
      popUpData: {}, //虫害数据
      preventio: [], // 虫害详情数据数组
      dialogFormVisible: false,
      plantSeniorityArr: [], //害虫排名
      plantSeniorityObj: {}, //害虫排名
      ceshiaddtime: [],
      dialogFormVisibleA: false, //害虫名称数量
      dialogFormVisibleAList: [], // 害虫名称数量数组
      isShow: true,
      tabLoading: false, //表格
      total: null,
      timeScreenData: null, //保存一个标识，用来区分是点击还是自动获取

      // 搜索
      restaurants: [],
      state: "",
      timeout: null,
    };
  },
  created() {
    this.getPests();
  },
  mounted() {
    this.plantSeniority(); //害虫paiming
    this.tableDataAxios(); //表格
    this.refreshData();
  },
  computed: {
    options() {
      return {
        chart: {
          zoomType: "x",
          // zoomType: 'y'
        },
        title: {
          text: "虫情统计走势图",
          align: "left",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          crosshair: true, //十字基准线
          type: "datetime",
          dateTimeLabelFormats: {
            //根据时间间距X轴自动显示哪种格式
            millisecond: "%H:%M:%S",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
        },
        yAxis: {
          title: {
            text: "",
          },
        },
        legend: {
          // layout: 'vertical',
          align: "center",
          verticalAlign: "top",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: this.ChartData,
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        credits: {
          //去掉默认的highcharts.com
          enabled: false,
        },
        tooltip: {
          // crosshairs: true,
          shared: true, //折线共享
          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      };
    },
    totalall() {
      return this.tableDataAllB.length;
    },
  },
  methods: {
    refreshData() {
      HighCharts.setOptions({
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },

    //子向父传值
    dateChange(data) {
      this.queryInfo.begin = data.begin;
      this.queryInfo.end = data.end;
      this.lineLoading = true;
      this.pieLoading = true;
      this.pestName = "";
      this.newLineChart(); //测试折线图
      this.plantSeniority(); //害虫排行
      this.tableDataAxios(); //表格
    },
    btnSelected(data) {
      console.log(data);
    },
    // 当使用日期筛选
    timeScreen(data) {
      this.timeScreenData = data;
    },

    insectData(index, row) {
      let obj = {
        code: "2", //1病害 2虫害
        name: row.name, //害虫名称
        page: 1,
      };
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=pest.pests.pests_search",
        data: this.qs.stringify(obj),
      })
        .then((res) => {
          if (res.data.data.nums == 0) {
            //没有数据
            if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "暂无此虫害的信息",
              type: "warning",
              duration: 1500,
            });
            }
          } else if (res.data.data.data.length !== 0) {
            //有数据
            this.insectAxios(res.data.data.data[0].id);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    insectAxios(id) {
      console.log(id);
      let postData = this.qs.stringify({
        code: "2",
        page: 1,
        pest_id: id,
      });
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=pest.pests.pests_info",
        data: postData,
      })
        .then((res) => {
          this.popUpData = res.data.data;
          this.dialogFormVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changePage() {},
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },
    // 获取折线和数据列表
    getPestAllData() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics_total",
        data: this.qs.stringify({
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
          pest_name: this.pestName,
        }),
      }).then((res) => {
        if (res.data.data) {
          let { date, percentage, time_d_sums } = res.data.data;
          if (percentage.length > 0) {
            //害虫种类，下拉框
            this.worms = percentage.map((item) => {
              // 表格统计信息
              this.tableDataAllA.push({
                name: item.name_num,
                sum: item.sum,
              });
              return {
                value: item.name_num,
                label: item.name_num,
              };
            });
            this.tableDataA = this.tableDataAllA.slice(0, 10);
            this.worms.unshift({
              value: "",
              label: "全部",
            });
          }
          this.ChartData = [
            {
              name: "棉铃虫",
              dat: [],
            },
          ];
          // 折线图
          // console.log(this.ChartData);
          for (let i of date) {
            this.ChartData[0].dat.push([i.addtime * 1000, Number(i.at)]);
          }
          console.log(this.ChartData);

          // 表格详细信息
          if (time_d_sums.length > 0) {
            this.tableDataAllB = [];
            time_d_sums.forEach((i) => {
              let arr = i.pest.split("#");
              arr.forEach((j) => {
                let arr2 = j.split(",");
                let obj = {
                  name: this.allPest[arr2[0]],
                  sum: arr2[1],
                  upl_time: this.formatTime(i.addtime * 1000),
                };
                this.tableDataAllB.push(obj);
              });
            });
            this.tableDataB = this.tableDataAllB.slice(0, 10);
          }
          this.lineLoading = false;
          this.pieLoading = false;
        }
      });
    },
    // screenInsect() {
    //   this.lineLoading = true;
    //   this.newLineChart();
    //   this.newDropDown();
    // },
    //获取害虫种类
    getPests() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.worm_list",
      }).then((res) => {
        if (res.data.message == "") {
          this.allPest = res.data.data;
          this.restaurants = this.loadAll(res.data.data); // 搜索
        }
      });
    },
    changePage(e) {
      console.log(e);
      this.queryInfo.page = e;
      this.tableDataAxios();
    },

    // 害虫排行数据
    plantSeniority() {
      var that = this;
      that.tabLoading = true;
      let postData = that.qs.stringify({
        start_time: this.queryInfo.begin, //开始时间 时间戳
        end_time: this.queryInfo.end, //结束时间 时间戳
        // page: "", //页数
        // page_size: "", //一页默认10条数据
        ret: "num", // num: 害虫排名  type: 列表详情数据
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.forecast_system.cbd_pest_type_ranking",
          data: postData,
        })
        .then((res) => {
          console.log(res.data.data);
          // 自动获取数据
          if (res.data.data.length == 0 && this.timeScreenData == null) {
            this.$refs.timeCirculation.say();
            console.log("这是自动的");
          } else {
            console.log("这是点击的");
          }

          if (res.data.data.length !== 0) {
            var arr = [];
            var objA = {};

            for (var i = 0; i < res.data.data.length; i++) {
              if (i !== 0) {
                var obj = {};
                obj["name"] = Object.keys(res.data.data[i])[0];
                obj["val"] = res.data.data[i][obj.name];
                obj["sum"] = i + 1;
                arr.push(obj);
              } else {
                objA["name"] = Object.keys(res.data.data[i])[0];
                objA["val"] = res.data.data[i][objA.name];
              }
            }
            this.plantSeniorityArr = arr;
            this.plantSeniorityObj = objA;
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.pieLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 表格
    tableDataAxios() {
      var that = this;
      that.tabLoading = true;
      let postData = that.qs.stringify({
        start_time: this.queryInfo.begin, //开始时间 时间戳
        end_time: this.queryInfo.end, //结束时间 时间戳
        page: this.queryInfo.page, //页数
        page_size: "10", //一页默认10条数据
        ret: "type", // num: 害虫排名  type: 列表详情数据
        pest_name: this.state,
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.forecast_system.cbd_pest_type_ranking",
          data: postData,
        })
        .then((res) => {
          console.log(res.data.data.cbd_photo_data);
          if (res.data.data.cbd_photo_data.length !== 0) {
            var data = res.data.data.cbd_photo_data;
            console.log(data);
            var arr = [];
            for (var i = 0; i < data.length; i++) {
              var obj = {};
              obj["device_addr"] =
                data[i].device_addr == "" ? "暂无地址" : data[i].device_addr;
              obj["device_id"] = data[i].device_id;
              obj["device_name"] = data[i].device_name;
              obj["pest_num"] = data[i].pest_num;
              obj["pest_name"] = data[i].pest_name;
              arr.push(obj);
            }
            this.tableDataA = arr;
            this.total = res.data.data.num;
          } else {
            this.tableDataA = [];
          }
          console.log(this.tableDataA);
          // console.log(this.tableDataA)
          that.tabLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 害虫名称事件
    plantName(row, column, event, cell) {
      console.log(row);
      this.dialogFormVisibleAList = row.pest_name;
      this.dialogFormVisibleA = true;
    },

    // 测试新折线图接口
    newLineChart() {
      var that = this;
      let postData = that.qs.stringify({
        start_time: that.queryInfo.begin, // 开始时间
        end_time: that.queryInfo.end, //结束时间
        pest_name: this.pestName, // 害虫名称
        ret: "day_month", //day_month: 24小时数据、近一个月数据    half_year: 半年、一年数据
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.forecast_system.cbd_pest_line_chart",
          data: postData,
        })
        .then((res) => {
          // 自动获取数据
          if (res.data.data.length == 0 && this.timeScreenData == null) {
            this.$refs.timeCirculation.say();
          }

          var date = res.data.data;
          var percentage = res.data.data;
          if (percentage.length > 0) {
            //害虫种类，下拉框
            this.worms = percentage.map((item) => {
              return {
                value: item.pest_name,
                label: item.pest_name,
              };
            });
            this.worms.unshift({
              value: "",
              label: "全部",
            });
          }
          // 折线图
          var dataList = [];
          var index = 0;
          for (let i of date.data) {
            var obj = {};
            var arr = [];
            obj["name"] = i.pest_name;
            if (date.data.length > 10) {
              if (
                index == 0 ||
                index == 1 ||
                index == 2 ||
                index == 3 ||
                index == 4
              ) {
                obj["visible"] = true;
                // console.log("显示");
              } else {
                // console.log("不显示");
                obj["visible"] = false;
              }
            }

            arr.push([
              Math.floor(new Date(i.addtime).getTime() + 8 * 60 * 60 * 1000),
              Number(i.pest_num),
            ]);
            obj["data"] = arr;
            dataList.push(obj);
            index++;
          }

          // 测试
          // 折线图
          var ChartData = [];
          var index = 0;
          for (let i of date.data) {
            var obj = {};
            var arr = [];
            obj["name"] = i.pest_name;
            if (date.data.length > 10) {
              if (
                index == 0 ||
                index == 1 ||
                index == 2 ||
                index == 3 ||
                index == 4
              ) {
                obj["visible"] = true;
              } else {
                obj["visible"] = false;
              }
            }

            arr.push([
              Math.floor(new Date(i.addtime).getTime() + 8 * 60 * 60 * 1000), // 毫秒
              Number(i.pest_num),
            ]);
            obj["data"] = arr;
            ChartData.push(obj);
            index++;
          }
          // 将name重复的数据合并
          this.jfList(ChartData);
          this.lineLoading = false;

          // 测试
          var a = [];
          var flag;
          for (let i in this.ChartData.length) {
            flag = true;
            for (var j in a) {
              if (a[j].label == this.ChartData[i]) {
                flag = false;
                break;
              }
            }
            if (flag) {
              var obj = { name: this.ChartData[i].visible };
            }
          }
          console.log(a);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新下拉框接口
    newDropDown() {
      var that = this;
      let postData = that.qs.stringify({
        start_time: that.queryInfo.begin, // 开始时间
        end_time: that.queryInfo.end, //结束时间
        pest_name: this.pestName, // 害虫名称
        ret: "day_month", //day_month: 24小时数据、近一个月数据    half_year: 半年、一年数据
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.forecast_system.cbd_pest_line_chart",
          data: postData,
        })
        .then((res) => {
          if (res.data.data.length !== 0) {
            var date = res.data.data;
            var percentage = res.data.data;
            if (percentage.length > 0) {
              //害虫种类，下拉框
              this.worms = percentage.map((item) => {
                return {
                  value: item.pest_name,
                  label: item.pest_name,
                };
              });
              this.worms.unshift({
                value: "",
                label: "全部",
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击查询害虫信息 - name搜索
    plantQuery(data) {
      console.log(data.pest_name);
      var that = this;
      // 先使用害虫名称进行搜索获取到虫害ID
      let postData = that.qs.stringify({
        code: "2", // 病虫害区别 1：病害  2：虫害
        name: data.pest_name, // 病虫害名字  如果传name代表搜索  如果不穿name代表搜索列表
        page: 1, //页数
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=pest.pests.pests_search",
          data: postData,
        })
        .then((res) => {
          if (
            res.data.data.data !== undefined &&
            res.data.data.data.length != 0
          ) {
            console.log(res.data.data.data[0].id);
            that.seekPlantId(res.data.data.data[0].id);
          } else {
            if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "没有查询到该害虫的相关详情",
              type: "error",
              duration: 1500,
            });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击查询害虫信息 - id搜索
    seekPlantId(id) {
      var that = this;
      let postData = that.qs.stringify({
        pest_id: id, //病虫害id
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=pest.pests.pests_info",
          data: postData,
        })
        .then((res) => {
          console.log(res.data);
          var data = res.data.data;
          that.popUpData = data;
          let Adata = data.prevention;
          var a = Adata.replace(/]/g, "：");
          let Bdata = new Array();
          Bdata = a.split("[");
          that.preventio = Bdata;
          that.dialogFormVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 测试
    jfList(data) {
      var listArr = [];
      data.forEach(function (el, index) {
        for (var i = 0; i < listArr.length; i++) {
          // 对比相同的字段key，相同放入对应的数组
          if (listArr[i].name == el.name && el.data !== undefined) {
            listArr[i].data.push(el.data[0]);
            if (i == 0 || i == 1 || i == 2 || i == 3 || i == 4) {
              listArr[i].visible = true;
            } else {
              // listArr[i].visible = el.visible;
              listArr[i].visible = false;
            }
            return;
          }
        }
        // 第一次对比没有参照，放入参照
        listArr.push({
          name: el.name,
          data: el.data,
          visible: el.visible,
        });
      });
      console.log("处理后。。。", listArr);
      this.ChartData = listArr;
    },

    // 搜索
    loadAll(data) {
      var list = [];
      for (var i in data) {
        list.push({
          value: data[i],
          label: data[i],
        });
      }
      return list;
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.tableDataAxios();
    },
  },
  components: {
    DateSearch,
  },
};
</script>

<style lang='less' scoped>
.equipInfo {
  .equipMsg {
    font-size: 14px;
    color: #3d3d3d;
    span {
      margin-left: 5px;
    }
  }
  .dateBox {
    display: flex;
  }
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dataTableSearch {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 80px 0;
  .el-input__inner {
    width: 222px;
  }
}
.box-card {
  position: relative;
  .chartsSelect {
    text-align: right;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 21px;
  }
}
// 弹框
.expertDiagnosis_library_main_popUp {
  .expertDiagnosis_library_main_popUp_li {
    display: flex;
    margin: 0 0 30px 0;
    // 害虫名称
    .expertDiagnosis_library_main_popUp_li_name {
      color: #000;
      font-size: 16px;
      font-weight: 550;
    }
    .expertDiagnosis_library_main_popUp_li_nameVal {
      font-weight: 550;
    }
    // 害虫图片
    .expertDiagnosis_library_main_popUp_li_img {
      font-size: 16px;
      font-weight: 550;
      color: #000;
    }
    .expertDiagnosis_library_main_popUp_li_imgVal {
      width: 160px;
      height: 160px;
      border-radius: 10px;
    }
    // 详细信息
    .expertDiagnosis_library_main_popUp_li_details {
      // width: 188px;
      width: 80px;
      font-size: 16px;
      font-weight: 550;
      color: #000;
    }
    .expertDiagnosis_library_main_popUp_li_detailsVal {
      line-height: 30px;
      font-weight: 550;
      width: 800px;
      text-align: left;
    }
  }
}

// 害虫排名
.deviceTongji_rankingBox {
  //   border: 1px solid #000;
  margin: 0 auto;
  .deviceTongji_rankingBox_ul {
    .deviceTongji_rankingBox_list {
      margin: 25px auto;
      display: flex;
      width: 80%;
      justify-content: space-between;
      font-size: 13px;
      .deviceTongji_rankingBox_listNumber {
        color: #333333;
      }
      .deviceTongji_rankingBox_listName {
        color: #333333;
      }
      .deviceTongji_rankingBox_listSum {
        color: #59da97;
      }
    }
  }
}

.backdropStyle {
  background: url(../../../../static/images/deviceTongji/1.png) no-repeat;
  position: relative;
  background-size: 45% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  height: 135px;
}
.backdropStyle_box {
  position: absolute;
  // top: 45px;
  // left: 121px;
  top: 35px;
  // left: 41%;
  left: 34%;
  color: #fff;
  width: 30%;
}
.backdropStyle_boxName {
  // font-size: 20px;
  font-size: 17px;
  // margin: 0 0 0 -6px;
  // margin: 0 0 0 6%;
  text-align: center;
}
.backdropStyle_boxNum {
  font-size: 12px;
  margin: 2px 0 0 8px;
  text-align: center;
}

// 暂无数据
.noDataClass {
  text-align: center;
  font-size: 25px;
  line-height: 402px;
  color: rgb(122, 115, 115);
}

// 害虫名称数量
.dialogFormVisibleA_ul {
  display: flex;
  flex-flow: wrap;
  // justify-content: space-between;
  .dialogFormVisibleA_list {
    border: 1px solid #c4c8d0;
    padding: 10px 15px;
    margin: 5px 0 5px 15px;
    border-radius: 5px;
    cursor: pointer;
  }
}

// 表格文字居中
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}
</style>