gas-injection/src/views/vent/monitorManager/fanLocalMonitor/components/conditionAssistance.vue

<template>
  <BasicModal
    @register="register"
    title="局部通风机运行工况智能决策"
    :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
    :width="isComputeGas ? '1350px' : '950px'"
    v-bind="$attrs"
    @ok="onSubmit"
    :closeFunc="onCancel"
    :canFullscreen="false"
    :destroyOnClose="true"
    :footer="null"
    :maskClosable="false"
  >
    <div class="modal-box">
      <div v-if="isComputeGas" class="left-box" style="width: 550px; height: 400px">
        <BarAndLine
          class="echarts-line"
          xAxisPropType="time"
          :dataSource="monitorData"
          height="400px"
          :chartsColumns="chartsColumnList"
          :option="echatsOption"
        />
      </div>
      <div class="center-box">
        <a-spin :spinning="loadding" tip="正在计算，请稍等。。。">
          <div ref="ChartRef" class="info-echarts" :style="{ width: isComputeGas ? '450px' : '520px', height: '350px' }"></div>
        </a-spin>
      </div>
      <div class="right-box">
        <!-- <div class="box-title">曲线方程</div> -->
        <dv-decoration7 style="height: 20px">
          <div class="box-title">曲线方程</div>
        </dv-decoration7>
        <div class="info-lines">
          <div v-for="(item, index) in lineEquation" class="info-item" :key="index">
            <div class="title">{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="tip-box">
        <div class="title">最佳工况点 <SendOutlined class="ml-5px" /></div>
        <div class="tip-container" :style="{ width: isComputeGas ? '898px' : '1000px' }">
          <template v-if="resultObj && isHaCross">
            <div class="ml-10px">
              <span>频率:</span>
              <span style="color: #d066ff; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.Hz) }}Hz</span>
            </div>
            <div class="ml-10px">
              <span>风量:</span>
              <span style="color: #3adeff; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.x) }} m³/min</span>
            </div>
            <div class="ml-10px">
              <span>负压</span>
              <span style="color: #ffbe34; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.y) }} Pa</span>
            </div>
          </template>
          <div v-else-if="isHaCross" class="ml-10px">暂无</div>
          <div v-else style="color: #ffbe34; padding: 0 10px; font-weight: 600" class="ml-10px">无有效工况点</div>
        </div>
      </div>
    </div>
    <div class="setting-box">
      <div class="right-inputs">
        <div class="vent-flex-row">
          <div class="input-title">风量(m³/min)：</div>
          <InputNumber :disabled="isComputeGas" class="input-box" size="large" v-model:value="uQ1" />
          <div class="input-title">风压(Pa)：</div>
          <InputNumber :disabled="isComputeGas" class="input-box" size="large" v-model:value="uH" />
          <div v-if="!isComputeGas" class="btn btn1" @click="makeLine">决策工况</div>
          <template v-else>
            <div class="btn btn1" @click="startCompute">一键调控</div>
            <div class="btn btn1" @click="resetCompute">一键复位</div>
          </template>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
//ts语法
import { ref, onMounted, reactive, nextTick, computed } from 'vue';
import echarts from '/@/utils/lib/echarts';
import { option, initData, fanInfoData, chartsColumnList, echatsOption } from '../fanLocal.data';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useForm } from '/@/components/Form/index';
import { Input, InputNumber } from 'ant-design-vue';
import { Decoration7 as DvDecoration7 } from '@kjgl77/datav-vue3';
import { message } from 'ant-design-vue';
import { formatNum } from '/@/utils/ventutil';
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { cloneDeep } from 'lodash-es';
import dayjs from 'dayjs';
import { SendOutlined } from '@ant-design/icons-vue';

