Browse Source

'table宽度可拖拽'

蒋珅 1 year ago
parent
commit
cbbf8f0b38
4 changed files with 47 additions and 58 deletions
  1. 2 1
      README.md
  2. 1 1
      src/components/Tags.vue
  3. 24 40
      src/pages/buildTable/create/index.vue
  4. 20 16
      src/pages/search/create/index.vue

+ 2 - 1
README.md

@@ -1,4 +1,5 @@
 # node环境要求 18+
-# 启动 npm run dev
+ 
+# 启动  npm install     npm run dev
 # 打包 npm run build
 # api地址配置位于 src/api/config.js

+ 1 - 1
src/components/Tags.vue

@@ -11,7 +11,7 @@
 					item.title
 				}}</router-link>
 				<span class="tags-li-icon" @click="closeTags(index)">
-					<i class="el-icon-close"></i>
+					<i class="el-icon-close">x</i>
 				</span>
 			</li>
 		</ul>

+ 24 - 40
src/pages/buildTable/create/index.vue

@@ -21,7 +21,7 @@ import { exportMethod } from "@/api/utils.js";
 /**配置参数 */
 const treeHeight = ref(window.innerHeight - 260 + "px"); //tree高度
 const excelHeight = ref(window.innerHeight - 260 + "px"); //excel高度
-const tableHeight = ref(window.innerHeight - 260 + "px");
+const tableHeight = ref(window.innerHeight - 260 + "px"); //table高度
 
 /**tree 开始 */
 const treeData = ref([]);
@@ -68,7 +68,6 @@ const funGetTree = async () => {
   ];
 
   let resultDatabaesArray = [];
