feat：更新油机列表详情菜单栏

admin.ui.plus-master/src/theme/tableStyle.scss

@@ -2,10 +2,10 @@
 *   表格统一样式
 */
 
-.el-input,
-.el-select {
-    width: 240px;
-}
+// .el-input,
+// .el-select {
+//     width: 240px;
+// }
 
 /* 输入框间距 */
 .el-form .el-col.mb20 .el-form-item {
@@ -16,17 +16,6 @@
     margin: 0 !important;
 }
 
-/* 输入框标签固定四个字符宽度 */
-::v-deep .el-form-item__label {
-    // 字体大小14，4个字符，12px右间距
-    width: 14*4px+12px;
-    justify-content: start;
-}
-
-/* 数据表头 设置灰色样式 */
-::v-deep .el-table th.el-table__cell {
-    background-color: #F6F6F6;
-}
 
 /* 输入框和按钮间横线样式*/
 hr {

admin.ui.plus-master/src/views/admin/authorize/dispenserAuthCode/index.vue

@@ -305,4 +305,16 @@ const padZero = (num: any) => {
 .el-select {
   width: 240px;
 }
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/authorize/fuelingFTP/index.vue

@@ -253,5 +253,16 @@ const padZero = (num: any) => {
   width: 240px;
 }
 
-@import '/@/theme/tableStyle.scss';
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/authorize/fuelingFTPofDate/index.vue

@@ -267,4 +267,15 @@ const padZero = (num: any) => {
   width: 240px;
 }
 
-// @import '/@/theme/tableStyle.scss';</style>
+// /* 输入框标签固定四个字符宽度 */
+// ::v-deep .el-form-item__label {
+//   // 字体大小14，4个字符，12px右间距
+//   width: 14*4px+12px;
+//   justify-content: start;
+// }
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
+</style>

admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/index.vue

@@ -341,5 +341,20 @@ const onOilSdkRowClick = (row: FueilingSdkAuthInput) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/index.vue

@@ -367,7 +367,22 @@ const getColor = (val, row) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 
 .el-link {
   padding: 5px;

admin.ui.plus-master/src/views/admin/product/groupLogo/index.vue

@@ -192,5 +192,20 @@ const onReset = () => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/product/qrBook/index.vue

@@ -238,5 +238,20 @@ onBeforeMount(() => {
 
 </script>
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+    width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+    // 字体大小14，4个字符，12px右间距
+    width: 14*4px+12px;
+    justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+    background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/product/record/index.vue

@@ -46,7 +46,7 @@
           </el-form>
 
           <hr>
-          
+
           <!-- 按钮 -->
           <el-row justify="space-between" class="submit-button">
             <el-row>
@@ -329,9 +329,24 @@ const toPage = (row) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
-
 .bold-font {
   font-weight: bold;
 }
+
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/product/type/index.vue

@@ -373,4 +373,21 @@ onBeforeMount(() => {
 .bold-font {
   font-weight: bold;
 }
+
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/alarmManagement/index.vue

@@ -236,5 +236,20 @@ const onCurrentChange = (val: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/alarmRules/components/add-alarmRules.vue

@@ -2,143 +2,140 @@
 <template>
   <div class="layout-pd">
     <el-dialog v-model="Data.isShowDialog" style="width: 60%;">
-        <!--操作-->
-            <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
-              <h1 style="margin-bottom: 10px;font-size: 30px;">报警推送规则</h1>
-            </div>
-            <div style="margin-bottom: 10px ;">
-              <hr />
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="规则名称：" style="width: 100%;">
-                  <el-input v-model="Data.Filter.ruleName" style="width: 100%;" placeholder="请输入" />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="角&#8195;&#8195;色：" style="width: 100%;">
-                  <el-select v-model="Data.Filter.roleMappingId" multiple placeholder="请选择角色">
-                    <el-option v-for="item in Data.roleList" :key="item.id" :label="item.name" :value="item.id" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-            </div>
-            <!-- 能不能通过调节距离的方式进行高度调节？？？ -->
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item style="width: 100%;">
-                </el-form-item>
-              </el-form>
-            </div>
-
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="备&#8195;&#8195;注：" style="width: 100%;">
-                  <el-input type="textarea" rows="5" v-model="Data.Filter.remark" style="width: 100%;"
-                    placeholder="请输入" />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="推送方式：" style="width: 100%;">
-                  <el-row style="width: 40%;">
-                    微信公众号<el-switch v-model="Data.radioValue1" style="margin-left: 3%;" @change="radioChange" />
-                  </el-row>
-                  <el-row style="width: 40%;">
-                    邮箱<el-switch v-model="Data.radioValue2" style="margin-left: 3%;" @change="radioChange" />
-                  </el-row>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="模&#8195;&#8195;板：" style="width: 40%;" prop="mode1">
-                  <el-select v-model="Data.mode1" class="m-2" placeholder="Select" v-if="Data.radioValue1"
-                    @change="modeChange">
-                    <el-option v-for="item in templateData.wxList" :key="item.id" :label="item.templateName"
-                      :value="item.id" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item style="width: 30%;">
-                  <el-select v-model="Data.mode2" class="m-2" placeholder="Select" v-if="Data.radioValue2"
-                    @change="modeChange">
-                    <el-option v-for="item in templateData.emailList" :key="item.id" :label="item.name"
-                      :value="item.id" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="正则匹配：" style="width: 100%;">
-                  <el-input type="textarea" rows="5" v-model="Data.Filter.regular" style="width: 100%;"
-                    placeholder="请输入" />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="互&#8195;&#8195;斥：" style="width: 100%;">
-                  <el-switch v-model="Data.Filter.isExclusive" />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="优先&#8195;级:" style="width: 100%;">
-                  <el-input-number v-model="Data.Filter.taskPriority" :controls="false" :min=1 :max=9 />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="触发方式:" style="width: 100%;">
-                  <el-radio-group v-model="Data.Filter.triggerMethod">
-                    <el-radio :label="0">其中之一条件满足即触发</el-radio>
-                    <el-radio :label="1">全部满足时触发</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div v-for="(index) in Data.num" :key="index"
-              style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent>
-                <el-form-item label="条&#8195;&#8195;件:" style="width: 100%;">
-                  <el-select v-model="Data.selectValue1[index]" class="m-2" placeholder="Select" style="width: 20%;">
-                    <el-option v-for="item in Data.condition" :key="item" :label="item" :value="item"
-                      @click="selectChange(Data.selectValue1[index])" />
-                  </el-select>
-                  <!-- 符号 -->
-                  <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
-                    <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
-                  </el-select>
-                  <el-select v-model="Data.selectValue2[index]" class="m-2" placeholder="Select" style="width: 20%;">
-                    <el-option v-for="item in Data.selectCondition" :key="item" :label="item" :value="item" />
-                  </el-select>
-                  <label style="margin-left: 5%;">报警等级</label>
-                  <!-- 符号 -->
-                  <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
-                    <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
-                  </el-select>
-                  <el-select v-model="Data.selectValue3[index]" class="m-2" placeholder="Select" style="width: 20%;">
-                    <el-option v-for="item in Data.alarmLevel" :key="item" :label="item" :value="item" />
-                  </el-select>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-button :icon="CirclePlusFilled" style="font-size: large" @click="add" />
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-                <el-row justify="end" style="margin-top: 30px;">
-                  <el-button type="primary" @click="toSave">保存</el-button>
-                </el-row>
-              </el-form>
-            </div>
+      <!--操作-->
+      <div style="width: 100%;display: flex;justify-content: left;align-items: center;">
+        <h1 style="margin-bottom: 10px;font-size: 30px;">报警推送规则</h1>
+      </div>
+      <div style="margin-bottom: 10px ;">
+        <hr />
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="规则名称：" style="width: 100%;">
+            <el-input v-model="Data.Filter.ruleName" style="width: 100%;" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="角&#8195;&#8195;色：" style="width: 100%;">
+            <el-select v-model="Data.Filter.roleMappingId" multiple placeholder="请选择角色">
+              <el-option v-for="item in Data.roleList" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 能不能通过调节距离的方式进行高度调节？？？ -->
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item style="width: 100%;">
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="备&#8195;&#8195;注：" style="width: 100%;">
+            <el-input type="textarea" rows="5" v-model="Data.Filter.remark" style="width: 100%;" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="推送方式：" style="width: 100%;">
+            <el-row style="width: 40%;">
+              微信公众号<el-switch v-model="Data.radioValue1" style="margin-left: 3%;" @change="radioChange" />
+            </el-row>
+            <el-row style="width: 40%;">
+              邮箱<el-switch v-model="Data.radioValue2" style="margin-left: 3%;" @change="radioChange" />
+            </el-row>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="模&#8195;&#8195;板：" style="width: 40%;" prop="mode1">
+            <el-select v-model="Data.mode1" class="m-2" placeholder="Select" v-if="Data.radioValue1"
+              @change="modeChange">
+              <el-option v-for="item in templateData.wxList" :key="item.id" :label="item.templateName"
+                :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item style="width: 30%;">
+            <el-select v-model="Data.mode2" class="m-2" placeholder="Select" v-if="Data.radioValue2"
+              @change="modeChange">
+              <el-option v-for="item in templateData.emailList" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="正则匹配：" style="width: 100%;">
+            <el-input type="textarea" rows="5" v-model="Data.Filter.regular" style="width: 100%;" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="互&#8195;&#8195;斥：" style="width: 100%;">
+            <el-switch v-model="Data.Filter.isExclusive" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="优先&#8195;级:" style="width: 100%;">
+            <el-input-number v-model="Data.Filter.taskPriority" :controls="false" :min=1 :max=9 />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="触发方式:" style="width: 100%;">
+            <el-radio-group v-model="Data.Filter.triggerMethod">
+              <el-radio :label="0">其中之一条件满足即触发</el-radio>
+              <el-radio :label="1">全部满足时触发</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-for="(index) in Data.num" :key="index"
+        style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent>
+          <el-form-item label="条&#8195;&#8195;件:" style="width: 100%;">
+            <el-select v-model="Data.selectValue1[index]" class="m-2" placeholder="Select" style="width: 20%;">
+              <el-option v-for="item in Data.condition" :key="item" :label="item" :value="item"
+                @click="selectChange(Data.selectValue1[index])" />
+            </el-select>
+            <!-- 符号 -->
+            <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
+              <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
+            </el-select>
+            <el-select v-model="Data.selectValue2[index]" class="m-2" placeholder="Select" style="width: 20%;">
+              <el-option v-for="item in Data.selectCondition" :key="item" :label="item" :value="item" />
+            </el-select>
+            <label style="margin-left: 5%;">报警等级</label>
+            <!-- 符号 -->
+            <el-select class="sign" style="width: 7%;" suffix-icon="" v-model="Data.seDefault">
+              <el-option v-for="(item, index) in Data.selectList" :key="index" :value="item" selectd />
+            </el-select>
+            <el-select v-model="Data.selectValue3[index]" class="m-2" placeholder="Select" style="width: 20%;">
+              <el-option v-for="item in Data.alarmLevel" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-button :icon="CirclePlusFilled" style="font-size: large" @click="add" />
+      </div>
+      <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
+        <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+          <el-row justify="end" style="margin-top: 30px;">
+            <el-button type="primary" @click="toSave">保存</el-button>
+          </el-row>
+        </el-form>
+      </div>
 
     </el-dialog>
   </div>
@@ -153,6 +150,8 @@ import { alarmRulesApi } from "/@/api/admin/AlarmService/alarmRulesApi";
 import { RoleApi } from '/@/api/admin/Role'
 import { pushTemplateApi } from "/@/api/admin/AlarmService/pushTemplateApi";
 import { TemplateFilterDto } from "/@/api/admin/AlarmService/pushTemplateDto";
+import eventBus from "/@/utils/mitt";
+
 
 
 const Data = reactive({
@@ -309,6 +308,7 @@ const toSave = async () => {
   // console.log(res)
   Data.isShowDialog = false
   reset()
+  eventBus.emit('refreshView')
 }
 
 // 重置
@@ -371,9 +371,9 @@ defineExpose({
 
 /* 输入框标签固定四个字符宽度 */
 ::v-deep .el-form-item__label {
-    // 字体大小14，4个字符，12px右间距
-    width: 100px;
-    justify-content: start;
+  // 字体大小14，4个字符，12px右间距
+  width: 100px;
+  justify-content: start;
 }
 
 .el-input {

admin.ui.plus-master/src/views/admin/statement/alarmRules/index.vue

@@ -36,6 +36,19 @@
             style="width: 100%">
             <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
               :label="column.label" />
+
+            <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation"
+              width="100">
+              <template #default="{ row }">
+                <el-link class="my-el-link mr12 ml12" @click="toEdit(row)" type="primary" icon="ele-Edit"
+                  :underline="false" target="_blank">编辑</el-link>
+                <el-link class="my-el-link mr12 ml12" @click="toDelete(row)" type="primary" icon="ele-Delete"
+                  :underline="false" target="_blank">删除</el-link>
+                <el-link class="my-el-link mr12 ml12" @click="toOpen(row)" type="primary" icon="ele-SwitchButton"
+                  :underline="false" target="_blank">启用</el-link>
+              </template>
+            </el-table-column>
+
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
             <el-pagination v-model:currentPage="Data.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
@@ -52,9 +65,11 @@
 </template>
 
 <script setup lang="ts" name="partsManagement/oilGun">
-import { defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
+import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
 import { alarmRluesFilterModel_SearchFilter, alarmRluesFilterModel, PageInputAlarmRluesFilterModel } from "/@/api/admin/AlarmService/alarmRulesDto";
 import { alarmRulesApi } from "/@/api/admin/AlarmService/alarmRulesApi";
+import eventBus from "/@/utils/mitt";
+
 
 /**页面对象 */
 const Data = reactive({
@@ -98,9 +113,6 @@ const Data = reactive({
 const EditDialog = defineAsyncComponent(() => import('./components/add-alarmRules.vue'))
 const editDialogRef = ref()
 
-onMounted(() => {
-  init()
-})
 
 // // 条件查询
 const init = async () => {
@@ -184,11 +196,52 @@ const pushMethodChange = (() => {
   })
 })
 
+// 操作
+const toEdit = (() => {
+  console.log('编辑')
+})
+
+const toDelete = (() => {
+  console.log('删除')
+})
+
+const toOpen = (() => {
+  console.log('启用')
+})
+
+// 挂载前
+onBeforeMount(() => {
+  eventBus.off('refreshView')
+})
+
+// 挂载时
+onMounted(async () => {
+  await init()
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
+    await init()
+  })
+})
 
 
 
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/alarmRules/template.vue

@@ -36,6 +36,20 @@
                         row-key="id" style="width: 100%">
                         <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
                             :label="column.label" />
+
+                        <!-- 操作 -->
+                        <el-table-column label="操作" fixed="right" header-align="center" align="center"
+                            class="right-operation" width="100">
+                            <template #default="{ row }">
+                                <el-link class="my-el-link mr12 ml12" @click="toEdit(row)" type="primary"
+                                    icon="ele-Edit" :underline="false" target="_blank">编辑</el-link>
+                                <el-link class="my-el-link mr12 ml12" @click="toDelete(row)" type="primary"
+                                    icon="ele-Delete" :underline="false" target="_blank">删除</el-link>
+                                <el-link class="my-el-link mr12 ml12" @click="toOpen(row)" type="primary"
+                                    icon="ele-SwitchButton" :underline="false" target="_blank">启用</el-link>
+                            </template>
+                        </el-table-column>
+
                     </el-table>
                     <div class="my-flex my-flex-end" style="margin-top: 20px">
                         <el-pagination v-model:currentPage="Data.pageInput.currentPage"
@@ -171,10 +185,36 @@ const dataChange = (() => {
     })
 })
 
+// 操作
+const toEdit = (() => {
+    console.log('编辑')
+})
+
+const toDelete = (() => {
+    console.log('删除')
+})
 
+const toOpen = (() => {
+    console.log('启用')
+})
 
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+    width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+    // 字体大小14，4个字符，12px右间距
+    width: 14*4px+12px;
+    justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+    background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/associationManagement/index.vue

@@ -136,5 +136,20 @@ const onCurrentChange = (val: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/gasStationManagement/index.vue

@@ -141,5 +141,20 @@ const onCurrentChange = (val: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/listOfOilEngines/index.vue

@@ -263,5 +263,20 @@ onBeforeMount(() => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/moreOilEngineDetails/component/main.vue

@@ -0,0 +1,492 @@
+<template>
+    <div class="all-con" style="position: relative;">
+        <el-icon style="position: absolute;left: -15px;top: 17px;">
+            <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
+                :is="showicon ? CaretLeft : CaretRight" @click="onShowHide" />
+        </el-icon>
+        <el-card class="oilInfo-bottom one">
+            <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
+
+                <el-col :span="1">
+                    <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div :style="isDisplay == 2 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警
+                    </div>
+                </el-col>
+                <el-col :span="3" class="oilInfo-bottom">
+                    <div :style="isDisplay == 3 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">
+                        ECQS编码状态
+                    </div>
+                </el-col>
+                <el-col :span="3" class="oilInfo-bottom">
+                    <div :style="isDisplay == 4 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">
+                        维修记录
+                    </div>
+                </el-col>
+                <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
+                    <div style="margin-right: 1em;">
+                        图例：
+                    </div>
+                    <div style="margin-right: 2em;">
+                        <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />
+                        在线
+                    </div>
+                    <div style="margin-right: 0.75em;">
+                        <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
+                        离线
+                    </div>
+                    <div style="margin-right: 0.75em;">
+                        <img :src="uurl" style="width: 1em;margin-right: 0.25em;">
+                        校验成功
+                    </div>
+                    <div style="margin-right: 2em;">
+                        <img :src="urrl" style="width: 1em;margin-right: 0.25em;">
+                        校验失败
+                    </div>
+                </el-row>
+            </el-row>
+        </el-card>
+        <div class="tip-con">
+            <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error"
+                class="mb15"></el-alert>
+            <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
+                class="mb15"></el-alert>
+        </div>
+        <!-- 油机内容 -->
+        <el-text tag="b" style="color: #000">油机详情</el-text>
+        <el-card class="oilInfo-con oilInfo-bottom">
+            <el-row class='oilInfo-bottom'>
+                <img class="oilInfo-img" :src="url">
+                <div>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <div class="status-point oilInfo-con-first"
+                            :style="detailsData.list.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
+                        <span style="margin:0 0.5em 0 1em">{{ detailsData.list.name }}号机油机</span>
+                        <img :src="uurl" style="width: 1em;">
+                    </el-col>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
+                    </el-col>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
+                    </el-col>
+                </div>
+            </el-row>
+            <div>
+                <el-row :gutter="20">
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>机型：</span>{{ detailsData.list.model }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>生产日期：</span>{{ detailsData.list.createdTime }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>安装日期：</span>{{ detailsData.list.installationDate }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>启用日期：</span>{{ detailsData.list.startupDate }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>累计在线时间：</span>{{ detailsData.list.onlineDesc }}
+                    </el-col>
+                </el-row>
+            </div>
+        </el-card>
+        <el-row :gutter="10" class="oilInfo-bottom">
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <el-text tag="b" style="color: #000">油枪列表</el-text>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('所有')"
+                    :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    所有
+                </div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('在线')"
+                    :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    在线</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('离线')"
+                    :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    离线</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验通过</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验失败</div>
+            </el-col>
+        </el-row>
+        <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
+            <el-col :span="8" v-for="(item, index) in listcom" v-bind:key="index">
+                <el-card class="oilInfo-msg oilInfo-bottom"
+                    @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
+                    <el-row class="oilInfo-bottom">
+                        <img :src="url" class="oilInfo-img">
+                        <div>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
+                                <div style="position: absolute;right: 10%;top: 5%;">
+                                    <div class="status-point"
+                                        :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
+                                    </div>
+                                    <img :src="uurl" style="width: 1em;">
+                                </div>
+                            </el-col>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <span class="oilInfo-item-two">物理枪号：</span>{{
+                                    item.mainBoard_NozzleNo }}
+                            </el-col>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
+                            </el-col>
+                        </div>
+                    </el-row>
+                    <el-row class="oilInfo-bottom">
+                        <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
+                    </el-row>
+                    <el-row>
+                        <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+//import { CirclePlusFilled } from '@element-plus/icons-vue'
+import { NozzlecontrolDtl } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
+import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
+import { FuelDispenserEntity, AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
+import router from "/@/router";
+import { MoreOilEngineDetailsApi } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
+
+import {
+    Document,
+    Menu as IconMenu,
+    Location,
+    Setting,
+    CaretRight,
+    CaretLeft,
+} from '@element-plus/icons-vue'
+
+/******************************数据对象***************************************/
+
+const url = '/src/assets/logo-com.png'
+const uurl = '/src/assets/map/IconParkSolidCheckOne.png'
+const urrl = '/src/assets/map/IconParkSolidCloseOne.png'
+
+/**
+ * 接收index.vue传的id,传递 菜单栏控制参数
+ */
+const props = defineProps({
+    id: String,
+})
+const emit = defineEmits(['getIcon'])
+
+/**
+ * 表格数据对象
+ */
+const tableData = reactive({
+    loading: false,
+    list: [] as Array<AlarmHistoryDto>
+})
+
+/**
+ * 油机详情数据对象
+ */
+const detailsData = reactive({
+    loading: false,
+    list: {} as FuelDispenserEntity
+})
+
+/**
+ * 油机列表详情数据对象
+ */
+const oilListData = reactive({
+    loading: false,
+    list: [] as Array<NozzlecontrolDtl>
+})
+/**
+ * 油机列表初始ID
+ */
+const initID = ref()
+const toPage = () => {
+    const id = props.id
+    router.push({ path: `/statement/${id}/more/moreAlert` })
+}
+
+/**
+ * 油枪列表相关数据
+ */
+let listcom = JSON.parse(JSON.stringify(oilListData.list))
+let flagData = reactive({
+    keyData: 0,
+    isFlag: '所有'
+})
+/******************************数据对象***************************************/
+
+/*******************************方法**************************************/
+
+// /**
+//  * 变换时改样式
+//  * @param event
+//  * @param item
+//  */
+// const onCardChange = (event, item) => {
+//   // console.log(event)
+//   // console.log(item);
+//   let ele = event.target
+//
+//   if( ele.getAttribute('name') !== 'card') {
+//     ele = ele.closest('.card')
+//   }
+//
+//   if(ele.classList.contains("active-card")) return
+//
+//   initID.value = item.oilEngineName
+//
+//   const parentElement = document.getElementById('top-conId')
+//   const myElement = parentElement.querySelector('.active-card')
+//
+//   if(myElement){
+//     myElement.classList.remove('active-card')
+//   }
+//
+//   ele.classList.add("active-card")
+// }
+
+watch(() => initID.value, () => {
+    initTableData()
+    initDetailsData()
+})
+watch(props, (val) => {
+    init()
+})
+/*******************************方法**************************************/
+
+/**********************************初始化***********************************/
+/**
+ * 格式化日期
+ */
+const formatDate = (val) => {
+    const date = new Date(val)
+    const year: number = date.getFullYear();
+    const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day: string = date.getDate().toString().padStart(2, '0');
+    const hours: string = date.getHours().toString().padStart(2, '0');
+    const minutes: string = date.getMinutes().toString().padStart(2, '0');
+    const seconds: string = date.getSeconds().toString().padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+/**
+ * 初始化油机列表详情数据对象
+ */
+const initOilListData = async () => {
+    oilListData.loading = true
+    const fuelId = props.id
+    const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
+    oilListData.list = data
+    oilListData.loading = false
+    listcom = data
+    flagData.keyData = Math.random()
+}
+
+/**
+ * 初始化表格数据对象
+ */
+const initTableData = async () => {
+    tableData.loading = true
+    const fuelId = props.id
+    const filter = { fuelId: fuelId }
+    const pageInput = { currentPage: 1, pageSize: 5 }
+    const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({ ...pageInput, filter: filter })
+    tableData.list = data.list
+    tableData.list = tableData.list?.map((item) => {
+        if (item.createdDate !== null) {
+            item.createdDate = formatDate(item.createdDate)
+        }
+        return item
+    })
+    tableData.loading = false
+}
+
+/**
+ * 初始化油机详情数据对象
+ */
+const initDetailsData = async () => {
+    detailsData.loading = true
+    const fuelId = props.id
+    const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
+    detailsData.list = data
+    if (detailsData.list.createdTime !== null) {
+        detailsData.list.createdTime = formatDate(detailsData.list.createdTime)
+    }
+    if (detailsData.list.installationDate !== null) {
+        detailsData.list.installationDate = formatDate(detailsData.list.installationDate)
+    }
+    if (detailsData.list.startupDate !== null) {
+        detailsData.list.startupDate = formatDate(detailsData.list.startupDate)
+    }
+    if (detailsData.list.onlineStatus !== null) {
+        if (detailsData.list.onlineStatus === 'offline') {
+            detailsData.list.onlineStatus = '离线'
+        } else {
+            detailsData.list.onlineStatus = '在线'
+        }
+    }
+    if (detailsData.list.deviceStatus !== null) {
+        if (detailsData.list.deviceStatus === 'enable') {
+            detailsData.list.deviceStatus = '启用'
+        } else if (detailsData.list.deviceStatus === 'factory') {
+            detailsData.list.deviceStatus = '出厂注册'
+        } else {
+            detailsData.list.deviceStatus = '备案'
+        }
+    }
+    detailsData.loading = false
+}
+
+const init = () => {
+    initDetailsData()
+    initTableData()
+    initOilListData()
+
+    console.log('init')
+    console.log(props.id)
+}
+
+onMounted(() => {
+    init()
+})
+
+// 路由跳转 -- 部件信息图
+const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
+    router.push({
+        path: `/statement/partInformation`,
+        query: {
+            name: name,
+            NozzleNo: NozzleNo,
+            status: status,
+            fuelName: fuelName,
+            alarming: alarming,
+            code: code
+        }
+    })
+})
+/**********************************初始化***********************************/
+
+const isOnline = (statu: string) => {
+    if (statu == '所有') {
+        listcom = JSON.parse(JSON.stringify(oilListData.list))
+    } else {
+        listcom = oilListData.list.filter((data) => {
+            return data.onlineStatus === statu
+        })
+    }
+    flagData.keyData = Math.random()
+    flagData.isFlag = statu
+}
+
+
+const isDisplay = ref(1)
+// 内容区顶部导航 变换
+const display = (num: number) => {
+    isDisplay.value = num
+    if (num == 2) {
+        toPage()
+    }
+}
+
+// 菜单栏的显示与隐藏
+let showicon = ref(true)
+const onShowHide = () => {
+    showicon.value = !showicon.value
+    emit('getIcon', showicon.value)
+}
+
+</script>
+
+<style scoped lang="scss">
+.all-con {
+    flex: 1;
+    margin-left: 20px;
+
+
+}
+
+.oilInfo-bottom {
+    margin-bottom: 10px;
+}
+
+.oilInfo-top {
+    margin-bottom: 10px;
+}
+
+.oilInfo-con {
+    width: 100%;
+    height: 25%;
+    border-radius: 10px;
+
+}
+
+.oilInfo-item {
+    color: rgb(173, 171, 171)
+}
+
+.oilInfo-img {
+    margin-right: 20px;
+    width: 75px;
+    height: 75px;
+    background-color: #ccc;
+    border-radius: 8px;
+}
+
+.oilLabel-con {
+    background-color: #89898b;
+    height: 1.5em;
+    width: 3.9em;
+    line-height: 1.5em;
+    text-align: center;
+    border-radius: 999rem;
+    color: #fff;
+}
+
+.oilInfo-msg {
+    height: 200px;
+
+    .oilInfo-item-two {
+        color: rgb(173, 171, 171)
+    }
+}
+
+// 小圆点
+.status-point {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    position: absolute;
+    right: 10%;
+    top: 30%;
+    margin-right: 30px;
+}
+</style>

admin.ui.plus-master/src/views/admin/statement/moreOilEngineDetails/index.vue

@@ -1,513 +1,130 @@
 <template>
   <div class="layout-pd" style="height: 100%;width: 100%;">
     <el-row style="height: 100%;width: 100%; display: flex;">
+
       <!-- 菜单栏 -->
-      <el-menu default-active="2" class="el-menu-vertical-demo" text-color="black" @open="handleOpen"
-        @close="handleClose" v-if="showicon">
-        <el-menu-item index="1">
+      <el-menu default-active="-1" class="el-menu-vertical-demo" text-color="black" @open="handleOpen"
+        @close="handleClose" v-if="showicon" unique-opened>
+        <el-menu-item index="-1">
           <span>整站</span>
         </el-menu-item>
-        <el-sub-menu index="2">
+        <el-sub-menu :index="oilItem.id" v-for="oilItem in fuelList" :key="oilItem.id">
           <template #title>
-            <span>{{ detailsData.list.name }}号机</span>
+            <div>
+              <div class="status-point menu-point-second"
+                :style="oilItem.onlineStatus == 'online' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
+              <span>{{ oilItem.name }}号机</span>
+            </div>
+
           </template>
           <el-menu-item-group>
-            <el-menu-item index="1-1" v-for="(item, index) in oilListData.list" v-bind:key="index"> {{
-              item.mainBoard_NozzleNo
-            }}</el-menu-item>
+            <el-menu-item :index="oilItem.id - item.name" v-for="(item, index) in oilItem.oilList" v-bind:key="index">
+              <div class="status-point menu-point-first"
+                :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
+              {{
+                item.mainBoard_NozzleNo
+              }}{{ item.name }}号枪
+            </el-menu-item>
           </el-menu-item-group>
         </el-sub-menu>
-        <!-- <el-menu-item index="2">
-          <span>Navigator Two</span>
-        </el-menu-item>
-        <el-menu-item index="3" disabled>
-          <span>Navigator Three</span>
-        </el-menu-item>
-        <el-menu-item index="4">
-          <span>Navigator Four</span>
-        </el-menu-item> -->
       </el-menu>
 
-      <div class="all-con" style="position: relative;">
-        <el-icon style="position: absolute;left: -15px;top: 17px;">
-          <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
-            :is="showicon ? CaretLeft : CaretRight" @click="onShowHide" />
-        </el-icon>
-        <el-card class="oilInfo-bottom one">
-          <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
-
-            <el-col :span="1">
-              <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览</div>
-            </el-col>
-            <el-col :span="2">
-              <div :style="isDisplay == 2 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警</div>
-            </el-col>
-            <el-col :span="3" class="oilInfo-bottom">
-              <div :style="isDisplay == 3 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">ECQS编码状态
-              </div>
-            </el-col>
-            <el-col :span="3" class="oilInfo-bottom">
-              <div :style="isDisplay == 4 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">维修记录
-              </div>
-            </el-col>
-            <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
-              <div style="margin-right: 1em;">
-                图例：
-              </div>
-              <div style="margin-right: 2em;">
-                <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />
-                在线
-              </div>
-              <div style="margin-right: 0.75em;">
-                <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
-                离线
-              </div>
-              <div style="margin-right: 0.75em;">
-                <img :src="uurl" style="width: 1em;margin-right: 0.25em;">
-                校验成功
-              </div>
-              <div style="margin-right: 2em;">
-                <img :src="urrl" style="width: 1em;margin-right: 0.25em;">
-                校验失败
-              </div>
-            </el-row>
-          </el-row>
-        </el-card>
-        <div class="tip-con">
-          <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error" class="mb15"></el-alert>
-          <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
-            class="mb15"></el-alert>
-        </div>
-        <!-- 油机内容 -->
-        <el-text tag="b" style="color: #000">油机详情</el-text>
-        <el-card class="oilInfo-con oilInfo-bottom">
-          <el-row class='oilInfo-bottom'>
-            <img class="oilInfo-img" :src="url">
-            <div>
-              <el-col :span="24" class="oilInfo-bottom">
-                <div class="status-point oilInfo-con-first"
-                  :style="detailsData.list.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
-                <span style="margin:0 0.5em 0 1em">{{ detailsData.list.name }}号机油机</span>
-                <img :src="uurl" style="width: 1em;">
-              </el-col>
-              <el-col :span="24" class="oilInfo-bottom">
-                <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
-              </el-col>
-              <el-col :span="24" class="oilInfo-bottom">
-                <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
-              </el-col>
-            </div>
-          </el-row>
-          <div>
-            <el-row :gutter="20">
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>机型：</span>{{ detailsData.list.model }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
-              </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>生产日期：</span>{{ detailsData.list.createdTime }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>安装日期：</span>{{ detailsData.list.installationDate }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>启用日期：</span>{{ detailsData.list.startupDate }}
-              </el-col>
-              <el-col :span="6" class="oilInfo-bottom">
-                <span class='oilInfo-item'>累计在线时间：</span>{{ detailsData.list.onlineDesc }}
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
-        <el-row :gutter="10" class="oilInfo-bottom">
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <el-text tag="b" style="color: #000">油枪列表</el-text>
-          </el-col>
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <div class="oilLabel-con" @click="isOnline('所有')"
-              :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">所有
-            </div>
-          </el-col>
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <div class="oilLabel-con" @click="isOnline('在线')"
-              :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">在线</div>
-          </el-col>
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <div class="oilLabel-con" @click="isOnline('离线')"
-              :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">离线</div>
-          </el-col>
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验通过</div>
-          </el-col>
-          <el-col :span="0.5" class="oilInfo-bottom">
-            <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验失败</div>
-          </el-col>
-        </el-row>
-        <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
-          <el-col :span="8" v-for="(item, index) in listcom" v-bind:key="index">
-            <el-card class="oilInfo-msg oilInfo-bottom"
-              @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
-              <el-row class="oilInfo-bottom">
-                <img :src="url" class="oilInfo-img">
-                <div>
-                  <el-col :span="24" class="oilInfo-bottom">
-                    <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
-                    <div style="position: absolute;right: 10%;top: 5%;">
-                      <div class="status-point"
-                        :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
-                      </div>
-                      <img :src="uurl" style="width: 1em;">
-                    </div>
-                  </el-col>
-                  <el-col :span="24" class="oilInfo-bottom">
-                    <span class="oilInfo-item-two">物理枪号：</span>{{
-                      item.mainBoard_NozzleNo }}
-                  </el-col>
-                  <el-col :span="24" class="oilInfo-bottom">
-                    <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
-                  </el-col>
-                </div>
-              </el-row>
-              <el-row class="oilInfo-bottom">
-                <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
-              </el-row>
-              <el-row>
-                <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
-              </el-row>
-            </el-card>
-          </el-col>
-        </el-row>
-      </div>
+      <mainView :id="getId" @getIcon="getValue"></mainView>
 
     </el-row>
-
-
-
-
-
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  Document,
-  Menu as IconMenu,
-  Location,
-  Setting,
-  CaretRight,
-  CaretLeft,
-} from '@element-plus/icons-vue'
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-
-
-const url = '/src/assets/logo-com.png'
-const uurl = '/src/assets/map/IconParkSolidCheckOne.png'
-const urrl = '/src/assets/map/IconParkSolidCloseOne.png'
-
-
-
-// -------------------------
-
-
-
-
-import { onMounted, reactive, ref, watch } from "vue";
+import { defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
 //import { CirclePlusFilled } from '@element-plus/icons-vue'
-import { NozzlecontrolDtl } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
 import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
-import { FuelDispenserEntity, AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
 import router from "/@/router";
 import { MoreOilEngineDetailsApi } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
-import { random, range } from 'lodash';
+import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
+import { ListOfOilEnginesApi } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
 
-/******************************数据对象***************************************/
 
-/**
- * 表格数据对象
- */
-const tableData = reactive({
-  loading: false,
-  list: [] as Array<AlarmHistoryDto>
-})
-
-/**
- * 油机详情数据对象
- */
-const detailsData = reactive({
-  loading: false,
-  list: {} as FuelDispenserEntity
-})
+// 引入组件
+const mainView = defineAsyncComponent(() => import('./component/main.vue'))
+const getId = ref('') as any
+getId.value = router.currentRoute.value.params.id
+console.log(getId.value)
 
-/**
- * 油机列表详情数据对象
- */
-const oilListData = reactive({
-  loading: false,
-  list: [] as Array<NozzlecontrolDtl>
-})
-/**
- * 油机列表初始ID
- */
-const initID = ref()
-const toPage = () => {
-  const id = router.currentRoute.value.params.id
-  router.push({ path: `/statement/${id}/more/moreAlert` })
+let showicon = ref(true)
+const getValue = (data: boolean) => {
+  showicon.value = data
 }
 
-/**
- * 油枪列表相关数据
- */
-let listcom = JSON.parse(JSON.stringify(oilListData.list))
-let flagData = reactive({
-  keyData: 0,
-  isFlag: '所有'
-})
-/******************************数据对象***************************************/
 
-/*******************************方法**************************************/
-
-// /**
-//  * 变换时改样式
-//  * @param event
-//  * @param item
-//  */
-// const onCardChange = (event, item) => {
-//   // console.log(event)
-//   // console.log(item);
-//   let ele = event.target
-//
-//   if( ele.getAttribute('name') !== 'card') {
-//     ele = ele.closest('.card')
-//   }
-//
-//   if(ele.classList.contains("active-card")) return
-//
-//   initID.value = item.oilEngineName
-//
-//   const parentElement = document.getElementById('top-conId')
-//   const myElement = parentElement.querySelector('.active-card')
-//
-//   if(myElement){
-//     myElement.classList.remove('active-card')
-//   }
-//
-//   ele.classList.add("active-card")
-// }
-
-watch(() => initID.value, () => {
-  initTableData()
-  initDetailsData()
-})
-
-/*******************************方法**************************************/
-
-/**********************************初始化***********************************/
-/**
- * 格式化日期
- */
-const formatDate = (val) => {
-  const date = new Date(val)
-  const year: number = date.getFullYear();
-  const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
-  const day: string = date.getDate().toString().padStart(2, '0');
-  const hours: string = date.getHours().toString().padStart(2, '0');
-  const minutes: string = date.getMinutes().toString().padStart(2, '0');
-  const seconds: string = date.getSeconds().toString().padStart(2, '0');
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-}
-/**
- * 初始化油机列表详情数据对象
- */
-const initOilListData = async () => {
-  oilListData.loading = true
-  const fuelId = router.currentRoute.value.params.id
-  const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
-  oilListData.list = data
-  oilListData.loading = false
-  listcom = data
-  flagData.keyData = Math.random()
-}
-
-/**
- * 初始化表格数据对象
- */
-const initTableData = async () => {
-  tableData.loading = true
-  const fuelId = router.currentRoute.value.params.id
-  const filter = { fuelId: fuelId }
-  const pageInput = { currentPage: 1, pageSize: 5 }
-  const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({ ...pageInput, filter: filter })
-  tableData.list = data.list
-  tableData.list = tableData.list?.map((item) => {
-    if (item.createdDate !== null) {
-      item.createdDate = formatDate(item.createdDate)
-    }
-    return item
-  })
-  tableData.loading = false
-}
-
-/**
- * 初始化油机详情数据对象
- */
-const initDetailsData = async () => {
-  detailsData.loading = true
-  const fuelId = router.currentRoute.value.params.id
-  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
-  detailsData.list = data
-  if (detailsData.list.createdTime !== null) {
-    detailsData.list.createdTime = formatDate(detailsData.list.createdTime)
-  }
-  if (detailsData.list.installationDate !== null) {
-    detailsData.list.installationDate = formatDate(detailsData.list.installationDate)
-  }
-  if (detailsData.list.startupDate !== null) {
-    detailsData.list.startupDate = formatDate(detailsData.list.startupDate)
-  }
-  if (detailsData.list.onlineStatus !== null) {
-    if (detailsData.list.onlineStatus === 'offline') {
-      detailsData.list.onlineStatus = '离线'
-    } else {
-      detailsData.list.onlineStatus = '在线'
-    }
-  }
-  if (detailsData.list.deviceStatus !== null) {
-    if (detailsData.list.deviceStatus === 'enable') {
-      detailsData.list.deviceStatus = '启用'
-    } else if (detailsData.list.deviceStatus === 'factory') {
-      detailsData.list.deviceStatus = '出厂注册'
-    } else {
-      detailsData.list.deviceStatus = '备案'
-    }
+const handleOpen = (key: string, keyPath: string[]) => {
+  if (key == '-1') {
+    getId.value = router.currentRoute.value.params.id
+  } else {
+    getId.value = key
   }
-  detailsData.loading = false
+  console.log('000', getId.value)
+  console.log(key, keyPath)
 }
-
-const init = () => {
-  initDetailsData()
-  initTableData()
-  initOilListData()
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
 }
 
-onMounted(() => {
-  init()
-})
 
-// 路由跳转 -- 部件信息图
-const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
-  router.push({
-    path: `/statement/partInformation`,
-    query: {
-      name: name,
-      NozzleNo: NozzleNo,
-      status: status,
-      fuelName: fuelName,
-      alarming: alarming,
-      code: code
-    }
-  })
+/**
+ * -------------- 获取左边菜单栏相关数据 --------------
+ *  */
+
+const oilEngineData = reactive({
+  filterModel: {
+    /**油机号*/
+    name: "",
+    /**加油站*/
+    gasStation: "",
+    /**加油机机型*/
+    model: "",
+    /**设备状态*/
+    deviceStatus: "",
+    /**在线状态*/
+    onlineStatus: "",
+  } as FuelDispenserDto_SearchFilter,
+  total: 0,
+  pageInput: {
+    currentPage: 1,
+    pageSize: 100,
+  } as PageInputFuelDispenserDto,
 })
-/**********************************初始化***********************************/
 
-const isOnline = (statu: string) => {
-  if (statu == '所有') {
-    listcom = JSON.parse(JSON.stringify(oilListData.list))
-  } else {
-    listcom = oilListData.list.filter((data) => {
-      return data.onlineStatus === statu
+import { useRoute } from 'vue-router';
+const Arouter = useRoute()
+let data = ref('') as any
+let fuelList = ref([]) as any
+data.value = Arouter.query.data
+
+const getMenuData = async () => {
+  if (data.value == null) return
+  oilEngineData.filterModel.gasStation = data.value
+  const res: any =
+    await new ListOfOilEnginesApi().getPage({ ...oilEngineData.pageInput, filter: oilEngineData.filterModel })
+  res.data.list.forEach(async (item: any) => {
+    await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: item.fuelId }).then(async (res) => {
+      let list = [] as any
+      await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: item.fuelId }).then((r) => {
+        list = r.data
+      })
+      fuelList.value.push({ 'id': item.fuelId, 'name': res.data.name, 'onlineStatus': res.data.onlineStatus, 'oilList': list })
     })
-  }
-  flagData.keyData = Math.random()
-  flagData.isFlag = statu
-}
-
-
-const isDisplay = ref(1)
-// 内容区顶部导航 变换
-const display = (num: number) => {
-  isDisplay.value = num
-  if (num == 2) {
-    toPage()
-  }
-}
-
-// 
-let showicon = ref(true)
-const onShowHide = () => {
-  showicon.value = !showicon.value
+  })
+  console.log(fuelList)
 }
 
+onMounted(() => {
+  getMenuData()
+})
 
 </script>
 
 <style scoped lang="scss">
-.all-con {
-  flex: 1;
-  margin-left: 20px;
-
-
-}
-
-.oilInfo-bottom {
-  margin-bottom: 10px;
-}
-
-.oilInfo-top {
-  margin-bottom: 10px;
-}
-
-.oilInfo-con {
-  width: 100%;
-  height: 25%;
-  border-radius: 10px;
-
-}
-
-.oilInfo-item {
-  color: rgb(173, 171, 171)
-}
-
-.oilInfo-img {
-  margin-right: 20px;
-  width: 75px;
-  height: 75px;
-  background-color: #ccc;
-  border-radius: 8px;
-}
-
-.oilLabel-con {
-  background-color: #89898b;
-  height: 1.5em;
-  width: 3.9em;
-  line-height: 1.5em;
-  text-align: center;
-  border-radius: 999rem;
-  color: #fff;
-}
-
-.oilInfo-msg {
-  height: 200px;
-
-  .oilInfo-item-two {
-    color: rgb(173, 171, 171)
-  }
-}
-
 // -------- 菜单栏
 .el-menu,
 .el-menu-item-group {
@@ -541,6 +158,16 @@ const onShowHide = () => {
   top: 0.5em;
 }
 
+.menu-point-first {
+  left: 2em;
+  top: 1.8em;
+}
+
+.menu-point-second {
+  left: 0.7em;
+  top: 1.8em;
+}
+
 .one {
   --el-card-padding: 10px
 }

admin.ui.plus-master/src/views/admin/statement/oilEngineDetails/index.vue

@@ -8,237 +8,147 @@
           <div class="basicInformation" v-loading="basicInfo.loading">
             <div class="basicInformation-left">
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="油机号"
-                  trigger="hover"
-                  :content="basicInfo.info.name"
-                >
+                <el-popover placement="top-start" :width="200" title="油机号" trigger="hover"
+                  :content="basicInfo.info.name">
                   <template #reference>
-                    <span class="m-2"> 油机号: {{basicInfo.info.name}}</span>
+                    <span class="m-2"> 油机号: {{ basicInfo.info.name }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="序列号"
-                  trigger="hover"
-                  :content="basicInfo.info.serialNumber"
-                >
+                <el-popover placement="top-start" :width="200" title="序列号" trigger="hover"
+                  :content="basicInfo.info.serialNumber">
                   <template #reference>
-                    <span class="m-2"> 序列号: {{basicInfo.info.serialNumber}}</span>
+                    <span class="m-2"> 序列号: {{ basicInfo.info.serialNumber }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="石油公司"
-                  trigger="hover"
-                  :content="basicInfo.info.oilCompany"
-                >
+                <el-popover placement="top-start" :width="200" title="石油公司" trigger="hover"
+                  :content="basicInfo.info.oilCompany">
                   <template #reference>
-                    <span class="m-2"> 石油公司: {{basicInfo.info.oilCompany}}</span>
+                    <span class="m-2"> 石油公司: {{ basicInfo.info.oilCompany }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="加油机厂商"
-                  trigger="hover"
-                  :content="basicInfo.info.manufacturer"
-                >
+                <el-popover placement="top-start" :width="200" title="加油机厂商" trigger="hover"
+                  :content="basicInfo.info.manufacturer">
                   <template #reference>
-                    <span class="m-2"> 加油机厂商: {{basicInfo.info.manufacturer}}</span>
+                    <span class="m-2"> 加油机厂商: {{ basicInfo.info.manufacturer }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="加油站"
-                  trigger="hover"
-                  :content="basicInfo.info.gasStation"
-                >
+                <el-popover placement="top-start" :width="200" title="加油站" trigger="hover"
+                  :content="basicInfo.info.gasStation">
                   <template #reference>
                     <span class="m-2 ">
                       加油站:
-                        {{basicInfo.info.gasStation}}
+                      {{ basicInfo.info.gasStation }}
                     </span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="加油机机型"
-                  trigger="hover"
-                  :content="basicInfo.info.model"
-                >
+                <el-popover placement="top-start" :width="200" title="加油机机型" trigger="hover"
+                  :content="basicInfo.info.model">
                   <template #reference>
                     <span class="m-2">
                       加油机机型:
-                        {{ basicInfo.info.model }}
+                      {{ basicInfo.info.model }}
                     </span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="加油机枪数量"
-                  trigger="hover"
-                  :content="basicInfo.info.gunCount"
-                >
+                <el-popover placement="top-start" :width="200" title="加油机枪数量" trigger="hover"
+                  :content="basicInfo.info.gunCount">
                   <template #reference>
-                    <span class="m-2"> 加油机枪数量: {{basicInfo.info.gunCount}}</span>
+                    <span class="m-2"> 加油机枪数量: {{ basicInfo.info.gunCount }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  trigger="hover"
-                  title="设备状态"
-                  :content="basicInfo.info.deviceStatus"
-                >
+                <el-popover placement="top-start" :width="200" trigger="hover" title="设备状态"
+                  :content="basicInfo.info.deviceStatus">
                   <template #reference>
-                    <span class="m-2"> 设备状态: {{basicInfo.info.deviceStatus}}</span>
+                    <span class="m-2"> 设备状态: {{ basicInfo.info.deviceStatus }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="在线状态"
-                  trigger="hover"
-                  :content="basicInfo.info.onlineStatus"
-                >
+                <el-popover placement="top-start" :width="200" title="在线状态" trigger="hover"
+                  :content="basicInfo.info.onlineStatus">
                   <template #reference>
-                    <span class="m-2"> 在线状态: {{basicInfo.info.onlineStatus}}</span>
+                    <span class="m-2"> 在线状态: {{ basicInfo.info.onlineStatus }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="出厂时间"
-                  trigger="hover"
-                  :content="basicInfo.info.manufactureDate"
-                >
+                <el-popover placement="top-start" :width="200" title="出厂时间" trigger="hover"
+                  :content="basicInfo.info.manufactureDate">
                   <template #reference>
-                    <span class="m-2"> 出厂时间: {{basicInfo.info.manufactureDate}}</span>
+                    <span class="m-2"> 出厂时间: {{ basicInfo.info.manufactureDate }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="启动时间"
-                  trigger="hover"
-                  :content="basicInfo.info.startupDate"
-                >
+                <el-popover placement="top-start" :width="200" title="启动时间" trigger="hover"
+                  :content="basicInfo.info.startupDate">
                   <template #reference>
-                    <span class="m-2"> 启动时间: {{basicInfo.info.startupDate}}</span>
+                    <span class="m-2"> 启动时间: {{ basicInfo.info.startupDate }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="安装时间"
-                  trigger="hover"
-                  :content="basicInfo.info.installationDate"
-                >
+                <el-popover placement="top-start" :width="200" title="安装时间" trigger="hover"
+                  :content="basicInfo.info.installationDate">
                   <template #reference>
-                    <span class="m-2"> 安装时间: {{basicInfo.info.installationDate}}</span>
+                    <span class="m-2"> 安装时间: {{ basicInfo.info.installationDate }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="创建者"
-                  trigger="hover"
-                  :content="basicInfo.info.createdUserName"
-                >
+                <el-popover placement="top-start" :width="200" title="创建者" trigger="hover"
+                  :content="basicInfo.info.createdUserName">
                   <template #reference>
-                    <span class="m-2"> 创建者: {{basicInfo.info.createdUserName}}</span>
+                    <span class="m-2"> 创建者: {{ basicInfo.info.createdUserName }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="创建时间"
-                  trigger="hover"
-                  :content="basicInfo.info.createdTime"
-                >
+                <el-popover placement="top-start" :width="200" title="创建时间" trigger="hover"
+                  :content="basicInfo.info.createdTime">
                   <template #reference>
-                    <span class="m-2"> 创建时间: {{basicInfo.info.createdTime}}</span>
+                    <span class="m-2"> 创建时间: {{ basicInfo.info.createdTime }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="修改者"
-                  trigger="hover"
-                  :content="basicInfo.info.modifiedUserName"
-                >
+                <el-popover placement="top-start" :width="200" title="修改者" trigger="hover"
+                  :content="basicInfo.info.modifiedUserName">
                   <template #reference>
-                    <span class="m-2"> 修改者: {{basicInfo.info.modifiedUserName}}</span>
+                    <span class="m-2"> 修改者: {{ basicInfo.info.modifiedUserName }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item ">
-                <el-popover
-                  placement="top-start"
-                  :width="200"
-                  title="修改时间"
-                  trigger="hover"
-                  :content="basicInfo.info.modifiedTime"
-                >
+                <el-popover placement="top-start" :width="200" title="修改时间" trigger="hover"
+                  :content="basicInfo.info.modifiedTime">
                   <template #reference>
-                    <span class="m-2"> 修改时间: {{basicInfo.info.modifiedTime}}</span>
+                    <span class="m-2"> 修改时间: {{ basicInfo.info.modifiedTime }}</span>
                   </template>
                 </el-popover>
               </div>
               <div class="item">
-                <el-link
-                  class="my-el-link mr12 ml12"
-                  @click="toPage()"
-                  type="primary"
-                  size="small"
-                  :underline="false"
-                  target="_blank"
-                >查看更多>></el-link>
+                <el-link class="my-el-link mr12 ml12" @click="toPage()" type="primary" size="small" :underline="false"
+                  target="_blank">查看更多>></el-link>
               </div>
             </div>
-            <div class="basicInformation-right" >
+            <div class="basicInformation-right">
               <div @click="showBigPic(basicInfo.imgUrl)">
-                <el-image loading="lazy"
-                          alt="fgg"
-                          class="img"
-                          fit="contain"
-                          :src="basicInfo.imgUrl" >
+                <el-image loading="lazy" alt="fgg" class="img" fit="contain" :src="basicInfo.imgUrl">
                   <template #error>
                     <div class="image-slot">
                       <el-icon><icon-picture /></el-icon>
@@ -254,40 +164,32 @@
       <!--报警历史-->
       <el-col :xs="24">
         <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="报警历史">
-          <el-table v-loading="alarmHistory.loading"  stripe :data="alarmHistory.list" row-key="id" style="width: 100%">
-            <el-table-column prop="createdDate" label="时间"  />
-            <el-table-column prop="gasStation" label="加油站"  />
-            <el-table-column prop="name" label="加油机"  >
+          <el-table v-loading="alarmHistory.loading" stripe :data="alarmHistory.list" row-key="id" style="width: 100%">
+            <el-table-column prop="createdDate" label="时间" />
+            <el-table-column prop="gasStation" label="加油站" />
+            <el-table-column prop="name" label="加油机">
               <template #default="{ row }">
-                {{row.name}}
+                {{ row.name }}
               </template>
             </el-table-column>
-            <el-table-column prop="serialNumber" label="加油机序号"  >
+            <el-table-column prop="serialNumber" label="加油机序号">
               <template #default="{ row }">
-                {{row.serialNumber}}
+                {{ row.serialNumber }}
               </template>
             </el-table-column>
-            <el-table-column prop="alarmSource" label="报警来源"  >
+            <el-table-column prop="alarmSource" label="报警来源">
               <template #default="{ row }">
-                {{row.alarmSource}}
+                {{ row.alarmSource }}
               </template>
             </el-table-column>
-            <el-table-column prop="alarmType" label="报警类型"  />
-            <el-table-column prop="alarmDescription" label="报警描述"  />
+            <el-table-column prop="alarmType" label="报警类型" />
+            <el-table-column prop="alarmDescription" label="报警描述" />
           </el-table>
-          <div class="my-flex my-flex-end"  style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="alarmHistory.pageInput.currentPage"
-              v-model:page-size="alarmHistory.pageInput.pageSize"
-              :default-page-size="5"
-              :total="alarmHistory.total"
-              :page-sizes="[5, 10, 20, 50, 100]"
-              small
-              background
-              @size-change="onAlarmHistorySizeChange"
-              @current-change="onAlarmHistoryCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+          <div class="my-flex my-flex-end" style="margin-top: 20px">
+            <el-pagination v-model:currentPage="alarmHistory.pageInput.currentPage"
+              v-model:page-size="alarmHistory.pageInput.pageSize" :default-page-size="5" :total="alarmHistory.total"
+              :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onAlarmHistorySizeChange"
+              @current-change="onAlarmHistoryCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
@@ -295,49 +197,33 @@
       <!--生产日志-->
       <el-col :xs="24">
         <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="生命周期">
-          <el-table v-loading="lifeCycle.loading"  stripe :data="lifeCycle.list" row-key="id" style="width: 100%">
-            <el-table-column prop="createdDate" label="时间"  />
-            <el-table-column prop="operator" label="操作人"  />
-            <el-table-column prop="operatorID" label="操作人ID"  />
-            <el-table-column prop="operation" label="操作"  />
+          <el-table v-loading="lifeCycle.loading" stripe :data="lifeCycle.list" row-key="id" style="width: 100%">
+            <el-table-column prop="createdDate" label="时间" />
+            <el-table-column prop="operator" label="操作人" />
+            <el-table-column prop="operatorID" label="操作人ID" />
+            <el-table-column prop="operation" label="操作" />
           </el-table>
-          <div class="my-flex my-flex-end"  style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="lifeCycle.pageInput.currentPage"
-              v-model:page-size="lifeCycle.pageInput.pageSize"
-              :default-page-size="5"
-              :total="lifeCycle.total"
-              :page-sizes="[5, 10, 20, 50, 100]"
-              small
-              background
-              @size-change="onLifeCycleSizeChange"
-              @current-change="onLifeCycleCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+          <div class="my-flex my-flex-end" style="margin-top: 20px">
+            <el-pagination v-model:currentPage="lifeCycle.pageInput.currentPage"
+              v-model:page-size="lifeCycle.pageInput.pageSize" :default-page-size="5" :total="lifeCycle.total"
+              :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onLifeCycleSizeChange"
+              @current-change="onLifeCycleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
     </el-row>
-    <el-dialog
-      v-model="bigImgDto.isShow"
-      :close-on-click-modal="true"
-      :show-close="false"
-      width="80%"
-    >
-      <img
-        :src="bigImgDto.imgUrl"
-        class="fullscreen-image"
-        alt="放大的图片"/>
+    <el-dialog v-model="bigImgDto.isShow" :close-on-click-modal="true" :show-close="false" width="80%">
+      <img :src="bigImgDto.imgUrl" class="fullscreen-image" alt="放大的图片" />
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Picture as IconPicture } from '@element-plus/icons-vue'
-import {onMounted, reactive} from "vue";
-import {OilEngineDetailsApi} from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
+import { onMounted, reactive, ref } from "vue";
+import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
 import router from "/@/router";
-import { FuelDispenserEntity,PageInputAlarmHistoryDto,AlarmHistoryDto,PageInputLifeCycleDto,LifeCycleDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
+import { FuelDispenserEntity, PageInputAlarmHistoryDto, AlarmHistoryDto, PageInputLifeCycleDto, LifeCycleDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
 
 /******************************数据对象***************************************/
 
@@ -350,30 +236,30 @@ const baseUrl = import.meta.env.VITE_API_URL
  * 显示大图数据对象
  */
 const bigImgDto = reactive({
-  isShow:false,
-  imgUrl:''
+  isShow: false,
+  imgUrl: ''
 })
 
 /**
  * 油机详情 - 基本信息 - 数据对象
  */
 const basicInfo = reactive({
-  loading:false,
-  info:{} as FuelDispenserEntity,
-  imgUrl:'upload/2023/09/15/65048ee6-9b3f-2234-0097-734b351ca09d.png'
+  loading: false,
+  info: {} as FuelDispenserEntity,
+  imgUrl: 'upload/2023/09/15/65048ee6-9b3f-2234-0097-734b351ca09d.png'
 })
 
 /**
  * 油机详情 - 报警历史 - 数据对象
  */
 const alarmHistory = reactive({
-  loading:false,
-  list:[] as Array<AlarmHistoryDto>,
-  pageInput:{
+  loading: false,
+  list: [] as Array<AlarmHistoryDto>,
+  pageInput: {
     currentPage: 1,
     pageSize: 5
   } as PageInputAlarmHistoryDto,
-  total:0,
+  total: 0,
   Filter: {
     /**油机id */
     fuelId: 0
@@ -384,13 +270,13 @@ const alarmHistory = reactive({
  * 油机详情 - 生命周期 - 数据对象
  */
 const lifeCycle = reactive({
-  loading:false,
-  list:[] as Array<LifeCycleDto>,
-  pageInput:{
+  loading: false,
+  list: [] as Array<LifeCycleDto>,
+  pageInput: {
     currentPage: 1,
     pageSize: 5
   } as PageInputLifeCycleDto,
-  total:0,
+  total: 0,
   Filter: {
     /**油机id */
     fuelId: 0
@@ -407,9 +293,9 @@ const lifeCycle = reactive({
  * @param val
  */
 const showBigPic = (val) => {
-  if(val){
+  if (val) {
     bigImgDto.imgUrl = val
-  }else {
+  } else {
     bigImgDto.imgUrl = ''
   }
   bigImgDto.isShow = true
@@ -420,13 +306,17 @@ const showBigPic = (val) => {
  */
 const toPage = () => {
   const id = router.currentRoute.value.params.id
-  router.push({path:`/statement/${id}/more`})
+  router.push({
+    path: `/statement/${id}/more`, query: {
+      data: flag.value
+    }
+  })
 }
 /**
  * 格式化日期
  */
- const formatDate=(val)=>{
-  const date=new Date(val)
+const formatDate = (val) => {
+  const date = new Date(val)
   const year: number = date.getFullYear();
   const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
   const day: string = date.getDate().toString().padStart(2, '0');
@@ -457,7 +347,7 @@ const onAlarmHistoryCurrentChange = (val) => {
  * 油机详情 - 生命周期 - 页条变化
  * @param val
  */
-const onLifeCycleSizeChange = (val) =>{
+const onLifeCycleSizeChange = (val) => {
   lifeCycle.pageInput.pageSize = val
   getLifeCycle()
 }
@@ -479,38 +369,46 @@ const onLifeCycleCurrentChange = (val) => {
 /**
  * 获取 油机详情 - 基本信息 - 数据对对象
  */
+const flag = ref('')
 const getBasicInfo = async () => {
   basicInfo.loading = true
-  basicInfo.imgUrl=baseUrl + '/'+basicInfo.imgUrl
-  const fuelId=router.currentRoute.value.params.id
-  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({Fuelid:fuelId})
+  basicInfo.imgUrl = baseUrl + '/' + basicInfo.imgUrl
+  const fuelId = router.currentRoute.value.params.id
+  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
   basicInfo.info = data
-  if(basicInfo.info.createdTime!==null){
-    basicInfo.info.createdTime=formatDate(basicInfo.info.createdTime)
+
+  console.log(999)
+
+  console.log(data.gasStation)
+  flag.value = data.gasStation
+  console.log(flag)
+
+  if (basicInfo.info.createdTime !== null) {
+    basicInfo.info.createdTime = formatDate(basicInfo.info.createdTime)
   }
-  if(basicInfo.info.installationDate!==null){
-    basicInfo.info.installationDate=formatDate(basicInfo.info.installationDate)
+  if (basicInfo.info.installationDate !== null) {
+    basicInfo.info.installationDate = formatDate(basicInfo.info.installationDate)
   }
-  if(basicInfo.info.startupDate!==null){
-    basicInfo.info.startupDate=formatDate(basicInfo.info.startupDate)
+  if (basicInfo.info.startupDate !== null) {
+    basicInfo.info.startupDate = formatDate(basicInfo.info.startupDate)
   }
-  if(basicInfo.info.modifiedTime!==null){
-    basicInfo.info.modifiedTime=formatDate(basicInfo.info.modifiedTime)
+  if (basicInfo.info.modifiedTime !== null) {
+    basicInfo.info.modifiedTime = formatDate(basicInfo.info.modifiedTime)
   }
-  if(basicInfo.info.onlineStatus!==null){
-    if(basicInfo.info.onlineStatus==='offline'){
-      basicInfo.info.onlineStatus='离线'
-    }else{
-      basicInfo.info.onlineStatus='在线'
+  if (basicInfo.info.onlineStatus !== null) {
+    if (basicInfo.info.onlineStatus === 'offline') {
+      basicInfo.info.onlineStatus = '离线'
+    } else {
+      basicInfo.info.onlineStatus = '在线'
     }
   }
-  if(basicInfo.info.deviceStatus!==null){
-    if(basicInfo.info.deviceStatus==='enable'){
-      basicInfo.info.deviceStatus='启用'
-    }else if(basicInfo.info.deviceStatus==='factory'){
-      basicInfo.info.deviceStatus='出厂注册'
-    }else{
-      basicInfo.info.deviceStatus='备案'
+  if (basicInfo.info.deviceStatus !== null) {
+    if (basicInfo.info.deviceStatus === 'enable') {
+      basicInfo.info.deviceStatus = '启用'
+    } else if (basicInfo.info.deviceStatus === 'factory') {
+      basicInfo.info.deviceStatus = '出厂注册'
+    } else {
+      basicInfo.info.deviceStatus = '备案'
     }
   }
   basicInfo.loading = false
@@ -521,8 +419,8 @@ const getBasicInfo = async () => {
  */
 const getAlarmHistory = async () => {
   alarmHistory.loading = true
-  alarmHistory.Filter.fuelId=router.currentRoute.value.params.id
-  const {data} = await new OilEngineDetailsApi().getAlarmHistoryDto({...alarmHistory.pageInput,filter:alarmHistory.Filter})
+  alarmHistory.Filter.fuelId = router.currentRoute.value.params.id
+  const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({ ...alarmHistory.pageInput, filter: alarmHistory.Filter })
   alarmHistory.total = data.total
   alarmHistory.list = data.list
   alarmHistory.loading = false
@@ -533,8 +431,8 @@ const getAlarmHistory = async () => {
  */
 const getLifeCycle = async () => {
   lifeCycle.loading = true
-  lifeCycle.Filter.fuelId=router.currentRoute.value.params.id
-  const {data} = await new OilEngineDetailsApi().getLifeCycleDto({...lifeCycle.pageInput,filter:lifeCycle.Filter})
+  lifeCycle.Filter.fuelId = router.currentRoute.value.params.id
+  const { data } = await new OilEngineDetailsApi().getLifeCycleDto({ ...lifeCycle.pageInput, filter: lifeCycle.Filter })
   lifeCycle.total = data.total
   lifeCycle.list = data.list
   lifeCycle.loading = false
@@ -554,46 +452,56 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.oilInfo{
+.oilInfo {
   font-weight: 500;
 
-  .basicInformation{
+  .basicInformation {
     display: flex;
-    display: -webkit-flex; /* Safari */
+    display: -webkit-flex;
+    /* Safari */
     justify-content: space-around;
-    align-items:center;
-    align-content:space-around;
+    align-items: center;
+    align-content: space-around;
     flex-wrap: wrap-reverse;
-    .basicInformation-left{
+
+    .basicInformation-left {
       display: flex;
-      display: -webkit-flex; /* Safari */
+      display: -webkit-flex;
+      /* Safari */
       justify-content: space-around;
       flex-wrap: wrap;
       height: 100%;
       max-width: 65%;
       min-width: 300px;
-      .item{
+
+      .item {
         display: inline-block;
         cursor: pointer;
-        width: 240px;/*设置显示的最大宽度*/
-        height:40px;
-        overflow:hidden;/*超出部分隐藏*/
-        white-space:nowrap;/*强制单行显示*/
+        width: 240px;
+        /*设置显示的最大宽度*/
+        height: 40px;
+        overflow: hidden;
+        /*超出部分隐藏*/
+        white-space: nowrap;
+        /*强制单行显示*/
         text-overflow: ellipsis;
       }
 
     }
-    .basicInformation-right{
+
+    .basicInformation-right {
       width: 50%;
       height: 100%;
       max-width: 300px;
       min-width: 200px;
       padding: 0 10px;
+
       .img {
         width: 220px;
         height: 140px;
         cursor: pointer;
       }
+
       .image-slot {
         display: flex;
         justify-content: center;
@@ -604,6 +512,7 @@ onMounted(() => {
         color: var(--el-text-color-secondary);
         font-size: 30px;
       }
+
       .image-slot .el-icon {
         font-size: 30px;
       }

admin.ui.plus-master/src/views/admin/statement/partsManagement/encScreen/index.vue

@@ -181,5 +181,20 @@ const onCurrentChange = (val: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/partsManagement/encoder/index.vue

@@ -193,5 +193,20 @@ const onCurrentChange = (val: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/statement/partsManagement/monitorCpu/index.vue

@@ -184,4 +184,21 @@ const onCurrentChange = (val: number) => {
 
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
+</style>

admin.ui.plus-master/src/views/admin/statement/partsManagement/oilGun/index.vue

@@ -206,5 +206,20 @@ watch(() => Data.time1, (newVal) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+/* 输入框标签固定四个字符宽度 */
+::v-deep .el-form-item__label {
+  // 字体大小14，4个字符，12px右间距
+  width: 14*4px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
 </style>

admin.ui.plus-master/src/views/admin/visualization/digitalMap/index.vue

@@ -12,8 +12,7 @@
             <el-text class="to-Ctext">座</el-text>
           </div>
           <div class="to-content">
-            <el-table :data="tableData[0]" style=""
-              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+            <el-table :data="tableData[0]" style="" :cell-style="cellStyle" :show-header="false"
               :row-style="{ height: '10px' }">
               <el-table-column prop="a" width="90" />
               <el-table-column prop="b" width="50" />
@@ -31,10 +30,9 @@
             <el-text class="to-Ctext">台</el-text>
           </div>
           <div class="to-content">
-            <el-table :data="tableData[1]" style=""
-              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+            <el-table :data="tableData[1]" style="" :cell-style="cellStyle" :show-header="false"
               :row-style="{ height: '10px' }">
-              <el-table-column prop="a" width="90" />
+              <el-table-column prop="a" width="90" :cell-style="{ color: 'red' }" />
               <el-table-column prop="b" width="50" />
               <el-table-column prop="c" width="80" />
             </el-table>
@@ -50,8 +48,7 @@
             <el-text class="to-Ctext">条</el-text>
           </div>
           <div class="to-content">
-            <el-table :data="tableData[2]" style=""
-              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+            <el-table :data="tableData[2]" style="" :cell-style="cellStyle" :show-header="false"
               :row-style="{ height: '10px' }">
               <el-table-column prop="a" width="90" />
               <el-table-column prop="b" width="60" />
@@ -128,6 +125,18 @@ const tableData = reactive([[{
 }]
 ])
 
+// 表格样式设置
+const cellStyle = ((data: any) => {
+  if (data.row.a === '校验失败' && data.columnIndex == 0) {
+    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px', 'color': 'green' }
+  } else if (data.row.a === '离线' && data.columnIndex == 0) {
+    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px', 'color': 'red' }
+  }
+  else {
+    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px' }
+  }
+})
+
 const mapData = allCity.sort((a, b) => {
   return b.value - a.value
 })