<template>
  <div class="page_container">
    <div class="step_title">
      <img src="@/assets/image/equipment/step_2.png" alt="" />
    </div>
    <div class="second-step">
      <div class="main-step">
        <div class="content_container">
          <!-- 头部步骤进度 -->
          <div class="content_container_top">
            <div class="experimental_steps">
              <img
                v-show="experimental_steps == 1"
                src="@/assets/image/equipment/experimental_steps_1.png"
                alt="" />
              <img
                v-show="experimental_steps == 2"
                src="@/assets/image/equipment/experimental_steps_2.png"
                alt="" />
              <img
                v-show="experimental_steps == 3"
                src="@/assets/image/equipment/experimental_steps_3.png"
                alt="" />
              <img
                v-show="experimental_steps == 4"
                src="@/assets/image/equipment/experimental_steps_4.png"
                alt="" />
            </div>
          </div>
          <!-- 上边流程信息 -->
          <div class="experimental_details">
            <div>样品名称：{{ exp_info.name || '' }}</div>
            <div>样品厚度：{{ (exp_info.specimen_thickness * 1).toFixed(2) || '' }}mm</div>
            <div>样品质量：{{ (exp_info.specimen_quantity * 1).toFixed(2) || '' }}g</div>
            <div>试验次数：{{ exp_info.experiment_times || '' }}次</div>
          </div>
          <!-- 流程1~3信息 -->
          <div class="experimental_information" v-show="false">
            <div>
              样品厚度
              <br />
              <br />
              {{ (exp_info.specimen_thickness * 1).toFixed(2) || '' }}

              mm
            </div>
            <div>
              实验次数
              <br />
              {{ exp_info.experiment_times || '' }}次
            </div>
          </div>
          <!--  流程4信息-->
          <div class="experimental_information" v-show="false">
            <div>
              样品厚度
              <span>
                {{ (exp_info.specimen_thickness * 1).toFixed(2) || '' }}
                <span>mm</span>
              </span>
            </div>
            <div>
              实验次数
              <span>
                {{ exp_info.experiment_times || '' }}
                <span>次</span>
              </span>
            </div>
            <div>
              热表面温度
              <span>
                {{ (exp_info.hot_suff_temp * 1).toFixed(2) || '' }}
                <span>℃</span>
              </span>
            </div>
            <div>
              粉尘层温度
              <span>
                {{ (exp_info.dust_layer_temp * 1).toFixed(2) || '' }}
                <span>℃</span>
              </span>
            </div>
            <div>
              试验时间
              <span>{{ (exp_info.specimen_thickness * 1).toFixed(2) || '' }}</span>
            </div>
          </div>
        </div>
        <!-- 流程2 -->
        <div class="content_bottom" v-show="experimental_steps == 2">
          <div class="tips">热表面正在控温中，请耐心等待...</div>
          <div class="experimental_temperature">
            <div>
              {{ (exp_info.pre_set_temp * 1).toFixed(2) }}
              <span>目标温度(℃)</span>
            </div>
            <div>
              {{ state1_time }}
              <span>当前温度(℃)</span>
            </div>
          </div>
        </div>
        <!-- 流程3 -->
        <div class="test_detail content_bottom" v-show="experimental_steps == 3">
          <div class="tips">请先将金属环放置在热表面中心，并按标准制作粉尘层至金属环</div>

          <div class="test_description">
            <el-row :gutter="20">
              <el-col :span="16">
                <div>
                  <el-row :gutter="20">
                    <el-col :span="4"><div class="production_standards">制作标准：</div></el-col>
                    <el-col :span="16">
                      <div>
                        1. 粉尘充满金属环后，应采用一平直的刮板沿着金属环的 上沿刮平并清除多余粉尘。
                        <br />
                        2. 应将粉尘层按标准方法制作在一张已知质量的纸上，然
                        后称出其质量。粉尘层的密度等于粉尘层的质量除以金
                        属环的内容积，并将其记入试验报告。
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="test_time" :class="miling_time > 120 ? 'over_time' : ''">
                  {{ formattedTime }}
                  <span>粉尘层制作已用时长</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 流程4 -->
        <div class="experimental_observation content_bottom" v-show="experimental_steps == 4">
          <div class="watch_step">试验进行中，请观察粉尘层着火现象</div>
          <div class="experimental_observation_title">
            <div class="observation_title">当前热表面温度</div>
            <div class="observation_item">{{ temp_a }}</div>
            <div class="observation_title">当前粉尘层温度</div>
            <div class="observation_item">{{ temp_c }}</div>
            <div class="observation_title">试验时间</div>
            <div class="observation_item">{{ temp_time }}</div>
          </div>
          <div id="observation"></div>
        </div>
      </div>

      <div class="footer_btn">
        <div class="left-btns">
          <CommonButton
            msg="返回"
            size="default"
            type="info"
            @click="stopExp"></CommonButton>
        </div>
        <div class="right-btns">
          <CommonButton
            msg="结束实验"
            size="default"
            type="info"
            @click="stopExp"></CommonButton>
        </div>
      </div>
    </div>
  </div>

  <ResetConfirm
    :msg="endMsg"
    :visibile="resetVisible"
    :countDown="countdown_title"
    @confirm="automaticPrompt"
    @cancel="resetVisible = false" />
  <ResetConfirm :visibile="finish_Visible" :cusMsg="true" :heights="734">
    <template #cusMsg>
      <div class="msg">确定要结束试验？</div>
      <div class="msg1">本实验标准建议，当观察到着火现象时， 手动结束试验。</div>
      <div class="msg1">请选择试验结果后，点击“确定”结束试验</div>
      <div class="radio_group">
        <div class="radio_item" v-for="radio of radio_list" @click="changeRadio(radio.value)">
          <svg-icon :name="radio.check ? 'checked' : 'unchecked'" class="radio_icon" />
          <span class="radio_label">{{ radio.label }}</span>
        </div>
      </div>
      <div class="operation_all">
        <CommonButton
          class="operation_btn"
          size="small"
          type="danger"
          msg="取消"
          @click="finish_Visible = !finish_Visible" />
        <CommonButton
          class="operation_btn"
          size="small"
          type="danger"
          msg="确定"
          @click="
            handleFinishConfirm(), updateExperimentRecord(), (finish_Visible = !finish_Visible)
          " />
      </div>
    </template>
  </ResetConfirm>
  <ResetConfirm
    v-if="start_milling"
    msg="温度达到要求，是否开始制粉？"
    :visibile="start_milling"
    :showCancel="false"
    @confirm="sendMsg"
    @cancel="start_milling = false" />
  <ResetConfirm
    v-if="end_milling"
    msg="请确认是否已完成粉尘层制作"
    :visibile="end_milling"
    @confirm="
      sendMsg(2, '粉尘层制作完成', 4);
      end_milling = false;
    "
    @cancel="end_milling = false" />
  <ResetConfirm
    v-if="end_exping"
    msg="确定要退出实验吗？"
    :smMsg="'退出将不保存实验结果'"
    :visibile="end_exping"
    @confirm="expingStop"
    @cancel="end_exping = false" />
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, onUnmounted } from 'vue';
import {
  startExperimentApi,
  updateExperimentApi,
  sendMsgApi,
  stopExperimentApi,
  getExperimentDetailApi
} from '@/api/equipment';
import { useRouter, useRoute } from 'vue-router';
import { websocketStore } from '@/store/webSocketStore.js';
import { notify } from '@/utils/message';
import * as echarts from 'echarts';
import { showConfirmDialog } from 'vant';

