UA 整理提交

he wei

2025-06-03 a10f3b82e33756ed0cd62a0cbe83bab8674df16f

 src/views/realtime/tabs/system.vue

@@ -1,5 +1,20 @@
<script setup>
import { ref } from "vue";
import svgDiagram from '@/components/svgDiagram.vue';
import info from '@/components/info.vue';
// import lineChart from '@/components/echarts/line1.vue';
import lineChart from '@/components/echarts/BaseChart.vue';
// import lineChart from '../bar8.vue';

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const tabIdx0 = ref(0);
const tabIdx1 = ref(0);


</script>
@@ -23,40 +38,42 @@
            </div>
          </div>
          <div class="p-item">
            <div class="panel-title">当前核容信息</div>
            <div class="panel-title">上次标准核容信息</div>
            <div class="panel">
              <div class="panel-row">
                <div class="label">停止原因</div>
                <div class="label">开始时间</div>
                <div class="value">无</div>
              </div>
              <div class="panel-row">
                <div class="label">停止原因</div>
                <div class="label">测试容量</div>
                <div class="value">无</div>
              </div>
              <div class="panel-row">
                <div class="label">停止原因</div>
                <div class="label">测试时长</div>
                <div class="value">无</div>
              </div>
              <div class="panel-row">
                <div class="label">停止原因</div>
                <div class="label">预估容量</div>
                <div class="value">无</div>
              </div>
              <div class="panel-row">
                <div class="label">停止原因</div>
                <div class="label">终止原因</div>
                <div class="value">无</div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-main"></div>
        <div class="p-main">
          <svg-diagram class="svg-diagram"></svg-diagram>
        </div>
        <div class="p-right">
          <div class="control-contain">
            <div class="control-title">控制管理</div>
            <div class="control-title"><svg-icon icon-class="controls"></svg-icon><span>控制管理</span></div>
            <div class="control-btn">核容测试</div>
            <div class="control-btn">停止核容测试</div>
          </div>
          <div class="control-contain">
            <div class="control-title">设备管理</div>
            <div class="control-title"><svg-icon icon-class="dev"></svg-icon><span>设备管理</span></div>
            <div class="control-btn">远程重启</div>
            <div class="control-btn">系统参数设置</div>
            <div class="control-btn">告警参数设置</div>
@@ -69,16 +86,72 @@
    </div>
    <div class="row row2">
      <div class="card-item">
        <card title="交流输入"></card>
        <card title="交流输入">
          <template #tools>
            <el-radio-group class="tab-idx" v-model="tabIdx0" size="small">
              <el-radio-button label="电流" :value="0" />
              <el-radio-button label="电压" :value="1" />
            </el-radio-group>
            <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
          </template>
          <line-chart></line-chart>
        </card>
      </div>
      <div class="card-item">
        <card title="直流输入"></card>
        <card title="直流输入">
          <template #tools>
            <el-radio-group class="tab-idx" v-model="tabIdx1" size="small">
              <el-radio-button label="电流" :value="0" />
              <el-radio-button label="电压" :value="1" />
            </el-radio-group>
            <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
          </template>
        </card>
      </div>
      <div class="card-item">
        <card title="核容设备信息"></card>
        <card title="核容设备信息">
          <template #tools>
            <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
          </template>
        </card>
      </div>
      <div class="card-item">
        <card title="蓄电池信息"></card>
        <card title="蓄电池信息">
          <div class="batt grid">
            <info
              label="最大容量"
              value="#3 8Ah"
            ></info>
            <info
              label="最小容量"
              value="100"
            ></info>
            <info
              label="最高内阻"
              value="100"
            ></info>
            <info
              label="最低内阻"
              value="100"
            ></info>
            <info
              label="最高电压"
              value="100"
            ></info>
            <info
              label="最低电压"
              value="100"
            ></info>
            <info
              label="最高温度"
              value="100"
            ></info>
            <info
              label="最低温度"
              value="100"
            ></info>
          </div>
        </card>
      </div>
    </div>
  </div>
@@ -106,6 +179,9 @@
        margin: 8px;
        display: flex;
        flex-direction: column;
        .panel-title {
          font-size: 24px;
        }
        .panel {
          border: 1px solid #5FA9CF;
          background: #073451;
@@ -162,6 +238,9 @@
          text-align: center;
          font-weight: 700;
          margin-bottom: 4px;
          span {
            margin-left: 0.6em;
          }
        }
        .control-btn {
          margin: 2px 4px;
@@ -206,5 +285,58 @@
      }
    }
  }
  .svg-diagram {
    
  }

  .btn-setting {
    display: inline-block;
    cursor: pointer;
    margin-left: 0.4em;
    transition: all 1.3s ease;
    &:hover {
      transform: rotate(360deg);
      color: #FDFE01;
    }
  }

  .batt.grid {
    height: 100%;
    padding: 4px 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    // grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    place-content: center;
  }

  .tab-idx {

    :deep(.el-radio-button:first-child .el-radio-button__inner) {
      border-left: 1px solid #4D81BA;
      border-radius: 0;
      box-shadow: none !important;
    }
    // .el-radio-button--small .el-radio-button__inner {
    //     border-radius: 0;
    //     font-size: 12px;
    //     padding: 5px 11px;
    // }
    :deep(.el-radio-button__inner) {
        background: #183A55;
        border: 1px solid #4D81BA;
        border-left: 0;
        border-radius: 0;
        color: #fff;
        font-weight: 500;
        padding: 4px 10px;
    }
    :deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
        background: linear-gradient(69deg, #6EABE4, #6EABE4 25%,  #0A3E77 75%, #0A3E77);
        // border: 0 none;
        box-shadow: none;
        color: #fff;
    }
  }
}
</style>