const emit = defineEmits(['close', 'register', 'openModal']);
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  frequency: {
    type: Number,
    default: 30,
  },
  m3: {
    type: Number,
    default: 670.8,
  },
  // gasWarningMax: { type: Number, default: 0.5 },
  // gasWarningVal: { type: Number, default: 0.6 },
  // windQuantity: { type: Number, default: 635.84 },
});
type AssistanceItemType = {
  angle: number;
  Hz: number;
  a: number;
  b: number;
  c: number;
  min: number;
  max: number;
};

// 注册 modal
const [register, { closeModal }] = useModalInner((data) => {
  nextTick(() => {
    computeAssistance();
    if (option['xAxis']) option['xAxis']['data'] = xData;
    option['series'] = yDataList;
    if (JSON.stringify(data) !== '{}') {
      uQ1.value = Number(data['m3']);
      uHz.value = Math.ceil(data['frequency']);
      gasWarningVal.value = data['gasWarningVal'];
      isComputeGas.value = true;
      nextTick(() => {
        computeUH(data['frequency'], data['m3']);
        initEcharts();
        setTimeout(() => {
          // 根据频率计算uH
          makeLine();
        }, 2000);
      });
    } else {
      initEcharts();
      isComputeGas.value = false;
    }
  });
});
const loadding = ref<boolean>(false);
const formShow = ref(false);
const formType = ref('');
const ChartRef = ref();
const myChart = ref();
const refresh = ref(true);
const xDataMax = 1000;
let xDataMin = 0;
const xData: any[] = [];
const yDataList: [] = [];
let lineNum = 0;
const lineEquation = ref<string[]>([]);
const assistanceData = ref([]);
const monitorData = ref([]);
const gasWarningVal = ref(0);
const gasWarningMax = ref(0.5);
const isComputeGas = ref(false);
const isStartCompute = ref(0);
const uHz = ref(0);
const uQ1 = ref(0);
const uQ = computed(() => {
  if (uQ1.value) {
    if (gasWarningVal.value) {
      return ((uQ1.value * gasWarningVal.value) / gasWarningMax.value) * 1.08;
    }
    return uQ1.value;
  } else {
    return 0;
  }
});
const uH = ref<number | undefined>(undefined); //  - 1000
const isHaCross = ref(true);
const resultObj = ref<{ x: number; y: number; Hz: number } | null>(null);

const [registerForm, {}] = useForm({
  labelWidth: 120,
  actionColOptions: {
    span: 24,
  },
  compact: true,
  showSubmitButton: true,
  submitButtonOptions: {
    text: '提交',
    preIcon: '',
  },
  showResetButton: true,
  resetButtonOptions: {
    text: '关闭',
    preIcon: '',
  },
  resetFunc: async () => {
    formShow.value = false;
  },
});

function computeAssistance() {
  assistanceData.value = initData();
  lineNum = 0;
  const assistanceDataList = [];
  const lineEquationList: string[] = [];
  for (const key in assistanceData.value) {
    const item = assistanceData.value[key];
    assistanceDataList.push(item);
    lineEquationList.push(
      `H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(4)}Q ${
        Number(item['c']) > 0 ? '+' : '-'
      } ${Math.abs(Number(item['c'])).toFixed(4)}`
    );
  }
  lineEquation.value = lineEquationList;
  lineNum = assistanceDataList.length;
  xDataMin =
    Math.min.apply(
      Math,
      assistanceDataList.map((item) => {
        return item.min;
      })
    ) - 100;
  // const xDataMax = Math.max.apply(Math, assistanceDataList.map(item => { return item.max }))
  fanInfoData.flfw = `${xDataMin}~${xDataMax}`;
  const computeItem = (item: AssistanceItemType) => {
    const min = item.min;
    const max = item.max;
    const HList: number[] = [];
    for (let i = xDataMin; i <= xDataMax; i++) {
      if (i < min) {
        HList.push(null);
      } else if (i > max) {
        HList.push(null);
      } else {
        HList.push(item.a * i * i + item.b * i + item.c);
      }
    }
    return HList;
  };

  for (const key in assistanceData.value) {
    const element: AssistanceItemType = assistanceData.value[key];
    const yData: number[] = computeItem(element);
    const series = {
      type: 'line',
      name: `${element['Hz']}Hz`,
      smooth: true,
      showSymbol: false,
      symbol: 'none',
      emphasis: {
        focus: 'series',
      },
      itemStyle: { normal: { label: { show: true } } },
      lineStyle: {
        width: 1,
        color: '#ffffff88',
      },
      zlevel: 0,
      z: 1,
      endLabel: {
        show: true,
        formatter: '{a}',
        distance: 0,
        color: '#39E9FE99',
        backgroundColor: 'transparent',
        padding: [3, 3, 2, 3],
      },
      data: yData,
    };

    yDataList.push(series);
  }

  for (let i = xDataMin; i <= xDataMax; i++) {
    xData.push(i);
  }
}

