修改样式

src/page/STB/appversion/components/addDialog.vue

@@ -3,22 +3,20 @@
     class="custom-dialog"
     custom-class="party-dialog"
     title="上传新版安装包"
-    width="540px"
+    width="468px"
     :visible.sync="formVisible"
     :before-close="close"
   >
     <div class="dialog-content">
       <el-form
         :model="formItem"
-        class="party-form"
+        class="party-form version-add"
         ref="formItem"
-        label-width="125px"
-        label-position="right"
+        label-position="top"
         :rules="rules"
       >
         <el-form-item label="版本号：" prop="appVersion">
           <el-input
-            size="small"
             v-model="formItem.appVersion"
             clearable
             placeholder="请输入版本号"
@@ -27,14 +25,12 @@
         <el-form-item label="版本信息：" prop="versionInfo">
           <el-input
             type="textarea"
-            size="small"
             v-model="formItem.versionInfo"
           ></el-input>
         </el-form-item>
         <el-form-item label="更新内容：" prop="updateContent">
           <el-input
             type="textarea"
-            size="small"
             v-model="formItem.updateContent"
           ></el-input>
         </el-form-item>
@@ -55,10 +51,9 @@
       </el-form>
     </div>
     <div slot="footer" class="dialog-footer btn-group">
-      <el-button size="mini" type="primary" @click="submitForm('formItem')"
-        >确定</el-button
-      >
       <el-button size="mini" @click="close">取 消</el-button>
+      <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
+      
     </div>
   </el-dialog>
 </template>