const route = useRoute();
const router = useRouter();
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
let info = JSON.parse(route.query.route_info);
const exp_info = ref({
  specimen_id: '', //实验样品id
  experiment_id: '', //试验id
  user_id: '', //用户id
  user_name: '', //用户昵称
  is_new_sample: '', // 0:历史样品 1:新样
  name: '', //样品名称
  specimen_code: '', //样品编号
  specimen_quantity: '', //样品质量
  specimen_thickness: '', //样品厚度
  specimen_volume: '', //样品体积
  specimen_density: '', //样品密度
  initial_moisture_content: '', //初始含水量
  material_substances: '', //样品挥发性
  material_source: '', //样品来源
  material_desc: '', //样品描述
  pre_set_temp: '', //预设热表面温度
  max_surf_temp: '', //最高热表面温度
  dust_pro_remin_time: '', //粉尘制作提醒时间
  max_test_time: '', //最大试验时间
  test_standard: '', //试验标准
  dust_layer_thickness: '', //粉尘层厚度
  hot_suff_temp: '', //热表面温度
  test_result: 1, //试验结果0:未着火 1:着火
  wzhswdddzdzdsj: '', //未着火时温度达到最大值的时间
  combustion_chara_desc: '', //燃烧特性说明
  knyxjgdys: '', //可能影响试验结果有效性的因素
  hot_suff_temp: '', //可能影响试验结果有效性的因素1:粉尘层制备中的困难;2:加热期间粉尘层变形;3:加热期间粉尘层爆裂;4:加热期间粉尘层融熔;5:受热时产生微量的可燃气体。6:其他补充
  other_desc: '' //其他说明
});
const state1_time = ref(0);
const endMsg = ref('');
let endMsgObj = {
  1: '结束原因：粉尘层温度高于热表面温度250℃',
  2: '结束原因：粉尘层温度达到450℃',
  3: '结束原因：粉尘层温度已降低到热表面预设的稳定值',
  4: '结束原因：热表面温度达到预设最大值',
  5: '结束原因：达到最大试验时间'
};
exp_info.value.id = info.id;
let resetVisible = ref(false); //自动结束试验弹框是否显示
let is_exping = ref(false); //结束试验按钮显示隐藏
let start_milling = ref(false); //开始制粉
let end_milling = ref(false); //结束制粉
let experimental_steps = ref(1); //试验步骤
// 中途退出实验，不需要保存试验数据
const end_exping = ref(false);
let finish_Visible = ref(false); //手动结束试验弹框是否显示
const miling_time = ref(0);
const pad = (value) => (value < 10 ? '0' + value : value);
const formattedTime = computed(() => {
  const hours = Math.floor(miling_time.value / 3600);
  const minutes = Math.floor((miling_time.value % 3600) / 60);
  const seconds = miling_time.value % 60;
  return `${pad(minutes)}:${pad(seconds)}`;
});
let btn_msg = ref('开始试验');
let start_exp = ref(false);
let socket = websocketStore();
// 状态4
let temp_c = ref(0);
let temp_a = ref(0);
const test_time = ref(0);