function computeUH(Hz: number, uQ: number) {
  debugger;
  const equation = assistanceData.value.find((item) => {
    return Math.ceil(Hz) == item['Hz'];
  });
  if (equation) {
    const uHMax = Math.round((equation['a'] * equation['min'] * equation['min'] + equation['b'] * equation['min'] + equation['c']) * 100) / 100;
    const uHMin = Math.round((equation['a'] * equation['max'] * equation['max'] + equation['b'] * equation['max'] + equation['c']) * 100) / 100;
    const uH1 = Math.round((equation['a'] * uQ * uQ + equation['b'] * uQ + equation['c']) * 100) / 100;
    if (uH1 >= uHMin && uH1 <= uHMax) {
      uH.value = uH1;
      isHaCross.value = true;
    } else {
      isHaCross.value = false;
    }
  }
}

function computeRLine() {
  console.log('计算后的风量为------------>', uQ.value);
  if (uH.value && uQ.value) {
    const R = uH.value / Number(uQ.value) / Number(uQ.value);
    const yAxis: number[] = [];
    for (let i = 0; i < xData.length; i++) {
      const x = xData[i];
      const y = R * x * x;
      if (x == uQ.value) {
        uH.value = y;
      }
      yAxis.push(y);
    }
    const series = {
      name: 'R',
      type: 'line',
      smooth: true,
      showSymbol: false,
      zlevel: 0,
      emphasis: {
        focus: 'series',
      },
      itemStyle: { normal: { label: { show: true } } },
      lineStyle: {
        width: 2,
        color: '#D0A343',
      },
      endLabel: {
        show: true,
        formatter: '{a}',
        distance: 0,
        color: '#D0A343',
      },
      data: yAxis,
    };
    yDataList[lineNum] = series;
  }
}

function reSetLine() {
  let minIndex = -1;
  for (let i = 0; i < yDataList.length; i++) {
    if (i !== lineNum && i != lineNum + 1) {
      if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
      if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
      if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) {
        yDataList[i]['endLabel']['color'] = '#39E9FE99';
      }
      if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
      if (yDataList[i]['z']) yDataList[i]['z'] = 1;
    }

    if (resultObj.value && `${resultObj.value.Hz}Hz` == yDataList[i]['name']) {
      minIndex = i;
    }
  }
  if (minIndex != -1) {
    yDataList[minIndex]['lineStyle']['color'] = '#9A60B4';
    yDataList[minIndex]['lineStyle']['width'] = 2;
    yDataList[minIndex]['endLabel']['color'] = '#9A60B4';
    yDataList[minIndex]['endLabel']['backgroundColor'] = '#111';
    yDataList[minIndex]['z'] = 999;
  }
}

