优化网络及LIS编辑样式

1 month ago · aaec694d14
7 changed files with 106 additions and 43 deletions
--- a/dist-v0.0.24.7z
+++ b/dist-v0.0.24.7z
--- a/src/pages/Index/Settings/Device.vue
+++ b/src/pages/Index/Settings/Device.vue
@ -451,7 +451,7 @@ onUnmounted(() => {
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
-
+    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
--- a/src/pages/Index/Settings/EditLis.vue
+++ b/src/pages/Index/Settings/EditLis.vue
@ -97,8 +97,12 @@
      </div>
    </div>
    <div class="save-btn">
-      <el-button @click="onCancel" class="lis-cancel">取消</el-button>
-      <el-button type="primary" @click="saveLisForm" class="lis-save" :loading="saveLoading">保存</el-button>
+      <button @click="saveLisForm" class="lis-save">
+        保&nbsp;&nbsp;&nbsp;&nbsp;存
+      </button>
+      <button @click="onCancel" class="lis-cancel">
+        取&nbsp;&nbsp;&nbsp;&nbsp;消
+      </button>
    </div>
  </div>
  <!-- 键盘 -->
@ -172,12 +176,12 @@ const saveLisForm = async () => {
  }
  saveLoading.value = true
  setSetting(lisForm.value as LISSettings).then(res => {
-    saveLoading.value = false
+    // saveLoading.value = false
    if(res.success) {
      emits('saveSuccess')
    }
  }).catch(e => {
-    saveLoading.value = false
+    // saveLoading.value = false
    message.error(e.message)
  })
 }
@ -209,7 +213,6 @@ const showKeyboard = (field: 'ip' | 'port') => {
 }

 const onCheck = (field: 'ip' | 'port' | '') => {
-  console.log('field========',field)
  if(!field){
    return;
  }
@ -278,7 +281,7 @@ onUnmounted(() => {
 .lis-setting {
  background-color: #f5f7fa;
  width: 100%;
-  height: 45vh;
+  height: 87vh;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
@ -293,7 +296,7 @@ onUnmounted(() => {
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
-
+    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
@ -352,34 +355,29 @@ onUnmounted(() => {
 }
 .save-btn{
  width: 100%;
-  display: flex;
-  justify-content: center;
 }
 .lis-save{
-  width: 50%;
-  height: 4rem;
+  width: 96vw;
+  height: 5rem;
  padding: 0 24px;
-  background-color: #409eff;
+  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 24px;
-  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  color: #fff;
+  background-color: #409eff;
 }
 .lis-cancel{
-  width: 50%;
-  height: 4rem;
+  width: 96vw;
+  height: 5rem;
  padding: 0 24px;
+  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-top: 1rem;
 }
 // 键盘动画
 .slide-up-enter-active,
--- a/src/pages/Index/Settings/Lis.vue
+++ b/src/pages/Index/Settings/Lis.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="lis-setting">
+  <div v-if="!lisVisible" class="lis-setting">
    <div class="setting-item">
      <span class="label">类型</span>
      <div class="options">
@ -50,10 +50,8 @@
        编辑LIS
      </button>
    </div>
-    <el-dialog v-model="lisVisible" title="编辑LIS" width="98vw">
-      <EditLis @save-success="saveSuccess" @close="onCloseDialog"/>
-    </el-dialog>
  </div>
+  <EditLis v-else @save-success="saveSuccess" @close="onCloseDialog"/>
  <!-- 键盘 -->
  <transition name="slide-up">
    <div class="keyboard" v-if="keyboardVisible">
@ -176,7 +174,7 @@ onUnmounted(() => {
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
-
+    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
@ -186,7 +184,6 @@ onUnmounted(() => {
    input {
      padding: 8px;
      border: 1px solid #ccc;
-      border-radius: 4px;
      font-size: 30px;
      transition: box-shadow 0.2s ease;
      border-radius: 10px;
@ -196,7 +193,7 @@ onUnmounted(() => {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
-      font-size: 2rem;
+      font-size: 1.75rem;
      button {
        min-width: 120px;
        height: 56px;
--- a/src/pages/Index/Settings/Network.vue
+++ b/src/pages/Index/Settings/Network.vue
@ -3,7 +3,7 @@
    <div class="setting-item">
      <span class="label">WAN连接类型</span>
      <div class="options">
-        <button
+        <button v-if="isEdit"
          v-for="(item, index) in networkModeList"
          :key="index"
          :class="{
@ -13,12 +13,15 @@
        >
          {{ item.label }}
        </button>
+        <div v-else class="network-value">
+          {{ networkMap[networkForm.networkMode] }}
+        </div>
      </div>
    </div>
    <template v-if="networkForm.networkMode === 'STATIC_IP'">
      <div class="setting-item">
        <span class="label">IP地址</span>
-        <div>
+        <div v-if="isEdit">
          <input
            style="width: 20rem"
            v-model="networkForm.ip"
@ -27,10 +30,13 @@
            readonly
          />
        </div>
+        <div v-else class="network-value">
+          {{ networkForm.ip }}
+        </div>
      </div>
      <div class="setting-item">
        <span class="label">子网掩码</span>
-        <div>
+        <div v-if="isEdit">
          <input
            style="width: 20rem"
            v-model="networkForm.netmask"
@ -39,10 +45,13 @@
            readonly
          />
        </div>
+        <div v-else class="network-value">
+          {{ networkForm.netmask }}
+        </div>
      </div>
      <div class="setting-item">
        <span class="label">网关</span>
-        <div>
+        <div v-if="isEdit">
          <input
            style="width: 20rem"
            v-model="networkForm.gateway"
@ -51,6 +60,9 @@
            readonly
          />
        </div>
+        <div v-else class="network-value">
+          {{ networkForm.gateway }}
+        </div>
      </div>
      <div class="dns-list">
        <div
@ -64,10 +76,11 @@
              {{ index === 0 ? '首先' : '备选' }}
            </span>
            <el-input
+              v-if="isEdit"
              style="width: 21rem"
              v-model="networkForm.dnsList[index]"
              name="firstDns"
-              @focus="e=>openKeyboard(e, index)"
+              @focus="e => openKeyboard(e, index)"
              readonly
            >
              <template #append>
@ -75,6 +88,9 @@
                <el-icon v-else @click="onDelDns(index)"><Close /></el-icon>
              </template>
            </el-input>
+            <div v-else class="network-value">
+              {{ networkForm.dnsList[index] }}
+            </div>
          </div>
        </div>
      </div>
@ -138,8 +154,16 @@
      </div>
    </template>
    <div>
-      <button class="save-network"  @click="onSaveNetwork" >
-        保存
+      <div v-if="isEdit">
+        <button class="save-network"  @click="onSaveNetwork" >
+          保&nbsp;&nbsp;&nbsp;&nbsp;存
+        </button>
+        <button @click="onCancel" class="cancel-network">
+          取&nbsp;&nbsp;&nbsp;&nbsp;消
+        </button>
+      </div>
+      <button v-else class="save-network"  @click="onEditNetwork" >
+        编&nbsp;&nbsp;&nbsp;&nbsp;辑
      </button>
    </div>
  </div>
@ -165,6 +189,17 @@ import SoftKeyboard from '@/components/SoftKeyboard.vue'
 const inputValue = ref('')
 const keyboardType = ref<'text' | 'number'>('number')
 const softKeyboardRef = ref()
+const isEdit = ref(false)
+const defaultNetwokInfo = ref<NetworkForm>({
+  id: '',
+  firstRun: false,
+  networkMode: 'STATIC_IP',
+  ip: '0.0.0.0',
+  netmask: '0.0.0.0',
+  gateway: '0.0.0.0',
+  autoDns: false,
+  dnsList: [],
+})

 type Network = 'STATIC_IP' | 'DYNAMIC_IP'
 const networkVisible = ref(false)
@ -203,8 +238,12 @@ const networkModeList = [
  },
 ]

+const networkMap = {
+  STATIC_IP: '静态IP',
+  DYNAMIC_IP: 'DYNAMIC_IP',
+}
+
 const updateNetworkModel = (network) => {
-  console.log('network---', network)
  if(network.value === 'STATIC_IP') {
    networkForm.value.dnsList = [...defaultDnsData.value.staticIPConfig.dnsList]
  }else if(network.value === 'DYNAMIC_IP') {
@ -235,6 +274,7 @@ const getNetwork = () => {
            : dnsData.dynamicIpConfig.dnsList,
      }
      console.log('networkForm--', networkForm.value)
+      defaultNetwokInfo.value = JSON.parse(JSON.stringify(networkForm.value))
    }
  })
 }
@ -295,6 +335,7 @@ const onSaveNetwork = () => {
  console.log('params===', params)
  setNetworkSetting(params).then((res) => {
    if (res.success) {
+      isEdit.value = false
      message.success('设置成功')
      networkVisible.value = false
      getNetwork()
@ -302,6 +343,15 @@ const onSaveNetwork = () => {
  })
 }

+const onEditNetwork = () => {
+  isEdit.value = true
+}
+
+const onCancel = () => {
+  networkForm.value = JSON.parse(JSON.stringify(defaultNetwokInfo.value))
+  isEdit.value = false
+}
+
 const updateAutoModel = (value) => {
  networkForm.value.autoDns = value
 }
@ -395,7 +445,7 @@ onUnmounted(() => {
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
-
+    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
@ -508,6 +558,20 @@ onUnmounted(() => {
  background-color: #409eff;
 }

+.cancel-network {
+  width: 100%;
+  height: 5rem;
+  padding: 0 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-size: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
 .dns-list{
  background-color: #ffffff;
  padding: 10px;
@ -526,4 +590,8 @@ onUnmounted(() => {
  display: flex;
  align-items: center;
 }
+
+.network-value {
+  font-size: 1.75rem;
+}
 </style>
--- a/src/pages/Index/Settings/Version.vue
+++ b/src/pages/Index/Settings/Version.vue
@ -1,11 +1,11 @@
 <template>
  <div class="version-setting">
    <div class="setting-item">
-      <span class="label">设备ID</span>
+      <span class="label">工厂序列号</span>
      <span class="value">{{ info?.sn }}</span>
    </div>
    <div class="setting-item">
-      <span class="label">资产ID</span>
+      <span class="label">出厂序列号</span>
      <span class="value">{{ info?.assetId }}</span>
    </div>
    <div class="setting-item">
@ -17,7 +17,7 @@
      <el-link type="primary" class="mcu-version" @click="onShowMCUDetail">{{ info?.mcuVersion }}</el-link>
    </div>
    <div class="setting-item">
-      <span class="label">Local IP</span>
+      <span class="label">设备IP</span>
      <span class="value">{{ info?.ip }}</span>
    </div>
    <div class="setting-item">
@ -105,7 +105,7 @@ const onShowMCUDetail = () => {
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
-
+    height: 4rem;
    .label {
      font-size: 28px;
      font-weight: 500;
--- a/src/pages/Index/components/Consumables/TabBar.vue
+++ b/src/pages/Index/components/Consumables/TabBar.vue
@ -5,7 +5,7 @@
      <img class="tab-icon" :src="currentTab.path === tab.url ? tab.activeIcon : tab.icon"></img>
      <span class="tab-label">{{ tab.label }}</span>
      <span v-if="(tab.url).indexOf('running')>-1 && alarmFlagState && alarmFlagState.hasWarningTriggerFlag" style="padding-top: 5px;" title="耗材报警">
-        <el-icon class="warning-icon"><WarningFilled /></el-icon>
+        <el-icon class="warning-icon" :style="`color:${alarmFlagState.hasWarningTriggerFlag ? 'orange' : 'red'}`"><WarningFilled /></el-icon>
      </span>
    </div>
  </div>