let temp_time = computed(() => {
  const hours = Math.floor(test_time.value / 3600);
  const minutes = Math.floor((test_time.value % 3600) / 60);
  const seconds = test_time.value % 60;
  return `${pad(minutes)}:${pad(seconds)}`;
});
let data1 = ref([]);
let data2 = ref([]);
let data3 = ref([]);
let datax = ref([]);
let countdown = ref(10);
let countdown_title = ref('试验即将结束(10s)');
let startCountdown = ref(true);
let timer = ref(null);
//按钮
const radio_list = ref([
  {
    check: true,
    label: '着火',
    value: '1'
  },
  {
    check: false,
    label: '未着火',
    value: '0'
  }
]);
const changeRadio = (val) => {
  console.log(val, '909090887');
  radio_list.value.forEach((item) => {
    if (item.value == val) {
      item.check = true;
    } else {
      item.check = false;
    }
  });
  exp_info.value.test_result = val;
};
// 结束试验
const stopExp = async () => {
  // 判断是否是在制粉前，制粉前数据不保存
  if (experimental_steps.value <= 3) {
    end_exping.value = true;
    return;
  }
  finish_Visible.value = true;
};
const expingStop = async () => {
  handleFinishConfirm();
  end_exping.value = false;
  //socket.close({ isActiveClose: true });
  router.push({
    path: '/home'
  });
};
const handleFinishConfirm = async () => {
  socket.close({ isActiveClose: true });
  const data = {
    id: exp_info.value.experiment_id
  };
  let res = await stopExperimentApi(data);
  let { code, desc } = res.data;
  if (code == 200) {
    notify(desc, 'success');
  } else {
    notify(desc);
  }
  finish_Visible.value = false;
};