// 根据风量计算压差
function computePa() {
  debugger;
  const R = uH.value / Number(uQ.value) / Number(uQ.value);
  const pointX = Number(uQ.value);
  const pointY = Number(uH.value);
  type ItemType = {
    x: number;
    y: number;
    Hz: number;
  };
  const paList = new Map<number, ItemType>(); // key 是最近距离
  const getIntersectionPoint = (a, b, c, R, min, max) => {
    const obj: { x: undefined | number; y: undefined | number; min: number; max: number } = { x: undefined, y: undefined, min: min, max: max };
    // 计算二次方程的判别式
    const discriminant = b * b - 4 * (a - R) * c;

    if (discriminant > 0) {
      // 有两个实根
      const x1 = (-b + Math.sqrt(discriminant)) / (2 * (a - R));
      const x2 = (-b - Math.sqrt(discriminant)) / (2 * (a - R));

      const y1 = R * x1 * x1;
      const y2 = R * x2 * x2;
      if (x1 >= min && x1 <= max) {
        obj.x = x1;
        obj.y = y1;
      } else {
        obj.x = x2;
        obj.y = y2;
      }
    } else if (discriminant === 0) {
      // 有一个实根
      const x = -b / (2 * (a - R));
      const y = R * x * x;
      if (x >= min && x <= max) {
        obj.x = x;
        obj.y = y;
      }
      // console.log(`唯一交点: (${x}, ${y})`);
    } else {
      // 没有实根，交点在虚数域
      console.log('没有实数交点');
      isHaCross.value = false;
    }
    return obj;
  };

  for (let key in assistanceData.value) {
    const item: AssistanceItemType = assistanceData.value[key];
    paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max));
  }

  const min = (points: Map<number, ItemType>) => {
    const targetX = uQ.value;
    const targetY = uH.value;
    let minDistance = Number.POSITIVE_INFINITY;
    let closestPoint = null;
    let keyVal = '';
    // 遍历已知点数组，计算距离并更新最小距离和对应的点
    for (const [key, point] of points) {
      const distance = Math.sqrt((targetX - point.x) ** 2 + (targetY - point.y) ** 2);
      if (distance < minDistance) {
        minDistance = distance;
        closestPoint = point;
        keyVal = key;
      }
    }

    if (closestPoint !== null) {
      // console.log(`距离最小的点是 (${closestPoint.x}, ${closestPoint.y}), 距离为 ${minDistance}`);
      if (closestPoint.x < closestPoint.min || closestPoint.x > closestPoint.max) {
        resultObj.value = null;
        isHaCross.value = false;
        console.log('没有找到最小距离的点');
      } else {
        resultObj.value = { x: closestPoint.x, y: closestPoint.y, Hz: keyVal };
        isHaCross.value = true;
      }
    } else {
      resultObj.value = null;
      isHaCross.value = false;
      console.log('没有找到最小距离的点');
    }
  };
  min(paList);
}

function computeR() {
  if (uQ.value && uH.value) {
    computeRLine();
    computePa();
    const x = resultObj.value && resultObj.value.x ? resultObj.value.x.toFixed(0) : -100;
    const y = resultObj.value && resultObj.value.y ? Number(resultObj.value.y.toFixed(0)) : -100;
    const series = {
      type: 'effectScatter',
      symbolSize: 5,
      // symbolOffset:[1, 1],
      showEffectOn: 'render',
      // 涟漪特效相关配置。
      rippleEffect: {
        // 波纹的绘制方式，可选 'stroke' 和 'fill'。
        brushType: 'stroke',
      },
      zlevel: 1,
      z: 999,
      itemStyle: {
        color: '#C60000',
      },
      data: [[x, y]],
    };
    yDataList[lineNum + 1] = series;
  }
  // // 根据计算后的得到的频率，风量，瓦斯浓度
  // getMonitor();
}

