Ver código fonte

页面配置不保存问题优化

chengqian 4 meses atrás
pai
commit
b0bf5d880a
1 arquivos alterados com 540 adições e 138 exclusões
  1. 540 138
      web/src/view/devicesAdmin/screens/screens.vue

+ 540 - 138
web/src/view/devicesAdmin/screens/screens.vue

@@ -34,11 +34,13 @@
             type="primary"
             icon="search"
             @click="getTableData"
-          >查询</el-button>
+          >查询
+          </el-button>
           <el-button
             icon="refresh"
             @click="onReset"
-          >重置</el-button>
+          >重置
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -49,7 +51,8 @@
           type="primary"
           icon="plus"
           @click="add()"
-        >添加显示屏</el-button>
+        >添加显示屏
+        </el-button>
       </div>
       <el-table
         :data="tableData"
@@ -98,7 +101,9 @@
               class="onlinebox"
               :style="{'background': scope.row.status===0 ? 'red':'green' }"
             />
-            <span :style="{ color: scope.row.status === 0 ? 'red' : 'green' }">{{ scope.row.status === 0 ? '离线' : '在线' }}</span>
+            <span :style="{ color: scope.row.status === 0 ? 'red' : 'green' }">{{
+              scope.row.status === 0 ? '离线' : '在线'
+            }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -112,19 +117,22 @@
               type="primary"
               link
               @click="openSet(scope.row)"
-            >操作</el-button>
+            >操作
+            </el-button>
             <el-button
               type="primary"
               link
               icon="edit"
               @click="editScreens(scope.row)"
-            >编辑</el-button>
+            >编辑
+            </el-button>
             <el-button
               type="primary"
               link
               icon="delete"
               @click="deleteScreens(scope.row)"
-            >删除</el-button>
+            >删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -152,7 +160,7 @@
           label-width="100px"
           style="padding: 15px"
         >
-          <el-row>
+          <el-row>u7i
             <el-col :span="24">
               <el-form-item
                 label="LED名称:"
@@ -227,89 +235,472 @@
             label="节目"
             name="first"
           >
+
+            <div style="display: flex; gap: 70px; margin: 0 0 20px 130px; padding: 8px 0;">
+              <div style="font-size: 15px;">显示方式</div>
+              <div style="font-size: 15px;">速度</div>
+              <div style="font-size: 15px;">停留时间(s)</div>
+              <div style="font-size: 15px;">总时间(s)</div>
+              <div style="font-size: 15px;">颜色</div>
+              <div style="font-size: 15px;">显示内容</div>
+            </div>
             <el-form
               :model="programData"
               label-width="auto"
+              inline
             >
-              <el-form-item label="内容编号">
-                <el-select
-                  v-model="programData.num"
-                  placeholder="请选择"
-                  style="width: 240px"
+              <!--默认页-->
+              <span>
+                <el-form-item
+                  label="默认页"
+                  label-width="auto"
                 >
-                  <el-option
-                    v-for="item in contentNumberOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                  <input
+                    v-model="programData.num1"
+                    type="hidden"
+                    value="7"
+                  >
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.effect1"
+                    placeholder="请选择"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in displayModeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.speed1"
+                    placeholder="推荐 3"
+                    style="width: 80px;"
                   />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="显示方式">
-                <el-select
-                  v-model="programData.effect"
-                  placeholder="请选择"
-                  style="width: 240px"
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
                 >
-                  <el-option
-                    v-for="item in displayModeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                  <el-input
+                    v-model="programData.stay1"
+                    placeholder="推荐 5"
+                    style="width: 80px;"
                   />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="移动速度">
-                <el-input
-                  v-model="programData.speed"
-                  placeholder="默认推荐 3"
-                  style="width: 240px;"
-                />
-              </el-form-item>
-              <el-form-item label="节目停留时间">
-                <el-input
-                  v-model="programData.stay"
-                  placeholder="默认推荐 5"
-                  style="width: 240px;"
-                />
-              </el-form-item>
-              <el-form-item label="预留">
-                <el-input
-                  v-model="programData.total"
-                  placeholder="默认推荐 100"
-                  style="width: 240px;"
-                />
-              </el-form-item>
-              <el-form-item label="节目颜色">
-                <el-select
-                  v-model="programData.color"
-                  placeholder="请选择"
-                  style="width: 240px"
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
                 >
-                  <el-option
-                    v-for="item in colorOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                  <el-input
+                    v-model="programData.total1"
+                    placeholder="推荐 100"
+                    style="width: 80px;"
                   />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="节目内容">
-                <el-input
-                  v-model="programData.content"
-                  placeholder="默认推荐 [24M]XXXX"
-                  style="width: 240px;"
-                />
-              </el-form-item>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.color1"
+                    placeholder="文字颜色"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in colorOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.content1"
+                    type="textarea"
+                    placeholder="默认推荐 [24M]XXXX"
+                    style="width: 150px; "
+                  />
+                </el-form-item>
+              </span>
+
+              <!--正常速度页-->
+              <span>
+                <el-form-item
+                  label="正常速度页"
+                  label-width="auto"
+                >
+                  <input
+                    v-model="programData.num2"
+                    type="hidden"
+                  >
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.effect2"
+                    placeholder="请选择"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in displayModeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.speed2"
+                    placeholder="推荐 3"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.stay2"
+                    placeholder="推荐 5"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.total2"
+                    placeholder="推荐 100"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.color2"
+                    placeholder="文字颜色"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in colorOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.content2"
+                    type="textarea"
+                    placeholder="默认推荐 [24M]XXXX"
+                    style="width: 150px;"
+                  />
+                </el-form-item>
+              </span>
+
+              <!--超速页-->
+              <span>
+                <el-form-item
+                  label="超速页"
+                  label-width="auto"
+                >
+                  <input
+                    v-model="programData.num3"
+                    type="hidden"
+                  >
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.effect3"
+                    placeholder="请选择"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in displayModeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.speed3"
+                    placeholder="推荐 3"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.stay3"
+                    placeholder="推荐 5"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.total3"
+                    placeholder="推荐 100"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.color3"
+                    placeholder="文字颜色"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in colorOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.content3"
+                    type="textarea"
+                    placeholder="默认推荐 [24M]XXXX"
+                    style="width: 150px;"
+                  />
+                </el-form-item>
+              </span>
+
+              <!--对向来车页-->
+              <span>
+                <el-form-item
+                  label="对向来车页"
+                  label-width="auto"
+                >
+                  <input
+                    v-model="programData.num4"
+                    type="hidden"
+                  >
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.effect4"
+                    placeholder="请选择"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in displayModeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.speed4"
+                    placeholder="推荐 3"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.stay4"
+                    placeholder="推荐 5"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.total4"
+                    placeholder="推荐 100"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.color4"
+                    placeholder="文字颜色"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in colorOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.content4"
+                    type="textarea"
+                    placeholder="默认推荐 [24M]XXXX"
+                    style="width: 150px;"
+                  />
+                </el-form-item>
+              </span>
+
+              <!--双向来车页-->
+              <span>
+                <el-form-item
+                  label="双向来车页"
+                  label-width="auto"
+                >
+                  <input
+                    v-model="programData.num5"
+                    type="hidden"
+                  >
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.effect5"
+                    placeholder="请选择"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in displayModeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.speed5"
+                    placeholder="推荐 3"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.stay5"
+                    placeholder="推荐 5"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.total5"
+                    placeholder="推荐 100"
+                    style="width: 80px;"
+                  />
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-select
+                    v-model="programData.color5"
+                    placeholder="文字颜色"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      v-for="item in colorOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  label=""
+                  label-width="0"
+                >
+                  <el-input
+                    v-model="programData.content5"
+                    type="textarea"
+                    placeholder="默认推荐 [24M]XXXX"
+                    style="width: 150px;"
+                  />
+                </el-form-item>
+              </span>
+
               <el-form-item>
                 <el-button
                   type="success"
                   @click="storageProgram"
-                >存储</el-button>
-                <el-button
-                  type="primary"
-                  @click="sendingFun('setdiscontent0')"
-                >发送</el-button>
+                >保存并发送
+                </el-button>
+<!--                <el-button-->
+<!--                  type="primary"-->
+<!--                  @click="sendingFun('setdiscontent0')"-->
+<!--                >发送-->
+<!--                </el-button>-->
               </el-form-item>
             </el-form>
           </el-tab-pane>
@@ -380,11 +771,13 @@
                 <el-button
                   type="success"
                   @click="storageSoundPeriod"
-                >存储</el-button>
-                <el-button
-                  type="primary"
-                  @click="sendingFun('setperiodtime0')"
-                >发送</el-button>
+                >保存并发送
+                </el-button>
+<!--                <el-button-->
+<!--                  type="primary"-->
+<!--                  @click="sendingFun('setperiodtime0')"-->
+<!--                >发送-->
+<!--                </el-button>-->
               </el-form-item>
             </el-form>
           </el-tab-pane>
@@ -440,11 +833,13 @@
                 <el-button
                   type="success"
                   @click="storageVoice"
-                >存储</el-button>
-                <el-button
-                  type="primary"
-                  @click="sendingFun('audionumset0')"
-                >发送</el-button>
+                >保存并发送
+                </el-button>
+<!--                <el-button-->
+<!--                  type="primary"-->
+<!--                  @click="sendingFun('audionumset0')"-->
+<!--                >发送-->
+<!--                </el-button>-->
               </el-form-item>
             </el-form>
           </el-tab-pane>
@@ -652,52 +1047,44 @@ const deviceSn = ref()
 
 // 节目program
 const programData = ref({
-  mum: undefined,
-  effect: undefined,
-  speed: '',
-  stay: '',
-  total: '',
-  color: '',
-  content: '',
+  num1: '7',
+  effect1: '',
+  speed1: '',
+  stay1: '',
+  total1: '',
+  color1: '',
+  content1: '',
+  num2: '1',
+  effect2: '',
+  speed2: '',
+  stay2: '',
+  total2: '',
+  color2: '',
+  content2: '',
+  num3: '2',
+  effect3: '',
+  speed3: '',
+  stay3: '',
+  total3: '',
+  color3: '',
+  content3: '',
+  num4: '3',
+  effect4: '',
+  speed4: '',
+  stay4: '',
+  total4: '',
+  color4: '',
+  content4: '',
+  num5: '4',
+  effect5: '',
+  speed5: '',
+  stay5: '',
+  total5: '',
+  color5: '',
+  content5: '',
 })
 
 // 节目选择参数
-const contentNumberOptions = [
-  {
-    value: '0',
-    label: '待机',
-  },
-  {
-    value: '1',
-    label: '正常速度',
-  },
-  {
-    value: '2',
-    label: '超速',
-  },
-  {
-    value: '3',
-    label: '对向',
-  },
-  {
-    value: '4',
-    label: '双向',
-  },
-  {
-    value: '5',
-    label: '无车',
-  },
-
-  {
-    value: '6',
-    label: '快速显示配置',
-  },
-
-  {
-    value: '7',
-    label: '默认页',
-  },
-]
 
 const displayModeOptions = [
   {
@@ -738,10 +1125,19 @@ const colorOptions = [
 ]
 
 // 存储
-const storageProgram = async() => {
+const storageProgram = () => {
   if (programData.value.ID === 0) {
-    console.log('create')
-    await createProgram({
+    programData.value = {
+      ...programData.value,
+      ...{
+        num1: '7',
+        num2: '1',
+        num3: '2',
+        num4: '3',
+        num5: '4'
+      }
+    }
+    createProgram({
       deviceSn: deviceSn.value,
       program: programData.value,
     }).then(res => {
@@ -751,8 +1147,7 @@ const storageProgram = async() => {
       getTableData()
     })
   } else {
-    console.log('update')
-    await updateProgram({
+    updateProgram({
       deviceSn: deviceSn.value,
       program: programData.value,
     }).then(res => {
@@ -930,13 +1325,20 @@ const sendingFun = async(val) => {
   background: #f3fdef;
 }
 
-.onlinebox{
-  width: 10px; height: 10px;border-radius: 50%; display: inline-block; margin-right: 4px; position: relative; top: 1px;
+.onlinebox {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 4px;
+  position: relative;
+  top: 1px;
 }
 
-.el-dialog__header{
+.el-dialog__header {
   border-bottom: 1px solid #e8eaec;
 }
+
 .el-dialog__footer {
   border-top: 1px solid #e8eaec;
 }