performance-test/src/views/performance/components/analysisEvent.vue

<!--
 * @Author: your name
 * @Date: 2024-05-29 09:13:51
 * @LastEditTime: 2025-07-01 16:02:54
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
-->
<template>
  <!-- 分析事件页面 -->
  <div v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      label-position="right"
      label-width="120px"
      inline
    >
      <el-row type="flex" justify="end">
        <el-col :span="12">
          <el-form-item label="分析主题:">
            <span>{{ analysisName }}</span>
          </el-form-item>
          <el-form-item label="分析风场:">
            <span>{{ fieldName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="display: flex; justify-content: end">
          <el-form-item class="searchFrom">
            <!-- <span>分析主题：{{ analysisName }}</span>
            <span>分析风场：{{ fieldName }}</span> -->
            <el-button type="primary" @click="onSubmit" size="small"
              >分析</el-button
            >
            <el-button size="small" @click="resetForm">重置</el-button>
            <!-- <el-button
              type="info"
              size="small"
              @click="drawer = true"
              icon="el-icon-setting"
            ></el-button> -->
            <i @click="drawer = true" class="el-icon-setting setting"></i>
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="数据关联：" name="1">
          <el-row class="flex-wrap-row" :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="机组名称"
                v-if="checkedCities.find((item) => item === '机组名称')"
              >
                <el-select
                  multiple
                  collapse-tags
                  v-model="form.turbines"
                  placeholder="请选择机组名称"
                  size="small"
                  clearable
                >
                  <el-checkbox
                    v-model="checkedTurbines"
                    @change="selectAllTurbines"
                    >全选</el-checkbox
                  >
                  <el-option
                    v-for="item in windEngineGroupList"
                    :key="item.engineCode"
                    :label="item.engineName"
                    :value="item.engineCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="分析模型"
                v-if="checkedCities.find((item) => item === '分析模型')"
                prop=""
              >
                <el-select
                  v-model="form.configAnalysis"
                  placeholder="请选择分析模型"
                  size="small"
                  collapse-tags
                  multiple
                  clearable
                  @change="handleScadaAnalysis"
                >
                  <el-checkbox v-model="checked" @change="selectAll"
                    >全选</el-checkbox
                  >
                  <el-option
                    v-for="(item, indsanal) in analysisTypeList"
                    :key="item.typeCode + indsanal + 'analysisTypeList'"
                    :label="item.typeName"
                    :value="`${item.typeCode}|${item.typeFlag}`"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="数据源(选填)"
                v-if="checkedCities.find((item) => item === '数据源')"
              >
                <el-select
                  v-model="form.scada"
                  placeholder="请选择数据源"
                  size="small"
                  clearable
                  @change="handleScada"
                >
                  <el-option
                    v-for="(TranItem, indTran) in transferTypeData"
                    :key="TranItem.transferType + TranItem + 'transferTypeData'"
                    :label="TranItem.transferTypeName"
                    :value="TranItem.transferType"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <!-- v-hasPermi="['home:offlinedata']" -->
              <el-form-item
                label="开始时间"
                v-if="checkedCities.find((item) => item === '分析时间')"
              >
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="picker[0]"
                  size="small"
                  type="datetime"
                  placeholder="选择分析开始时间"
                  :picker-options="pickerOptions"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <!-- v-hasPermi="['home:offlinedata']" -->
              <el-form-item
                label="结束时间"
                v-if="checkedCities.find((item) => item === '分析时间')"
              >
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="picker[1]"
                  size="small"
                  type="datetime"
                  placeholder="选择分析结束时间"
                  :picker-options="pickerOptions"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="5">
              <el-form-item
                label="滤除月份"
                v-if="checkedCities.find((item) => item === '滤除月份')"
              >
                <el-date-picker
                  value-format="yyyy-MM"
                  width="200"
                  size="small"
                  type="months"
                  v-model="form.excludingMonths"
                  placeholder="选择一个或多个月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item
          title="数据源测点过滤设置："
          name="2"
          v-if="checkedCities.find((item) => item === '数据源过滤')"
        >
          <el-row :gutter="5">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="风速过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueWindSpeed[0]"
                    @input="ensureMinValue(form.valueWindSpeed, 0)"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueWindSpeed[1]"
                    @input="ensureMinValue(form.valueWindSpeed, 1)"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="桨距角过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valuePitchAngle[0]"
                    @input="ensureMinValue(form.valuePitchAngle, 0)"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valuePitchAngle[1]"
                    @input="ensureMinValue(form.valuePitchAngle, 1)"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="有功功率过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueActivePower[0]"
                    @input="ensureMinValue(form.valueActivePower, 0)"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueActivePower[1]"
                    @input="ensureMinValue(form.valueActivePower, 1)"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="发电机转速过滤">
                <div class="demo-input-suffix">
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最小值"
                    v-model="form.valueGeneratorSpeed[0]"
                    @input="ensureMinValue(form.valueGeneratorSpeed, 0)"
                  >
                  </el-input>
                  <el-input
                    type="number"
                    :min="1"
                    size="small"
                    placeholder="最大值"
                    v-model="form.valueGeneratorSpeed[1]"
                    @input="ensureMinValue(form.valueGeneratorSpeed, 1)"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-card shadow="always" class="box-card">
      <el-row>
        <div class="filedView">
          <span></span>
          <span>风场信息概览</span>

          <el-button type="primary" size="small" @click="handleBtn"
            >切换{{ disableMsg }}</el-button
          >
        </div>
      </el-row>
      <el-row>
        <el-col :span="24" v-if="disableMsg === '地图'">
          <div class="left">
            <el-table :data="batchList" border>
              <el-table-column prop="engineName" label="风机名称">
              </el-table-column>
              <el-table-column prop="ratedCapacity" label="额定容量/KW">
              </el-table-column>
              <el-table-column prop="ratedWindSpeed" label="额定风速(m/s)">
              </el-table-column>
              <el-table-column prop="hubHeight" label="轮毂高度(m)">
              </el-table-column>
              <el-table-column prop="sightcing" label="是否标杆">
                <template slot-scope="{ row }">
                  {{ row.sightcing == 1 ? "是" : "否" }}
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="formInline.pageNum"
                layout="total, prev, pager, next"
                :page-size="formInline.pageSize"
                :total="formInline.totalSize"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
        <el-col :span="24" v-loading="htmlLoading" v-else>
          <div class="right">
            <Map></Map>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-drawer
      title="偏好设置"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      class="drawerOption"
    >
      <el-row>
        <el-col :span="12"
          ><div class="drawerLeft">
            <div style="text-align: center; font-size: 16px">常用功能设置</div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
              <el-checkbox label="数据源过滤" key="数据源过滤"></el-checkbox>
              <!-- <div class="checkFromRow">
                <el-row>
                  <el-col :span="12">发电机转速测点</el-col>
                  <el-col :span="12">桨距角值测点</el-col>
                  <el-col :span="12">有功功率测点</el-col>
                  <el-col :span="12">风速速度测点</el-col>
                </el-row>
              </div> -->
            </el-checkbox-group>
          </div></el-col
        >
        <el-col :span="12">
          <div class="drawerRight">
            <div style="text-align: center; font-size: 16px">已选中功能</div>
            <ul>
              <li v-for="func in checkedCities" :key="func">
                {{ func }}
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="removeFunction(func)"
                ></el-button>
              </li>
            </ul></div
        ></el-col>
      </el-row>
      <div class="demo-drawer__footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">{{ "确 定" }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  analysisEditQuery,
  analysis,
  queryDataTime,
  queryAllTypeScada,
} from "@/api/performance";
import {
  getWindEngineGroup,
  windEngineGrouPage,
  getWindEngineGroupRatedListByFieldCodePage,
} from "@/api/ledger";
import Map from "./map.vue";
import axios from "axios";
export default {
  components: {
    Map,
  },
  props: {
    activeName: String,
    fieldName: {
      type: String,
      default: "",
    },
    analysisName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      disableMsg: "表格",
      formInline: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      batchList: [],
      checkedTurbines: false,
      checked: false,
      htmlLoading: false,
      engineCode: null, //台账机组编号
      picker: [],
      dataMinTime: null,
      dataMaxTime: null,
      // pickerOptions: {
      //   disabledDate: this.disabledDate,
      // },
      loading: false,
      form: {
        configAnalysis: null, //分析模型
        powerFarmID: null, //风场编号//通过路由获取的默认传递的
        dataBatchNum: null, //批次号
        scada: "", //scada数类型
        turbines: [], //机组编号
        beginTime: null, //开始时间
        endTime: null, //结束时间
        excludingMonths: null, //过滤月份
        valueWindSpeed: [], //风速值最大最小 数组第一值为min  第二个 max
        valuePitchAngle: [], //桨距角最大最小
        valueActivePower: [], //有功功率
        valueGeneratorSpeed: [], //发电机转速
        //图像
        dgeneratorSpeed: [], //直驱发电机转速轴系 第一个值为步长 第二个min 第三个 max
        igeneratorSpeed: [], //非直驱发电机转速轴系设置
        dgeneratorTorque: [], //直驱发电机转矩轴系
        igeneratorTorque: [], //非直驱发电机转矩轴系
        cp: [], //风能利用系数轴系
        tsr: [], //叶尖速比轴系
        pitchAngle: [], //桨距角轴系
        activePower: [], //有功功率轴系
      },
      activeNames: ["1", "2", "3"],
      checkAll: false,
      checkedCities: ["分析模型", "数据源", "分析时间", "滤除月份", "机组名称"],
      cities: ["分析模型", "数据源", "分析时间", "滤除月份", "机组名称"],
      isIndeterminate: true,
      drawer: false,
      direction: "rtl",
      value: "",
      options: [],
      tabIndex: 2,
      analysisTypeList: [],
      windEngineGroupList: [],
      windDetail: {},
      transferTypeData: [],
      // 时间范围数组
      timeRanges: [
        // { start: '2024-12-01 00:00:00', end: '2024-12-30 23:59:59' },
      ],
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate: this.disabledDate,
      };
    },
  },
  watch: {
    activeName: {
      handler(newVal, oldVal) {
        // console.log(newVal, "新值 分析事件");
      },
    },
  },
  created() {
    //获取分析 分析模型、机组编号 列表
    this.getWindCodeList();
    this.getQueryDataTime();
    this.getFengjiList();
    queryAllTypeScada().then((res) => {
      this.transferTypeData = res.data;
      this.getTimeList();
    });
  },
  methods: {
    //切换风机信息展示
    handleBtn() {
      this.disableMsg = this.disableMsg == "表格" ? "地图" : "表格";
    },
    getTimeList() {
      let scada = [];
      if (this.form.scada) {
        scada.push(this.form.scada);
      } else {
        scada = this.form.configAnalysis.map((item) => {
          return item.split("|")[1];
        });
      }
      axios
        .post("/transDataWeb/dataTransfer/getTimeRange", {
          transferType: [...new Set(scada)],
          windFarmCode: this.$route.query.fieldEngineCode,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.timeRanges = res.data.datas;
            // this.formData = { ...res.data.datas };
          }
        })
        .catch((error) => {});
    },
    getFengjiList() {
      getWindEngineGroupRatedListByFieldCodePage({
        fieldCode: this.$route.query.fieldEngineCode,
        ...this.formInline,
        totalSize: undefined,
      }).then((res) => {
        this.batchList = res.data.list;
        this.formInline.totalSize = res.data.totalSize;
      });
    },
    //分页数据切换
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getFengjiList();
    },

    // 禁用日期函数
    disabledDate(time) {
      const timeInMs = time.getTime();
      // 判断日期是否在任意一个时间范围内
      const isDisabled = !this.timeRanges.some((range) => {
        const start = new Date(range.startTime).getTime();
        const end = new Date(range.endTime).getTime();
        return timeInMs >= start && timeInMs <= end;
      });
      return isDisabled;
    },

    handleScadaAnalysis(obj) {
      const scada = obj[obj.length - 1].split("|")[0];
      if (
        scada === "temperature_large_components" ||
        scada === "production_indicator" ||
        scada === "fault"
      ) {
        this.$message.warning("当前分析模型无法单独分析");
      }
      this.getTimeList();

      // this.getQueryDataTime();
    },
    handleScada() {
      this.getTimeList();
      // this.getQueryDataTime();
    },
    async getQueryDataTime() {
      const res = await queryDataTime({
        batchCode: this.$route.query.batchCode,
        dataTransferType: this.form.scada,
      });
      if (res.data && res.data.dataMinTime && res.data.dataMaxTime) {
        this.dataMinTime = res.data.dataMinTime; // 可选最小时间
        this.dataMaxTime = res.data.dataMaxTime; // 可选最大时间
        // 更新日期选择器的默认范围
      } else {
        this.dataMinTime = null; // 可选最小时间
        this.dataMaxTime = null; // 可选最大时间
      }
    },

    selectAllTurbines() {
      this.form.turbines = [];
      if (this.checkedTurbines) {
        this.windEngineGroupList.map((item) => {
          this.form.turbines.push(item.engineCode);
        });
      } else {
        this.form.turbines = [];
      }
    },
    selectAll() {
      this.form.configAnalysis = [];
      if (this.checked) {
        this.analysisTypeList.map((item) => {
          this.form.configAnalysis.push(`${item.typeCode}|${item.typeFlag}`);
        });
      } else {
        this.form.configAnalysis = [];
      }
      this.getTimeList();
    },

    ensureMinValue(field, index) {
      if (field[index] < 1) {
        field[index] = 1;
      }
    },
    handleEngineCode(e) {
      this.engineCode = e;
      this.getWindEngList();
    },
    async getWindEngList() {
      this.loading = true;
      try {
        const res = await getWindEngineGroup({
          engineCode: this.engineCode,
        });
        this.loading = false;
        this.windDetail = res.data;
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
    async getAnalysis() {
      this.loading = true;
      try {
        await analysis({
          // ...this.form,
          configAnalysis:
            this.form.configAnalysis !== null
              ? this.form.configAnalysis
              : undefined, //分析模型
          powerFarmID: this.$route.query.fieldEngineCode, //风场编号//通过路由获取的默认传递的
          dataBatchNum: this.$route.query.batchCode, //批次号
          scada: this.form.scada !== null ? this.form.scada : undefined, //scada数类型
          turbines:
            this.form.turbines.length > 0 ? this.form.turbines : undefined, //机组编号
          excludingMonths:
            this.form.excludingMonths === null
              ? undefined
              : this.form.excludingMonths, //过滤月份
          valueWindSpeed:
            this.form.valueWindSpeed.length > 0
              ? this.form.valueWindSpeed
              : undefined, //风速值最大最小 数组第一值为min  第二个 max
          valuePitchAngle:
            this.form.valuePitchAngle.length > 0
              ? this.form.valuePitchAngle
              : undefined, //桨距角最大最小
          valueActivePower:
            this.form.valueActivePower.length > 0
              ? this.form.valueActivePower
              : undefined, //有功功率
          valueGeneratorSpeed:
            this.form.valueGeneratorSpeed.length > 0
              ? this.form.valueGeneratorSpeed
              : undefined, //发电机转速
          //图像
          dgeneratorSpeed:
            this.form.dgeneratorSpeed.length > 0
              ? this.form.dgeneratorSpeed
              : undefined, //直驱发电机转速轴系 第一个值为步长 第二个min 第三个 max
          igeneratorSpeed:
            this.form.igeneratorSpeed.length > 0
              ? this.form.igeneratorSpeed
              : undefined, //非直驱发电机转速轴系设置
          dgeneratorTorque:
            this.form.dgeneratorTorque.length > 0
              ? this.form.dgeneratorTorque
              : undefined, //直驱发电机转矩轴系
          igeneratorTorque:
            this.form.igeneratorTorque.length > 0
              ? this.form.igeneratorTorque
              : undefined, //非直驱发电机转矩轴系
          cp: this.form.cp.length > 0 ? this.form.cp : undefined, //风能利用系数轴系
          tsr: this.form.tsr.length > 0 ? this.form.tsr : undefined, //叶尖速比轴系
          pitchAngle:
            this.form.pitchAngle.length > 0 ? this.form.pitchAngle : undefined, //桨距角轴系
          activePower:
            this.form.activePower.length > 0
              ? this.form.activePower
              : undefined, //有功功率轴系
          beginTime: this.picker[0], //开始时间
          endTime: this.picker[1], //结束时间
        });
        this.$message({
          type: "success",
          message: "已分析请前往分析详情中查看结果",
        });
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
    async getWindCodeList() {
      this.loading = true;
      try {
        const response = await analysisEditQuery({
          batchCode: this.$route.query.batchCode,
        });
        if (
          response.data.windEngineGroupList === null ||
          response.data.windEngineGroupList.length === 0
        ) {
          this.$message({
            type: "warning",
            message: "当前风场没有风机，无法进行分析",
          });
          // this.$router.push("/home/performance/assetssMag");
        }
        this.form.powerFarmID = this.$route.query.fieldEngineCode;
        this.form.dataBatchNum = this.$route.query.batchCode;
        this.analysisTypeList = response.data.analysisTypeList;
        this.windEngineGroupList = response.data.windEngineGroupList;
        this.engineCode =
          response.data.windEngineGroupList !== null &&
          response.data.windEngineGroupList.length > 0
            ? response.data.windEngineGroupList[0].engineCode
            : null;
        if (response.data.windEngineGroupList.length > 0) {
          //获取台账机组编号
          this.getWindEngList();
        }
        this.loading = false;
      } catch (error) {
        this.$message({
          type: "error",
          message: error,
        });
        this.loading = false;
        this.$router.push("/home/performance/assetssMag");
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val
        ? [...this.cities, "数据源过滤", "图像设置"]
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length + 2;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length + 2;
    },
    removeFunction(item) {
      this.checkedCities = this.checkedCities.filter((fuc) => fuc !== item);
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.drawer = false;
        })
        .catch((_) => {});
    },

    onSubmit() {
      this.getAnalysis();
    },
    resetForm() {
      this.picker = [];
      this.form = {
        configAnalysis: null, //分析模型
        powerFarmID: this.$route.query.fieldEngineCode, //风场编号//通过路由获取的默认传递的
        dataBatchNum: this.$route.query.batchCode, //批次号
        scada: "", //scada数类型
        turbines: [], //机组编号
        beginTime: null, //开始时间
        endTime: null, //结束时间
        excludingMonths: null, //过滤月份
        valueWindSpeed: [], //风速值最大最小 数组第一值为min  第二个 max
        valuePitchAngle: [], //桨距角最大最小
        valueActivePower: [], //有功功率
        valueGeneratorSpeed: [], //发电机转速
        //图像
        dgeneratorSpeed: [], //直驱发电机转速轴系 第一个值为步长 第二个min 第三个 max
        igeneratorSpeed: [], //非直驱发电机转速轴系设置
        dgeneratorTorque: [], //直驱发电机转矩轴系
        igeneratorTorque: [], //非直驱发电机转矩轴系
        cp: [], //风能利用系数轴系
        tsr: [], //叶尖速比轴系
        pitchAngle: [], //桨距角轴系
        activePower: [], //有功功率轴系
      };
    },
    // 清空内容
    clear() {
      this.$refs.editor.clear();
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin: 10px 0;
  width: 100%;
  font-size: 14px;
  height: 100%;
  .filedView {
    height: 60px;
    // line-height: 60px;
    background-color: #fff;
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #ebeef5;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .el-card__body {
    width: 100%;
    height: 100% !important;
    .left {
      > div {
        line-height: 3;
      }
    }
    .el-row {
      height: 100%;
      width: 100%;
    }
    .el-col {
      min-height: 500px;
    }

    .right {
      height: 500px;
      width: 100%;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.el-select-dropdown__wrap {
  .el-select-dropdown__list {
    .el-checkbox {
      display: flex;
      justify-content: end;
      margin: 0px 20px;
    }
  }
}

// .setting {
//   font-size: 20px;
//   font-weight: 900;
// }
::v-deep.el-select--small,
::v-deep.el-select__tags {
  width: 220px !important;
  // min-width: 180px !important;
  .el-tag--light {
    display: flex;
    justify-content: space-between;
  }
  .el-tag--light:nth-child(1) {
    width: 125px;
  }
}
::v-deep .searchFrom {
  .el-form-item__content {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
    i {
      margin-left: 10px;
      font-size: 24px;
      font-weight: 800;
    }
  }
}

::v-deep.drawerOption {
  .el-drawer {
    width: 33% !important;
  }
  .el-checkbox-group {
    line-height: 40px !important;
  }
  .drawerLeft {
    margin-left: 20px;
    color: #606266 !important;
  }
  .checkFromRow {
    .el-col-12 {
      color: #606266 !important;
      font-size: 14px;
    }
    .el-col-12:nth-child(even) {
      text-align: end !important;
    }
  }
  .drawerRight {
    margin-right: 20px;
    color: #606266 !important;
    font-size: 14px;
    ul {
      list-style-type: none;
      padding: 0;
      color: #606266 !important;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        line-height: 40px !important;
      }
    }
  }
  .demo-drawer__footer {
    display: flex;
    margin-top: 50px;
    justify-content: center;
  }
}
::v-deep.el-input--small .el-input__inner {
  width: 220px !important;
}
.demo-input-suffix {
  display: flex !important;
}
::v-deep.demo-input-suffix .el-input--small {
  width: 100px !important;
}
::v-deep.demo-input-suffix .el-input--small .el-input__inner {
  width: 90px !important;
}
.abalysisType {
  margin-top: 30px;
}
::v-deep .el-table th.el-table__cell > .cell {
  display: block !important;
}
</style>