// 开始试验
const handleStartBtn = async () => {
  let res = await startExperimentApi(info.id || '');
  is_exping.value = true;
  let { code, desc, data } = res?.data;
  if (code === 200) {
    experimental_steps.value = 2;
    notify(desc, 'success');
    btn_msg.value = '下一步';
    start_exp.value = true;
  } else {
    notify(desc);
  }
};
// 获取详情
const getDetail = async () => {
  let res = await getExperimentDetailApi(exp_info.value.id);
  exp_info.value = res?.data?.data?.experiment_obj;
};
getDetail();
// 发送消息
const sendMsg = async (status, title, step) => {
  const data = {
    name: 'ZHIFENG',
    status: status || 1
  };
  title = title || '开始制粉';
  const res = await sendMsgApi(data);
  if (res.data.code === 200) {
    start_milling.value = false;
    notify(title, 'success');
    experimental_steps.value = step || 3;
  } else {
    notify(res.desc);
  }
};
// 更新试验记录
const updateExperimentRecord = async (status) => {
  console.log(exp_info.value, 'exp_info.value');
  if (exp_info.value.test_result != 1 && exp_info.value.test_result != 0) {
    exp_info.value.test_result = 1;
  }
  const data = {
    id: info.id,
    items: exp_info.value
  };

  const res = await updateExperimentApi(data);
  if (res.data.code === 200) {
    notify('保存成功', 'success');
    router.push({
      path: '/test1/thirdStep',
      query: {
        route_info: JSON.stringify({ id: exp_info.value.experiment_id })
      }
    });
  } else {
    notify(res.data.desc);
  }
};
onUnmounted(() => {
  if (socket) {
    socket.close({ isActiveClose: true });
  }
  clearInterval(timer.value);
});
// 试验观察过程
let charts = null;
let option = ref({
  grid: {
    left: '8%',
    top: '10%',
    bottom: '10%',
    right: '5%',
    containLabel: true,
    show: true
  },
  xAxis: {
    show: true, //是否显示 x 轴
    type: 'category', //坐标轴类型        (可选value   category   time   log)
    name: '时间/s', //坐标轴名称
    nameLocation: 'center', //坐标轴名称显示位置
    nameGap: 30,
    nameTextStyle: {
      fontSize: 20
    },
    axisLabel: {
      show: true, //是否显示
      inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
      margin: 10, //坐标轴刻度文字与轴线之间的距离
      fontSize: 17, //坐标轴刻度文字的大小         (用数字表示)
      padding: [5, 0, 2, -5] //坐标轴刻度文字的边距        (上右下左)
    },
    splitLine: {
      show: true, //是否显示
      lineStyle: {
        color: '#B8B8B8', //网格线颜色
        width: 1, //网格线的加粗程度
        type: 'soild' //网格线类型
      }
    },
    data: [] //坐标轴刻度文字数据
  },
  yAxis: [
    {
      name: '温度/℃',
      type: 'value',
      show: true,
      position: 'left',
      nameLocation: 'middle',
      nameGap: 30,
      nameTextStyle: {
        fontSize: 20
      },
      gridIndex: 0,
      min: 0,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  series: [
    {
      type: 'line',
      name: '粉尘层温度',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#1D8EFF', // 折线颜色
        width: 2
      },
      symbol: 'none'
    },
    {
      type: 'line',
      name: '热表面温度',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#3A3A3A ', // 折线颜色
        width: 2
        // type: 'dashed' // 设置为虚线
      },
      symbol: 'none'
    },
    {
      type: 'line',
      name: '高于热表面250℃',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#CF4A4A', // 折线颜色
        width: 2
        // type: 'dashed' // 设置为虚线
      },
      symbol: 'none'
    }
  ],
  legend: {
    data: ['粉尘层温度', '热表面温度', '高于热表面250℃'],
    textStyle: {
      color: '#333',
      fontSize: 15
    },
    itemStyle: {
      opacity: 0
    }
  }
});
onMounted(() => {
  socket && socket.close({ isActiveClose: true });
  socket.init({ experiment_type: '4', isActiveClose: false });
  charts = echarts.init(document.getElementById('observation'));
  charts.setOption(option.value);
});
watch(
  () => socket.serviceMsg,
  async (newVal) => {
    state1_time.value = newVal.temp_a.toFixed(2);
    if (newVal.status == 2) {
      start_milling.value = true;
    }
    // 制粉中
    if (newVal.status == 3) {
      miling_time.value = newVal.miling_time.toFixed(2);
    }
    if (newVal.status == 30) {
      handleFinishConfirm();

      showConfirmDialog({
        title: '温度过高, 终止实验',
        showCancelButton: false
      })
        .then(() => {
          router.push({
            path: '/home'
          });
        })
        .catch(() => {
          
        });
    }
    if (newVal.status == 4) {
      temp_c.value = newVal.temp_c.toFixed(2);
      temp_a.value = newVal.temp_a.toFixed(2);
      test_time.value = newVal.test_time.toFixed(2);
      datax.value.push(newVal.test_time.toFixed(0));
      data1.value.push(newVal.temp_c.toFixed(2));
      data2.value.push(newVal.temp_a.toFixed(2));
      data3.value.push(Number(newVal.temp_a.toFixed(2)) + 250);
      option.value.series[0].data = data1.value;
      option.value.series[1].data = data2.value;
      option.value.series[2].data = data3.value;
      option.value.xAxis.data = datax.value;
      //
      exp_info.value.hot_suff_temp = temp_a.value;
      exp_info.value.dust_layer_temp = temp_c.value;
      exp_info.value.wzhswdddzdzdsj = newVal.test_time;

      // charts.resize();
      // charts = echarts.init(document.getElementById('observation'));
      charts.setOption(option.value);
    }

    if (newVal.work_status == 99 && newVal.status == 4) {
      resetVisible.value = true;

      if (startCountdown.value) {
        timer.value = setInterval(() => {
          countdown.value--;
          countdown_title.value = '试验即将结束(' + countdown.value + 's)';
        }, 1000);
      }
      if (countdown.value <= 0) {
        clearInterval(timer.value);
      }
      startCountdown.value = false;
    }
    // 试验结束提示
    endMsg.value = endMsgObj[newVal.stop_type] || '';
  }
);
// 自动弹出结束
const automaticPrompt = () => {
  startCountdown.value = true;
  clearInterval(timer.value);
  router.push({
    path: '/test1/thirdStep',
    query: {
      route_info: JSON.stringify({ id: exp_info.value.experiment_id })
    }
  });
};
</script>
<style lang="less" scoped>
@COOMSIZE: 40px;
.page_container {
  position: relative;
  width: 100%;
  .step_title {
    font-size: @COOMSIZE;
    font-weight: bold;
    color: #3a3a3a;
    margin-left: 22px;
    margin-bottom: 20px;
    img {
      position: absolute;
      left: -50px;
      width: 1005px;
      z-index: 1000;
    }
  }
  .second-step {
    width: 100%;
    // overflow: auto;
    .suffix {
      position: absolute;
      right: 6px;
      color: #b8b8b8;
    }
    .main-step {
      overflow: auto;
      .content_container,
      .content_bottom {
        margin-top: 90px;
        background: #f6f6f6;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: (@COOMSIZE / 5);
        border: 1px solid #cccccc;
        padding: @COOMSIZE;
        // padding-top: @COOMSIZE*0.8;
        padding-bottom: 0px;
        position: relative;
        z-index: 100;
        // height: 478px;
        .line {
          width: 100%;
          border: 1px solid #cccccc;
          position: absolute;
          z-index: 0;
          left: 0;
          // top: 94px;
        }
        .base_info {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: @COOMSIZE*0.8;
          .base_info_title {
            font-size: @COOMSIZE;
          }
          .right_info {
            font-size: 0.8 * @COOMSIZE;
            display: flex;
            align-items: center;
            div {
              margin-right: 44px;
            }
            :last-child {
              margin-right: 0;
            }
          }
        }

        .content_container_top {
          .experimental_steps {
            text-align: center;
            // padding-bottom: 56px;
            // margin-top: 30px;
            img {
              width: 900px;
            }
          }
        }
        .experimental_details {
          width: 1837px;
          height: 92px;
          margin-left: -40px;
          // padding: 20px 50px;
          border: 1px solid #dcdcdc;
          font-size: 32px;
          display: flex;
          div {
            margin-left: 60px;
            border-left: 1px solid #dcdcdc;
            height: 92px;
            line-height: 92px;
            padding: 0 40px;
          }
          :nth-child(1) {
            border-left: none;
            position: relative;
            left: -40px;
          }
        }
        .experimental_information {
          display: flex;
          flex-direction: row;
          font-size: 32px;
          height: 177px;
          div {
            flex: 1;
            border-right: 1px solid #dcdcdc;
            padding: 32px;
            span {
              display: block;
              margin-top: 12px;
              font-size: 40px;
              span {
                display: inline-block;
                font-size: 30px;
                color: #b8b8b8;
              }
            }
          }
          :last-child {
            border-right: 0px;
          }
        }
      }
      .content_bottom {
        margin: 28px 0px;
        height: 480px;
        .tips {
          font-size: 48px;
          padding-left: 78px;
        }
        .experimental_temperature {
          display: flex;
          flex-direction: row;
          font-size: 120px;
          text-align: center;
          padding-top: 30px;
          :last-child {
            color: #51a8ff;
          }
          div {
            flex-grow: 1;
            span {
              display: block;
              margin-top: 20px;
              font-size: 35px;
              color: #3a3a3a !important;
            }
          }
        }
      }
      .test_detail {
        height: 440px;
        .production_standards {
          text-align: right;
        }
        .test_description {
          margin-top: 56px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 30px;
          color: #3a3a3a;
          line-height: 48px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .test_time {
          font-weight: bold;
          font-size: 120px;
          color: #51a8ff;
          line-height: 120px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-left: -150px;
          span {
            font-weight: 400;
            font-size: 36px;
            color: #3a3a3a;
            line-height: 36px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            display: block;
            margin-top: 40px;
          }
        }
        .over_time {
          color: #cf4a4a;
        }
        .tips {
          font-size: 40px;
          padding-left: 10px;
        }
      }
      .experimental_observation {
        // height: 800px;
        display: flex;
        position: relative;
        .watch_step {
          width: 100%;
          height: 100px;
          font-size: 36px;
          position: absolute;
          top: 0px;
        }
        .experimental_observation_title {
          width: 320px;
          position: relative;
          top: 50px;

          .observation_item {
            font-weight: bold;
            font-size: 64px;
            color: #51a8ff;
            text-align: left;
            font-style: normal;
            text-transform: none;
            // margin-top: 24px;
          }
          .observation_title {
            font-weight: 400;
            font-size: 30px;
            color: #3a3a3a;
            text-align: left;
            font-style: normal;
            text-transform: none;
            // margin-top: 40px;
          }
        }
        #observation {
          height: 400px;
          width: 1311px;
          position: relative;
          left: 120px;
          // top: 70px;
        }
      }
    }

    .footer_btn {
      width: 100vw;
      background: #ffffff;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      justify-content: space-between;
      padding: @COOMSIZE;
      padding-top: @COOMSIZE*0.8;
      z-index: 100;
      .left-btns {
        display: flex;
      }
      .right-btns{
        display: flex;
      }
    }
  }
}
.msg {
  // width: 288px;
  height: 36px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 36px;
  color: #3a3a3a;
  // line-height: 50px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 40px 0px;
}
.msg1 {
  width: 532px;
  height: 110px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 28px;
  color: #808080;
  line-height: 41px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.radio_group {
  display: flex;
  align-items: center;
  margin-left: 90px;
  .radio_item {
    display: flex;
    align-items: center;
    margin-right: 26px;
    .radio_icon {
      margin-right: 11px;
    }
    .radio_label {
      margin-right: 20px;
    }
  }
}
.operation_all {
  display: flex;
  margin-top: 20px;
  margin-left: 40px;
  .operation_btn {
    width: 200px;
    display: inline-block;
  }
  .operation_btn:nth-child(1) {
    width: 200px;
    height: 100px;
    background: linear-gradient(180deg, #ffffff 0%, #ececec 100%) !important;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.26);
    border-radius: 8px 8px 8px 8px;
    color: #cf4a4a !important;
  }
  .operation_btn:nth-child(2) {
    margin-left: 40px;
  }
}

:deep(.vxe-header--column) {
  text-align: center !important;
}
</style>