function getMonitor() {
  clearTimeout(timer);
  timer = undefined;
  const n = 10;
  const windQuantity = uQ1.value;
  const obj = {
    m3: windQuantity,
    gas: gasWarningVal.value,
    time: '',
    Hz: uHz.value,
  };
  const monitorList: { m3: number; gas: number; Hz: number; time: string }[] = [];
  for (let i = 0; i < n; i++) {
    const item = cloneDeep(obj);
    const m3Temp = (Math.random() * 2 - 1) * Math.random() * 20;
    const gas = m3Temp * 0.0002;
    item.time = dayjs(new Date().getTime() - (n + i) * 3000).format('HH:mm:ss');
    item.m3 = (obj.m3 + m3Temp).toFixed(2);
    item.gas = (obj.gas + gas).toFixed(4);
    item.Hz = (obj.Hz + Math.random()).toFixed(2);
    monitorList.unshift(item);
  }
  monitorData.value = cloneDeep(monitorList);

  setTimeout(() => {
    clearTimeout(timer);
    timer = undefined;

    timer = 0;
    if (uQ1.value && uH.value && uQ.value) {
      openTimer(cloneDeep(obj), 0);
    } else {
      openTimer(cloneDeep(obj), 0);
    }
  }, 1000);
}

function startCompute() {
  setTimeout(() => {
    message.success('指令下发成功！');
    isStartCompute.value = 1;
  }, 800);
}

function resetCompute() {
  setTimeout(() => {
    message.success('指令下发成功！');
    isStartCompute.value = -1;
    tempList.length = 0;
    n = 0;
  }, 800);
}