-
   databaseNameArray.forEach((pEle) => {
     pEle.forEach((cEle) => {
       const someRes = blackList.some((someEle) => {
@@ -133,7 +132,6 @@ const funCurrentChange = async ({ current, currentNode }) => {
     "myData",
     JSON.stringify({ nxxy: databaseName, nxxy1: tableName })
   );
-
   //拿取表格数据
   const res = await request.post(
     "/rest/sql",
@@ -153,6 +151,7 @@ const funCurrentChange = async ({ current, currentNode }) => {
     8: "rate",
     9: "remark",
   };
+
   res.data.forEach((ele) => {
     let dateItem = {};
     for (let key in ele) {
@@ -177,16 +176,14 @@ const funCurrentChange = async ({ current, currentNode }) => {
       ele?.[0] && nbdata.push(ele[0]);
     });
     // console.log(55555,nbdata);
-
     stationList.value = nbdata;
 
-    // console.log(7777777777, stationList.value);
+    
     if (stationList.value.length) {
       queryForm.station = stationList.value[0];
     }
   }
 };
-
 const queryForm = reactive({
   station: "",
   tbname: "",
@@ -197,7 +194,7 @@ const queryForm = reactive({
 const stationList = ref([]);
 
 const funStationChange = (val) => {
-  console.log(111111111111, val);
+  console.log('221', val);
   queryForm.station = val;
 };
 
@@ -225,8 +222,7 @@ const nbsubmit = async () => {
       } limit ${pagenumber.value - 1}, ${pagenb.value}
    `
     );
-
-    console.log(666666666666, res);
+    console.log('223', res);
     let newdata = [];
     const map = {
       0: "point",
@@ -248,13 +244,11 @@ const nbsubmit = async () => {
       // dateItem.databaseName = databaseName;
       // dateItem.tableName = tableName;
       newdata.push(dateItem);
-      console.log("nbnbnb", newdata);
+      console.log("224", newdata);
     });
-    console.log(999999, newdata);
     tableData.value = newdata;
   }
 };
-
 // 下载建点
 // const jianbao = async (urlKey) => {
 //   const requestUrl = config[urlKey];
@@ -285,7 +279,7 @@ const exportDepReceRank = () => {
 let fileUplod = ref(null);
 function changeUpload(UploadFile, uploadFiles) {
   fileUplod.value = UploadFile.raw;
-          console.log("996", fileUplod.value);
+          console.log("228", fileUplod.value);
 
 }
 
@@ -302,7 +296,7 @@ const fslist = async (urlKey) => {
   console.log(formData);
   const requestUrl = config[urlKey];
   const res = await request.post(`${requestUrl}/taos/uploadexcel`, formData);
-  console.log("nbnbnbnbn", res);
+  console.log("227", res);
 };
 
 // 路由传递数据
@@ -319,7 +313,6 @@ const dbclick = (a) => {
     },
   });
 };
-
 /**table 开始 */
 const tableName = ref("");
 const tableLoading = ref(false);
@@ -337,7 +330,6 @@ const pagenb = ref(100); //当前的条数
 let myData = JSON.parse(sessionStorage.getItem("myData"));
 
 // console.log("hahhah", pagenumber.value);
-
 const left1 = async () => {
   pagenumber.value -= 1;
   let nbfist = (pagenumber.value - 1) * 100;
@@ -445,15 +437,13 @@ const queren = () => {
 //   editIndex.value = index;
 //   tableData.value.splice(editIndex.value, 1);
 // };
-
 //  选中
 let selectedRows = reactive([]);
 const handleSelectionChange = (selection) => {
-  console.log("991", selection);
+  console.log("229", selection);
   selectedRows = selection;
   // console.log("992", selectedRows);
 };
-
 // 选中删除
 const bdhandleDelete = () => {
   ElMessageBox.confirm("确认要删除吗?", "Warning", {
@@ -546,8 +536,8 @@ onActivated(() => {
         :before-upload="beforeUpload"
         :auto-upload="false"
       >
-        <template #trigger>
-          <el-button type="primary">选择文件</el-button>
+        <template #trigger >
+          <el-button type="primary" class="mt-2.5" >选择文件</el-button>
         </template>
       </el-upload>
       <!-- 提交文件所上传的文件 -->
@@ -556,8 +546,7 @@ onActivated(() => {
       </el-form-item>
       <el-form-item class="!mb-0 ml-5">
         <el-button @click="exportDepReceRank" type="primary"
-          >下载建点、修改点模板</el-button
-        >
+          >下载建点、修改点模板</el-button>
       </el-form-item>
     </div>
 
@@ -575,7 +564,6 @@ onActivated(() => {
           >
           </tree-cop>
         </el-col>
-
         <el-col :span="19">
           <div>
             <el-scrollbar max-height="650px">
@@ -585,6 +573,7 @@ onActivated(() => {
                 @cell-dblclick="dbclick"
                 @row-contextmenu="handleContextMenu"
                 @selection-change="handleSelectionChange"
+                :border ="true"
               >
                 <el-table-column
                   type="selection"
@@ -594,16 +583,16 @@ onActivated(() => {
                   prop="point"
                   label="测点"
                   align="center"
-                  width="200"
+                  width="270"
+                   resizable
                 />
-
                 <el-table-column
                   prop="description"
                   label="描述"
                   align="center"
                   width="200"
+                   resizable
                 />
-
                 <el-table-column
                   prop="ts"
                   label="时间"
@@ -611,23 +600,25 @@ onActivated(() => {
                   width="200"
                 />
 
-                <el-table-column prop="val" label="值" align="center" />
-                <el-table-column prop="station" label="场站" align="center" />
-                <el-table-column prop="category" label="类别" align="center" />
+                <el-table-column prop="val" label="值" align="center"  resizable/>
+                <el-table-column prop="station" label="场站" align="center"  resizable/>
+                <el-table-column prop="category" label="类别" align="center"  resizable/>
                 <el-table-column
                   prop="equipment"
                   label="设备id"
                   align="center"
+                   resizable
                 />
                 <el-table-column
                   prop="uniformcode"
                   label="统一识别码"
                   align="center"
+                   resizable
                 />
-                <el-table-column prop="rate" label="倍率" align="center" />
-                <el-table-column prop="remark" label="备注" align="center" />
+                <el-table-column prop="rate" label="倍率" align="center"  resizable/>
+                <el-table-column prop="remark" label="备注" align="center"  resizable/>
 
-                <el-table-column label="操作" width="200">
+                <el-table-column label="操作" >
                   <template #default="scope">
                     <el-button
                       type="primary"
@@ -635,13 +626,6 @@ onActivated(() => {
                       circle
                       @click="handleEdit(scope.$index, scope.row)"
                     />
-
-                    <!-- <el-button
-                      type="danger"
-                      :icon="Delete"
-                      circle
-                      @click="handleDelete(scope.$index, scope.row)"
-                    /> -->
                   </template>
                 </el-table-column>
               </el-table>

+ 20 - 16
src/pages/search/create/index.vue

@@ -56,10 +56,9 @@ const funGetTree = async () => {
   const blackList = [
     "information_schema",
     "performance_schema",
-    "'mydbinfo'",
+    "mydbinfo",
     "log",
   ];
-
   let resultDatabaesArray = [];
 
   databaseNameArray.forEach((pEle) => {
@@ -163,7 +162,7 @@ const funCurrentChange = async ({ current, currentNode }) => {
       "/rest/sql",
       `SELECT DISTINCT station FROM ${databaseName}.${tableName}`
     );
-    console.log(6666666666666666, ros);
+    console.log('661', ros);
     let nbdata = [];
     ros.data.forEach((ele) => {
       ele?.[0] && nbdata.push(ele[0]);
@@ -172,7 +171,7 @@ const funCurrentChange = async ({ current, currentNode }) => {
 
     stationList.value = nbdata;
 
-    console.log(7777777777, stationList.value);
+    console.log('662', stationList.value);
     if (stationList.value.length) {
       queryForm.station = stationList.value[0];
     }
@@ -189,7 +188,7 @@ const queryForm = reactive({
 const stationList = ref([]);
 
 const funStationChange = (val) => {
-  console.log(111111111111, val);
+  console.log('663', val);
   queryForm.station = val;
 };
 let myData = JSON.parse(sessionStorage.getItem("myData"));
@@ -219,7 +218,7 @@ const nbsubmit = async () => {
       } limit ${pagenumber.value - 1}, ${pagenb.value}
    `
     );
-    console.log(666666666666, res);
+    console.log('664', res);
     let newdata = [];
     const map = {
       0: "point",
@@ -242,7 +241,7 @@ const nbsubmit = async () => {
       // dateItem.tableName = tableName;
       newdata.push(dateItem);
     });
-    console.log(999999, newdata);
+    console.log('665', newdata);
     tableData.value = newdata;
   }
 };
@@ -276,7 +275,7 @@ const funSubmit = async (params) => {
 let pagenumber = ref(1); //当前的页数
 let pagenb = ref(99); //当前的条数
 
-console.log(666666, pagenumber.value);
+console.log('667', pagenumber.value);
 const left1 = async () => {
   pagenumber.value -= 1;
 
@@ -370,7 +369,6 @@ const startTimer = async () => {
       8: "rate",
       9: "remark",
     };
-
     res.data.forEach((ele) => {
       let dateItem = {};
       for (let key in ele) {
@@ -379,6 +377,7 @@ const startTimer = async () => {
       newdata.push(dateItem);
     });
     tableData.value = newdata;
+  console.log('8686',tableData.value )
   }else{
     clearInterval()
   }
@@ -403,7 +402,7 @@ onMounted(() => {
   });
 });
 onUnmounted(() => {
-  // stopsetInterval();
+ clearInterval()
 });
 
 /**activated */
@@ -473,19 +472,22 @@ onActivated(() => {
                 style="width: 100% ,height:650px"
                 @cell-dblclick="dbclick"
                 @selection-change="handleSelectionChange"
+                :border ="true" 
               >
              
                 <el-table-column
                   prop="point"
                   label="测点"
                   align="center"
-                  width="200"
+                  width="270"
+                  resizable
                 />
                 <el-table-column
                   prop="description"
                   label="描述"
                   align="center"
                   width="200"
+                  resizable
                 />
                 <el-table-column
                   prop="ts"
@@ -493,21 +495,23 @@ onActivated(() => {
                   align="center"
                   width="200"
                 />
-                <el-table-column prop="val" label="值" align="center" />
-                <el-table-column prop="station" label="场站" align="center" />
-                <el-table-column prop="category " label="类别" align="center" />
+                <el-table-column prop="val" label="值" align="center"  width="200" resizable/>
+                <el-table-column prop="station" label="场站" align="center" resizable/>
+                <el-table-column prop="category " label="类别" align="center" resizable/>
                 <el-table-column
                   prop="equipment"
                   label="设备id"
                   align="center"
+                  resizable
                 />
                 <el-table-column
                   prop="uniformcode"
                   label="统一识别码"
                   align="center"
+                  resizable
                 />
-                <el-table-column prop="rate" label="倍率" align="center" />
-                <el-table-column prop="remark" label="备注" align="center" />
+                <el-table-column prop="rate" label="倍率" align="center" resizable/>
+                <el-table-column prop="remark" label="备注" align="center" resizable/>
               </el-table>
             </el-scrollbar>
           </div>