@@ -87,10 +82,12 @@ export default {
   methods: {
     backFn() {
       this.formVisible = true
+      this.formItem = {}
+      this.fileList = []
       this.$nextTick(() => {
         this.$refs.formItem.clearValidate()
       });
-      this.formItem = {}
+      
     },
     // 关闭
     close() {
@@ -164,12 +161,16 @@ export default {
 
 <style lang="less">
 @import "~@/style/dialog.less";
-.text-center {
-  text-align: center;
-}
-.custom-dialog {
-  .party-form .el-input {
-    width: 100%;
+.version-add {
+  .el-upload-dragger {
+    height: 120px;
+    .el-icon-upload {
+      margin-top: 10px;
+    }
+  }
+  .text-center {
+    text-align: center;
   }
 }
+
 </style>
\ No newline at end of file

src/page/STB/appversion/components/detailDialog.vue

@@ -2,54 +2,31 @@
   <el-dialog
     custom-class="party-dialog"
     title="详情"
-    width="540px"
+    width="468px"
     :visible.sync="formVisible"
     :before-close="close"
   >
     <div class="dialog-content">
       <el-form
         :model="formItem"
-        class="party-form"
+        class="party-form version-detail"
         ref="formItem"
-        label-width="180px"
-        label-position="right"
+        label-position="top"
       >
         <el-form-item label="上传时间：" prop="createTime">
-          <el-input
-            size="small"
-            v-model="formItem.createTime"
-            disabled
-          ></el-input>
+          <span class="input-item">{{formItem.createTime}}</span>
         </el-form-item>
         <el-form-item label="操作者：" prop="userName">
-          <el-input
-            size="small"
-            v-model="formItem.userName"
-            disabled
-          ></el-input>
+          <span class="input-item">{{formItem.userName}}</span>
         </el-form-item>
         <el-form-item label="是否为当前使用版本：">
-          <el-input
-            size="small"
-            :value="formItem.isCurrent ? '是' : '否'"
-            disabled
-          ></el-input>
+          <span class="input-item">{{formItem.isCurrent ? '是' : '否'}}</span>
         </el-form-item>
         <el-form-item label="版本信息：" prop="versionInfo">
-          <el-input
-            type="textarea"
-            size="small"
-            v-model="formItem.versionInfo"
-            disabled
-          ></el-input>
+          <span class="input-item">{{formItem.versionInfo}}</span>
         </el-form-item>
         <el-form-item label="更新内容：" prop="updateLog">
-          <el-input
-            type="textarea"
-            size="small"
-            v-model="formItem.updateLog"
-            disabled
-          ></el-input>
+          <span class="input-item">{{formItem.updateLog}}</span>
         </el-form-item>
       </el-form>
     </div>
@@ -82,4 +59,11 @@ export default {
 
 <style lang="less">
 @import "~@/style/dialog.less";
+.version-detail {
+  .input-item {
+    font-size: 16px;
+    color:#333;
+  }
+}
+
 </style>
\ No newline at end of file

src/page/STB/appversion/index.vue

@@ -41,19 +41,21 @@
             type="index"
             width="120"
             label="序号"
+            align="center"
           ></el-table-column>
           <el-table-column
             label="app版本号"
             prop="appVersion"
+            align="center"
           ></el-table-column>
-          <el-table-column label="是否为最新版本">
+          <el-table-column align="center" label="是否为最新版本">
             <template slot-scope="scope">
               <span>{{ scope.row.isCurrent ? "是" : "否" }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="上传时间" prop="createTime"></el-table-column>
-          <el-table-column label="操作者" prop="userName"></el-table-column>
-          <el-table-column label="操作" header-align="center" align="center">
+          <el-table-column align="center" label="上传时间" prop="createTime"></el-table-column>
+          <el-table-column align="center" label="操作者" prop="userName"></el-table-column>
+          <el-table-column align="center" label="操作" header-align="center">
             <template slot-scope="scope" width="220">
               <div class="table-btn-group">
                 <el-tooltip content="详情" placement="top">

src/page/STB/base/components/dialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     custom-class="party-dialog"
     :title="title"
-    width="540px"
+    width="468px"
     :visible.sync="formVisible"
     :before-close="close"
   >
@@ -12,12 +12,11 @@
         class="party-form"
         ref="formItem"
         label-width="125px"
-        label-position="right"
+        label-position="top"
         :rules="rules"
       >
         <el-form-item label="所属单位：" prop="orgId">
           <el-select
-            size="small"
             v-model="formItem.orgId"
             clearable
             placeholder="请选择所属单位"
@@ -33,7 +32,6 @@
         </el-form-item>
         <el-form-item label="机构地理位置：" prop="areaName">
           <el-input
-            size="small"
             v-model="formItem.areaName"
             disabled
           ></el-input>
@@ -41,8 +39,8 @@
       </el-form>
     </div>
     <div slot="footer" class="dialog-footer btn-group">
-      <el-button type="primary" @click="submitForm('formItem')">确定</el-button>
       <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="submitForm('formItem')">确定</el-button>
     </div>
   </el-dialog>
 </template>

src/page/STB/base/index.vue

@@ -38,22 +38,7 @@
       <div class="btn-group">
         <el-button type="primary" @click="addBox">新建机顶盒账号</el-button>
       </div>
-      <div class="party-table">
-        <el-table
-          border
-          style="width: 100%; height: 100%"
-          height="100%"
-          :data="tableData"
-        >
-          <el-table-column
-            type="index"
-            width="120"
-            label="序号"
-          ></el-table-column>
-          <el-table-column label="MAC地址" prop="mac"></el-table-column>
-          <el-table-column label="所属单位" prop="organName"></el-table-column>
-        </el-table>
-      </div>
+      <party-table :feildList="feildList" :list="tableData"/>
       <div class="partyt-pagination" style="margin: 0 20px">
         <el-pagination
           background
@@ -70,11 +55,12 @@
 </template>
 <script>
 import { partyPagination } from "@/components/index";
+import partyTable from "@/components/table.vue";
 import customDialog from "./components/dialog.vue";
 import { getAreas } from "@/config/area.js";
 import { getOrgListWithOutPage } from "@/config/organ.js";
 export default {
-  components: { partyPagination, customDialog },
+  components: { partyPagination, customDialog,partyTable },
   data() {
     return {
       page: { 
@@ -82,6 +68,10 @@ export default {
         pageSize: 10, 
         total: 0 
       },
+      feildList: [
+        { prop: "mac", label: "MAC地址" },
+        { prop: "organName", label: "所属单位" }
+      ],
       orgOptions: [], // 单位信息
       areaOptions: [], //区域信息
       defaultProps: {

src/page/STB/interactive/index.vue

@@ -35,12 +35,10 @@
         <div class="title">“北京市政府”展板互动信息汇总</div>
         <div class="page-tip">
           <span class="page-tip-title">页面说明:</span>
-          <span class="page-tips"
-            >可查看某个组织机构的互动信息</span
-          >
+          <span class="page-tips">可查看某个组织机构的互动信息</span>
         </div>
       </div>
-      <div class="scrollBox">
+      <div class="scrollBox"  v-show="tableData.length">
         <div
           class="content-item"
           v-for="(item, index) in tableData"
@@ -48,16 +46,17 @@
         >
           <h5 class="title">{{ item.name }}</h5>
           <p>{{ item.content }}</p>
-          <div class="img-box">
+          <div class="img-box" v-if="item.images.length">
             <img v-for="(j, idx) in item.images" :src="j" :key="idx" alt="" />
           </div>
+          <div class="img-box" v-if="!item.images.length">暂无数据</div>
           <div class="author">
             <div>{{ item.username }}</div>
             <div>{{ item.createTime }}</div>
           </div>
         </div>
       </div>
-      <div class="partyt-pagination" style="margin: 0 20px">
+      <div class="partyt-pagination" style="margin: 0 20px"  v-show="tableData.length">
         <el-pagination
           background
           @current-change="handleCurrentChange"
@@ -75,10 +74,10 @@ export default {
   data() {
     return {
       filterText: "",
-      page: { 
-        currentPage: 1, 
-        pageSize: 10, 
-        total: 0 
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
       },
       treeData: [],
       defaultProps: {
@@ -96,19 +95,19 @@ export default {
   },
   mounted() {
     // 获取全部组织机构数据
-    this.getOrgData()
-    this.onSearch()
+    this.getOrgData();
+    // this.onSearch()
   },
   methods: {
     // 查询
     onSearch() {
-      this.page.currentPage = 1
-      this.getTableData()
+      this.page.currentPage = 1;
+      this.getTableData();
     },
     // 获得数据接口
     getTableData() {
-      let vm = this
-      vm.tableData = []
+      let vm = this;
+      vm.tableData = [];
       let param = {
         _index: this.page.currentPage,
         _size: this.page.pageSize,
@@ -124,29 +123,31 @@ export default {
       )
         .then((res) => {
           if (res.data.resultCode === "200") {
-            let data = res.data.data
-            vm.page.total = data.total
-            vm.tableData = data.records
+            let data = res.data.data;
+            vm.page.total = data.total;
+            vm.tableData = data.records;
+            if(!vm.tableData.length){
+              this.$message('暂无数据')
+              return false
+            }
             vm.tableData.forEach((item) => {
-              item.images = item.images.split(",")
+              item.images = item.images ? item.images.split(",") : [];
               item.images.forEach((result, index) => {
                 if (/\.(MP4|mp4)/.test(result)) {
-                  item.images[index] = require("@/assets/video-icon.png")
+                  item.images[index] = require("@/assets/video-icon.png");
                 } else if (/\.(MP3|mp3)/.test(result)) {
-                  item.images[index] = require("@/assets/audio-icon.png")
-                } else {
-                  item.images[index] = require("@/assets/default-img.jpeg")
+                  item.images[index] = require("@/assets/audio-icon.png");
                 }
-              })
-            })
+              });
+            });
 
-            vm.tableData = [...vm.tableData]
+            vm.tableData = [...vm.tableData];
           } else {
-            this.$message.error(res.data.message)
+            this.$message.error(res.data.message);
           }
         })
         .catch(function (err) {
-          console.log(err)
+          console.log(err);
         });
     },
     // 获取组织机构数据
@@ -158,13 +159,13 @@ export default {
       }).then(
         (res) => {
           if (res.data.resultCode === "200") {
-            this.treeData = res.data.data
+            this.treeData = res.data.data;
           } else {
-            this.$message.error(res.data.message)
+            this.$message.error(res.data.message);
           }
         },
         (error) => {
-          console.log(error)
+          console.log(error);
         }
       );
     },
@@ -176,12 +177,12 @@ export default {
     // 点击节点事件
     handleNodeClick(data) {
       this.selectAreaId = data.id;
-      this.onSearch()
+      this.onSearch();
     },
     // 分页
     handleCurrentChange(val) {
-      this.page.currentPage = val
-      this.getTableData()
+      this.page.currentPage = val;
+      this.getTableData();
     },
   },
 };

src/page/STB/operation/index.vue

@@ -56,14 +56,13 @@
             type="index"
             width="120"
             label="序号"
+            align="center"
           ></el-table-column>
-          <el-table-column label="mac地址" prop="mac"></el-table-column>
-          <el-table-column label="所属单位" prop="organName"></el-table-column>
-          <el-table-column label="机顶盒状态" prop="status">
+          <el-table-column align="center" label="mac地址" prop="mac"></el-table-column>
+          <el-table-column align="center" label="所属单位" prop="organName"></el-table-column>
+          <el-table-column align="center" label="机顶盒状态" prop="status">
             <template slot-scope="scope">
-              <span v-if="scope.row.status === 1">待激活</span>
-              <span v-if="scope.row.status === 2">已激活</span>
-              <span v-if="scope.row.status === 3">故障</span>
+              <span>{{statusOptions[scope.row.status-1].label}}</span>
             </template>
           </el-table-column>
         </el-table>