let timer = undefined;
let n = 0;
let tempList = [];
function openTimer(obj: { m3: number; gas: number; Hz: number; time: string }) {
  // 打开定时器
  const monitorList = cloneDeep(monitorData.value);
  if (timer !== undefined) {
    timer = setTimeout(() => {
      obj.m3 = Number(obj.m3);
      obj.gas = Number(obj.gas);
      obj.Hz = Number(obj.Hz);
      const item = cloneDeep(obj);
      item.time = dayjs(new Date().getTime()).format('HH:mm:ss');
      if (resultObj.value && resultObj.value.x && resultObj.value.y && isStartCompute.value != 0) {
        if (isStartCompute.value == 1 && Number(obj.m3) > uQ.value && Number(obj.gas) < gasWarningMax.value) {
          isStartCompute.value = 0;
          n = 0;
        } else if (isStartCompute.value == -1 && Number(obj.m3) < uQ1.value) {
          isStartCompute.value = 0;
          n = 0;
        }
      }

      if (!isStartCompute.value) {
        const m3Temp = (Math.random() * 2 - 1) * Math.random() * Math.random() * 10;
        const gas = m3Temp * 0.0002;
        item.m3 = (obj.m3 + m3Temp).toFixed(2);
        item.gas = (obj.gas + gas).toFixed(4);
        item.Hz = (obj.Hz + Math.random()).toFixed(2);
        n = 0;
      } else {
        if (n < 2) {
          const item1 = cloneDeep(obj);
          const m3Temp = Math.random() * Math.random() * 10;
          const gas = m3Temp * 0.0002;
          item1.m3 = (obj.m3 + m3Temp).toFixed(2);
          item1.gas = (obj.gas + gas).toFixed(4);
          item1.Hz = (obj.Hz + (Math.random() * 2 - 1) * Math.random()).toFixed(2);
          tempList.push(item1);
        }

        // 计算  uQ1 -> uQ  gas -> gasWarningMax.value Hz -> resultObj.value.Hz
        if (isStartCompute.value == 1) {
          if (resultObj.value.Hz - obj.Hz > 0) {
            item.Hz = (uHz.value + (2 * n * (resultObj.value.Hz - uHz.value)) / 20).toFixed(2);
            if (resultObj.value.Hz - obj.Hz < 0) {
              item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
            }
          } else {
            // item.Hz = (resultObj.value.Hz + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
            item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
          }
          item.m3 = (obj.m3 + (0.027 * n * item.Hz * (item.Hz - uHz.value) * (uQ.value - uQ1.value)) / 600).toFixed(2);
          if (Number(item.m3) > uQ.value) {
            item.m3 = (uQ.value + Math.random() * 10).toFixed(2);
          }
          item.gas = (
            gasWarningVal.value -
            (0.015 * item.Hz * n * (item.Hz - uHz.value) * (gasWarningVal.value - gasWarningMax.value)) / 200
          ).toFixed(4);
        } else {
          // 复位
          if (obj.Hz - uHz.value > 0) {
            item.Hz = (obj.Hz - (2 * n * (resultObj.value.Hz - uHz.value)) / 30).toFixed(2);
            if (item.Hz - uHz.value < 0) {
              item.Hz = uHz.value - 0.3;
            }
          } else {
            item.Hz = (uHz.value + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
          }
          item.m3 = (obj.m3 - (0.02 * n * n * item.Hz * (resultObj.value.Hz - uHz.value) * (uQ.value - uQ1.value)) / 400).toFixed(2);
          if (item.m3 < uQ1.value) {
            item.m3 = uQ1.value - Math.random() * 10;
          }
          item.gas = (obj.gas + (0.015 * item.Hz * n * (uHz.value - item.Hz) * (gasWarningVal.value - gasWarningMax.value)) / 800).toFixed(4);
        }
      }
      if (monitorList.length >= 10) {
        monitorList.shift();
        const monitor = cloneDeep(item);
        const data = tempList.shift();
        if (data) {
          item['m3'] = data['m3'];
          item['gas'] = data['gas'];
        }
        tempList.push(monitor);
        monitorList.push(item);
      } else {
        monitorList.push(item);
      }
      monitorData.value = monitorList;
      // console.log('瓦斯监测数据-------------->', monitorData.value);
      if (timer) {
        if (!isStartCompute.value) {
          // n++;
          openTimer(cloneDeep(obj));
        } else {
          n++;
          openTimer(cloneDeep(item));
        }
      }
    }, 3000);
  }
}

function edit(flag) {
  if (flag == 'info') {
    formType.value = '编辑风机信息';
  }
  if (flag == 'line') {
    formType.value = '编辑特性曲线';
  }
  if (formShow.value == true) {
    formShow.value = false;
    nextTick(() => {
      formShow.value = true;
    });
  } else {
    formShow.value = true;
  }
}

function onSubmit() {
  emit('close');
  closeModal();
  ChartRef.value = null;
  uQ.value = undefined;
  uH.value = undefined;
  formType.value = '';
  refresh.value = true;
  xData.length = 0;
  yDataList.length = 0;
  lineNum = 0;
  lineEquation.value = [];
  resultObj.value = null;
  monitorData.value = [];
  clearTimeout(timer);
  timer = undefined;
}

async function onCancel() {
  return new Promise((resolve) => {
    if (isStartCompute.value == 0) {
      onSubmit();
      resolve(true);
    } else {
      message.warning('为保障矿井安全生产，请确保已复位！！！');
      resolve(false);
    }
  });
}

function initEcharts() {
  if (ChartRef.value) {
    reSetLine();
    myChart.value = echarts.init(ChartRef.value);
    option && myChart.value.setOption(option);
    refresh.value = false;
    getMonitor();
    nextTick(() => {
      setTimeout(() => {
        refresh.value = true;
      }, 0);
    });
  }
}

function makeLine() {
  if (uQ.value && uH.value) {
    loadding.value = true;
    setTimeout(() => {
      computeR();
      reSetLine();
      option && myChart.value.setOption(option);
      loadding.value = false;
    }, 1200);
  }
}
function handleSubmit() {
  message.success('提交成功');
  setTimeout(() => {
    formShow.value = false;
  }, 800);
}
onMounted(() => {
  timer = undefined;
});
</script>

<style scoped lang="less">
.modal-box {
  display: flex;
  flex-direction: row;
  background-color: #ffffff05;
  padding: 20px 8px 0 8px;
  border: 1px solid #00d8ff22;
  position: relative;
  // min-height: 600px;
  .box-title {
    width: calc(100% - 40px);
    text-align: center;
    background-color: #1dc1f522;
  }
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0px;
    margin: 10px 0;
    line-height: 30px;
    background-image: linear-gradient(to right, #39deff15, #3977e500);
    &:first-child {
      margin-top: 0;
    }
    .title {
      width: 200px;
      text-align: left;
      padding-left: 20px;
      color: #f1f1f1cc;
    }
    .value {
      width: 150px;
      color: #00d8ff;
      padding-right: 20px;
      text-align: right;
    }
  }
  .right-box {
    width: 320px;
    .info-lines {
      width: calc(100% - 2px);
      height: 450px;
      box-shadow: 0px 0px 50px #86baff08 inset;
      overflow-y: auto;
      margin-top: 5px;
      .title {
        width: 100%;
        color: #f1f1f1cc;
      }
    }
  }
  .center-box {
    flex: 1;
    margin: 0 10px;
    display: flex;
    .info-echarts {
      // background-color: #ffffff11;
    }
    .result-tip {
      text-align: center;
      background-color: #00000011;
      line-height: 28px;
      margin: 10px 50px 0 50px;
      border: 1px solid #00d8ff22;
      border-radius: 2px;
    }
  }
  .tip-box {
    width: 1040px;
    height: 44px;
    position: absolute;
    top: 417px;
    display: flex;
    padding: 0 20px;
    .title {
      width: 142px;
      height: 43px;
      display: flex;
      align-items: center;
      padding-left: 30px;
      background-image: url('@/assets/images/fanlocal-tip/tip-title.png');
      position: relative;
      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        width: 31px;
        height: 31px;
        top: 5px;
        left: -8px;
        background-image: url('@/assets/images/fanlocal-tip/tip-icon.png');
      }
    }
    .tip-container {
      width: 898px;
      height: 44px;
      line-height: 44px;
      display: flex;
      background-image: url('@/assets/images/fanlocal-tip/tip-bg.png');
      background-size: cover;
    }
  }
}
.setting-box {
  width: 1170px;
  height: 70px;
  margin: 10px 0;
  background-color: #ffffff05;
  border: 1px solid #00d8ff22;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .right-inputs {
    width: 100%;
    display: flex;
    height: 40px;
    margin: 0 10px;
    justify-content: space-between;
  }
  .left-buttons {
    display: flex;
    height: 40px;

    .btn {
      margin: 0 10px;
    }
  }
  .border-clip {
    width: 1px;
    height: 25px;
    border-right: 1px solid #8b8b8b77;
  }
  .input-title {
    max-width: 150px;
  }
  .input-box {
    width: 220px !important;
    background: transparent !important;
    border-color: #00d8ff44 !important;
    margin-right: 20px;
    color: #fff !important;
  }
  .btn {
    padding: 8px 20px;
    position: relative;
    border-radius: 2px;
    color: #fff;
    width: fit-content;
    cursor: pointer;

    &::before {
      position: absolute;
      display: block;
      content: '';
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      top: 2px;
      left: 2px;
      border-radius: 2px;
      z-index: -1;
    }
  }

  .btn1 {
    border: 1px solid #5cfaff;

    &::before {
      background-image: linear-gradient(#2effee92, #0cb1d592);
    }

    &:hover {
      border: 1px solid #5cfaffaa;

      &::before {
        background-image: linear-gradient(#2effee72, #0cb1d572);
      }
    }
  }
}
.is-open {
  animation: open 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}
.is-close {
  height: 0px;
}

@keyframes open {
  0% {
    height: 0px;
  }
  100% {
    height: fit-content;
  }
}

@keyframes close {
  0% {
    height: fit-content;
  }
  100% {
    height: 0px;
  }
}
:deep(.zxm-divider-inner-text) {
  color: #cacaca88 !important;
}
:deep(.zxm-form-item) {
  margin-bottom: 10px;
}
</style>