文件共享看板样式修改-提交

src/views/vent/performance/fileIndex/fileIndex.data.ts

@@ -1,320 +0,0 @@
-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
-import { queryDeviceList } from './performance.api';
-import { defHttp } from '/@/utils/http/axios';
-import { TreeItem } from '/@/components/Tree/index';
-
-//tree
-export const treeData: TreeItem[] = [
-  {
-    title: 'parent 1',
-    key: '0-0',
-    icon: 'home|svg',
-    children: [
-      { title: 'leaf', key: '0-0-0' },
-      {
-        title: 'leaf',
-        key: '0-0-1',
-        children: [
-          { title: 'leaf', key: '0-0-0-0' },
-          { title: 'leaf', key: '0-0-0-1' },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'parent 2',
-    key: '1-1',
-    icon: 'home|svg',
-    children: [
-      { title: 'leaf', key: '1-1-0' },
-      { title: 'leaf', key: '1-1-1' },
-    ],
-  },
-  {
-    title: 'parent 3',
-    key: '2-2',
-    icon: 'home|svg',
-    children: [
-      { title: 'leaf', key: '2-2-0' },
-      { title: 'leaf', key: '2-2-1' },
-    ],
-  },
-];
-
-export const columns: BasicColumn[] = [
-  {
-    title: '设备类型',
-    dataIndex: 'devicekind_dictText',
-    width: 120,
-  },
-  // {
-  //   title: '设备类型code',
-  //   dataIndex: 'devicekind',
-  //   width: 120,
-  // },
-  // {
-  //   title: 'plc地址',
-  //   dataIndex: 'plcaddr',
-  //   width: 100,
-  // },
-  // {
-  //   title: 'plc读写位数',
-  //   dataIndex: 'floatnum',
-  //   width: 100,
-  //   // customRender: render.renderAvatar,
-  // },
-  // {
-  //   title: '读写类型',
-  //   dataIndex: 'datakind_dictText',
-  //   width: 80,
-  //   // sorter: true,
-  //   // customRender: ({ text }) => {
-  //   //   return render.renderDict(text, 'sex');
-  //   // },
-  // },
-  {
-    title: '值名称',
-    dataIndex: 'valuename',
-    width: 100,
-  },
-  {
-    title: '值code',
-    dataIndex: 'valuecode',
-    width: 100,
-  },
-  // {
-  //   title: '值类型',
-  //   width: 150,
-  //   dataIndex: 'valuetype_dictText',
-  // },
-  // {
-  //   title: '最小值',
-  //   width: 100,
-  //   dataIndex: 'fmin',
-  // },
-  // {
-  //   title: '最大值',
-  //   dataIndex: 'fmax',
-  //   width: 100,
-  // },
-  // {
-  //   title: '模拟最小值',
-  //   dataIndex: 'testlow',
-  //   width: 100,
-  // },
-  // {
-  //   title: '模拟最大值',
-  //   width: 100,
-  //   dataIndex: 'testup',
-  // },
-  // {
-  //   title: '小数位数',
-  //   width: 100,
-  //   dataIndex: 'floatnum',
-  // },
-  // {
-  //   title: '是否保存',
-  //   dataIndex: 'saveflag_dictText',
-  //   width: 80,
-  // },
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    label: '设备类型',
-    field: 'devicekind',
-    component: 'MTreeSelect',
-    colProps: { span: 6 },
-  },
-
-  {
-    label: '值名称',
-    field: 'valuename',
-    component: 'Input',
-    colProps: { span: 6 },
-  },
-  {
-    label: '值code',
-    field: 'valuecode',
-    component: 'Input',
-    colProps: { span: 6 },
-  },
-];
-
-export const formSchema: FormSchema[] = [
-  {
-    label: '',
-    field: 'id',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '设备分类',
-    field: 'devicekind',
-    component: 'ApiSelect',
-    // componentProps: {
-    //   dictCode: 'devicekind',
-    //   placeholder: '请选择设备分类',
-    // },
-    componentProps: ({ formModel, formActionType }) => {
-      return {
-        // options: provincesOptions,
-        placeholder: '请选择设备分类',
-        api: queryDeviceList,
-        resultField: 'result',
-        // use name as label
-        labelField: 'itemText',
-        // use id as value
-        valueField: 'itemValue',
-        onChange: (e: any) => {
-          formModel.devicetype = '';
-          const { updateSchema } = formActionType;
-          updateSchema({
-            field: 'devicetype',
-            componentProps: {
-              api: (params) => defHttp.get({ url: `/sys/dict/getDictItems/${e + 'kind'}` }, params),
-              resultField: 'result',
-              labelField: 'title',
-              valueField: 'value',
-            },
-          });
-        },
-      };
-    },
-  },
-  {
-    label: '点表类型',
-    field: 'devicetype',
-    component: 'ApiSelect',
-    componentProps: ({ formModel, formActionType }) => {
-      // debugger;
-      return {
-        // options: provincesOptions,
-        componentProps: {},
-        api: (params) => defHttp.get({ url: `/sys/dict/getDictItems/${formModel.devicekind + 'kind'}` }, params),
-        resultField: 'result',
-        labelField: 'title',
-        valueField: 'value',
-      };
-    },
-  },
-  {
-    label: '值名称',
-    field: 'valuename',
-    component: 'Input',
-  },
-  {
-    label: '值code',
-    field: 'valuecode',
-    component: 'Input',
-  },
-  {
-    label: '值类型',
-    field: 'valuetype',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'valuetype',
-      placeholder: '请选择设备类型',
-      stringToNumber: true,
-    },
-  },
-  {
-    label: '指令默认写入值',
-    field: 'value',
-    component: 'Input',
-  },
-  {
-    label: 'plc地址',
-    field: 'plcaddr',
-    component: 'Input',
-  },
-  {
-    label: '数据类型',
-    field: 'datakind',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'datakind',
-      placeholder: '请选择数据类型',
-      stringToNumber: true,
-    },
-  },
-  {
-    label: '字节数',
-    field: 'len',
-    component: 'Input',
-  },
-  {
-    label: '最小值',
-    field: 'fmin',
-    component: 'InputNumber',
-  },
-  {
-    label: '最大值',
-    field: 'fmax',
-    component: 'InputNumber',
-  },
-  {
-    label: '模拟最小值',
-    field: 'testlow',
-    component: 'InputNumber',
-  },
-  {
-    label: '模拟最大值',
-    field: 'testup',
-    component: 'InputNumber',
-  },
-  {
-    label: '开始指令',
-    field: 'startcommand ',
-    component: 'InputTextArea',
-  },
-  {
-    label: '结束指令',
-    field: 'endcommand',
-    component: 'InputTextArea',
-  },
-  {
-    label: '控制指令设置模拟数据',
-    field: 'setTestdata',
-    component: 'InputTextArea',
-  },
-  {
-    label: '是否保存',
-    field: 'saveflag',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'booltype',
-      placeholder: '是否保存',
-    },
-  },
-  {
-    label: '是否报警',
-    field: 'bwarning',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'booltype',
-      placeholder: '是否报警',
-    },
-  },
-  {
-    label: '是否计算平均值',
-    field: 'avgflag',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'booltype',
-      placeholder: '是否计算平均值',
-    },
-  },
-  {
-    label: '小数位数',
-    field: 'floatnum',
-    component: 'InputNumber',
-  },
-
-  {
-    label: '备注',
-    field: 'strremark',
-    component: 'InputTextArea',
-  },
-];

src/views/vent/performance/fileIndex/index.vue

@@ -1,19 +1,14 @@
 <template>
   <div class="performance">
     <div class="main-container">
-      <div
-        class="card"
-        v-for="(item, index) in titleList"
-        :class="index === active ? 'actived' : 'isActived'"
-        :key="index"
-        @click="getDetails(index)"
-      >
+      <div class="card" v-for="(item, index) in titleList" :class="index === active ? 'actived' : 'isActived'"
+        :key="index" @click="getDetails(index)">
         <div class="card-t">{{ item.sysOrgName }}</div>
         <div class="card-b">
-          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind)">
-            <div class="img" :class="ind === toggleItem ? 'isPic' : 'pic'"> <img :src="items.src" alt="" /> </div>
+          <div class="box" v-for="(items, ind) in item.tab" :key="ind" >
+            <div class="img" > <img :src="items.src" alt="" /> </div>
             <div class="text">{{ items.text }}</div>
-            <div class="num" :class="ind === toggleItem ? 'isNum' : 'nums'">{{ items.num }}</div>
+            <div class="num" >{{ items.num }}</div>
           </div>
         </div>
       </div>
@@ -21,159 +16,171 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, onMounted } from 'vue';
-  import { useRouter } from 'vue-router';
-  import leftImg from '../../../../assets/images/files/homes/file.svg';
-  import rightImg from '../../../../assets/images/files/homes/sp.svg';
-  import { list } from './fileIndex.api';
-  let router = useRouter(); //路由
-  let active = ref(); //当前选中项
-  let toggleItem = ref(); //当前选中子项
-  let titleList = reactive<any[]>([]);
-  //获取首页数据
-  let getPageList = async () => {
-    let data = await list();
-    console.log(data, '首页数据');
-    if (data.length !== 0) {
-      let datas = data.map((el) => {
-        return {
-          sysOrgName: el.sysOrgName,
-          tab: [
-            { src: leftImg, text: '文档总数', num: el.tolalNum },
-            { src: rightImg, text: '待审批数', num: el.approveNum },
-          ],
-        };
-      });
-      titleList.push(...datas);
-      console.log(titleList, '123456');
-    }
-  };
+import { reactive, ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import leftImg from '../../../../assets/images/files/homes/file.svg';
+import rightImg from '../../../../assets/images/files/homes/sp.svg';
+import { list } from './fileIndex.api';
+let router = useRouter(); //路由
+let active = ref(); //当前选中项
+// let toggleItem = ref(); //当前选中子项
+let titleList = reactive<any[]>([]);
+//获取首页数据
+let getPageList = async () => {
+  let data = await list();
+  console.log(data, '首页数据');
+  if (data.length !== 0) {
+    let datas = data.map((el) => {
+      return {
+        sysOrgName: el.sysOrgName,
+        tab: [
+          { src: leftImg, text: '文档总数', num: el.tolalNum },
+          { src: rightImg, text: '待审批数', num: el.approveNum },
+        ],
+      };
+    });
+    titleList.push(...datas);
+    console.log(titleList, '123456');
+  }
+};
 
-  //切换选项
-  let getDetails = (index) => {
-    console.log('详情跳转');
-    active.value = index;
-    router.push('/fileManager/fileDetail');
-  };
-  //切换左右选项
-  let getToggle = (ind) => {
-    console.log(ind);
-    toggleItem.value = ind;
-  };
-  onMounted(() => {
-    getPageList();
-  });
+//切换选项
+let getDetails = (index) => {
+  console.log('详情跳转');
+  active.value = index;
+  router.push('/fileManager/fileDetail');
+};
+// //切换左右选项
+// let getToggle = (ind) => {
+//   console.log(ind);
+//   toggleItem.value = ind;
+// };
+onMounted(() => {
+  getPageList();
+});
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: 'douyuFont';
-    src: url(../../../../assets/images/files/douyuFont.otf);
-  }
-  .performance {
+@font-face {
+  font-family: 'douyuFont';
+  src: url(../../../../assets/images/files/douyuFont.otf);
+}
+
+.performance {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  position: relative;
+  box-sizing: border-box;
+  background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
+
+  .main-container {
     width: 100%;
-    height: 100%;
-    padding: 15px;
-    position: relative;
-    box-sizing: border-box;
-    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
-    .main-container {
-      width: 100%;
-      height: calc(100% - 30px);
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      .card {
-        width: 331px;
-        height: 235px;
-        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
-        background-size: 100% 100%;
-        margin: 0px 23px 15px 23px;
-        cursor: pointer;
-        .card-t {
-          height: 50px;
+    height: calc(100% - 30px);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .card {
+      width: 331px;
+      height: 235px;
+      background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+      background-size: 100% 100%;
+      margin: 0px 23px 15px 23px;
+      cursor: pointer;
+
+      .card-t {
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: '思源黑体', 'Microsoft Yahei';
+        font-size: 20px;
+        color: #fff;
+      }
+
+      .card-b {
+        height: calc(100% - 65px);
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+
+        .box {
           display: flex;
-          justify-content: center;
+          flex: 1;
+          flex-direction: column;
+          justify-content: flex-start;
           align-items: center;
-          font-family: '思源黑体', 'Microsoft Yahei';
-          font-size: 20px;
-          color: #fff;
-        }
-        .card-b {
-          height: calc(100% - 65px);
-          margin-top: 15px;
-          display: flex;
-          flex-direction: row;
-          .box {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-            .img {
-              position: relative;
-              width: 72px;
-              height: 78px;
-              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
-              img {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -75%);
-              }
-            }
-            .pic {
-              width: 72px;
-              height: 78px;
-              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
-              background-size: 100% 100%;
-            }
-            .isPic {
-              width: 72px;
-              height: 78px;
-              background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
-              background-size: 100% 100%;
-            }
-            .text {
-              margin: 5px 0px;
-              font-family: '思源黑体', 'Microsoft Yahei';
-              color: #fff;
-              font-size: 14px;
-            }
-            .num {
-              width: 120px;
-              height: 30px;
-              font-family: 'douyuFont';
-              color: #fff;
-              font-size: 20px;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
-            }
-            .nums {
-              width: 120px;
-              height: 30px;
-              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
+
+          &:first-child .img {
+            position: relative;
+            width: 72px;
+            height: 78px;
+            background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
+            img {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -75%);
             }
-            .isNum {
-              width: 120px;
-              height: 30px;
-              background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
+          }
+          &:last-child .img {
+            position: relative;
+            width: 72px;
+            height: 78px;
+            background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
+            img {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -75%);
             }
           }
+
+      
+          .text {
+            margin: 5px 0px;
+            font-family: '思源黑体', 'Microsoft Yahei';
+            color: #fff;
+            font-size: 14px;
+          }
+
+          &:first-child .num {
+            width: 120px;
+            height: 30px;
+            font-family: 'douyuFont';
+            color: #fff;
+            font-size: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
+          }
+          &:last-child .num {
+            width: 120px;
+            height: 30px;
+            font-family: 'douyuFont';
+            color: #fff;
+            font-size: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
+          }
         }
       }
-      .actived {
-        background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
-        background-size: 100% 100%;
-      }
-      .isActived {
-        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
-        background-size: 100% 100%;
-      }
+    }
+
+    .actived {
+      background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .isActived {
+      background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+      background-size: 100% 100%;
     }
   }
-</style>
+}</style>