index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
  1. <template>
  2. <div class="table-box">
  3. <div class="card table-main">
  4. <!-- 表格头部 操作按钮 -->
  5. <div class="table-header">
  6. <div class="header-button-lf">
  7. <el-form :model="pageable" label-width="auto" :inline="true">
  8. <el-form-item label="自动站:">
  9. <el-checkbox v-model="isStand" label="多站"/>
  10. <!--多站选择-->
  11. <el-select v-if="isStand" v-model="pageable.as_code_list" multiple collapse-tags filterable placeholder="请搜索自动站" remote reserve-keyword clearable style="width: 200px;margin: 0 10px">
  12. <el-option
  13. v-for="item in platformList"
  14. :key="item.as_code"
  15. :label="item.as_code +' '+item.as_name"
  16. :value="item.as_code"
  17. />
  18. <template #prefix>
  19. <el-icon class="el-input__icon"><search /></el-icon>
  20. </template>
  21. </el-select>
  22. <el-form-item label="观测时间:" v-if="isStand">
  23. <el-switch
  24. v-model="hot"
  25. inline-prompt
  26. active-text="正点"
  27. size="default"
  28. inactive-text="分钟"
  29. @change="changeHot"
  30. />
  31. <el-date-picker
  32. v-if="hot"
  33. v-model="multiTime"
  34. style="margin-left: 10px"
  35. type="datetime"
  36. popper-class="tpc"
  37. format="YYYY-MM-DD HH"
  38. placeholder="选择日期时间"
  39. @change="changeMultiTime"
  40. >
  41. </el-date-picker>
  42. <el-date-picker
  43. v-if="!hot"
  44. v-model="multiTime"
  45. style="margin-left: 10px"
  46. type="datetime"
  47. @change="changeMultiTime"
  48. format="YYYY-MM-DD HH:mm"
  49. placeholder="选择日期时间">
  50. </el-date-picker>
  51. </el-form-item>
  52. <!--单站选择-->
  53. <el-select v-if="!isStand" v-model="as_code_list" @change="changeAslist" collapse-tags filterable placeholder="请搜索自动站" remote reserve-keyword clearable style="width: 200px;padding: 0px 10px">
  54. <el-option
  55. v-for="item in platformList"
  56. :key="item.as_code"
  57. :label="item.as_code +' '+item.as_name"
  58. :value="item.as_code"
  59. />
  60. <template #prefix>
  61. <el-icon class="el-input__icon"><search /></el-icon>
  62. </template>
  63. </el-select>
  64. <el-form-item label="观测时间:" v-if="!isStand">
  65. <el-switch
  66. v-model="hot"
  67. inline-prompt
  68. active-text="正点"
  69. size="default"
  70. inactive-text="分钟"
  71. @change="changeHot"
  72. />
  73. <span class="form-item__label">日界:</span>
  74. <el-switch
  75. v-model="points"
  76. inline-prompt
  77. active-text="0点"
  78. size="default"
  79. inactive-text="18点"
  80. @change="changePoints"
  81. />
  82. <el-date-picker
  83. style="margin-left: 10px"
  84. v-model="singleTime"
  85. type="date"
  86. placeholder="请选择"
  87. @change="changeTime"
  88. />
  89. </el-form-item>
  90. <el-form-item v-if="!hot" label="数据密度:">
  91. <el-select v-model="pageable.time_space" style="width: 240px" filterable placeholder="请选择" clearable>
  92. <el-option
  93. v-for="item in timeSpaceList"
  94. :key="item.value"
  95. :label="item.label"
  96. :value="item.value"
  97. />
  98. </el-select>
  99. </el-form-item>
  100. </el-form-item>
  101. <el-form-item>
  102. <el-button type="primary" @click="handleQuery"> 查询 </el-button>
  103. <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
  104. </el-form-item>
  105. </el-form>
  106. </div>
  107. <div class="header-button-ri">
  108. <slot name="toolButton">
  109. <img class="setting" src="@/assets/images/setting2.png" @click="handleSetting" />
  110. </slot>
  111. </div>
  112. </div>
  113. <!-- 表格主体 -->
  114. <el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small" @sort-change="handleSortChange">
  115. <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
  116. <template #default="scope">
  117. {{ (pageable.pageNum - 1) * pageable.pageSize + scope.$index + 1 }}
  118. </template>
  119. </el-table-column>
  120. <template v-for="item in columns" :key="item">
  121. <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true">
  122. <template #default="scope">
  123. <template v-if="item.prop === 'data_time_i'">
  124. {{formatDate(scope.row.data_time_i)}}
  125. </template>
  126. </template>
  127. </el-table-column>
  128. </template>
  129. <!-- 无数据 -->
  130. <template #empty>
  131. <div class="table-empty">
  132. <slot name="empty">
  133. <img src="@/assets/images/notData.png" alt="notData" />
  134. <div>暂无数据</div>
  135. </slot>
  136. </div>
  137. </template>
  138. </el-table>
  139. <!-- 分页组件 -->
  140. <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
  141. </div>
  142. <!-- 添加或修改岗位对话框 -->
  143. <el-dialog :title="dialog.title" v-model="dialog.visible" width="940px" append-to-body>
  144. <div style="height: 500px">
  145. <el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
  146. <el-tab-pane label="风">
  147. <div class="container-tag">
  148. <template v-for="item in elementList" :key="item.id" >
  149. <div v-if="item.data_type==='风'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  150. </template>
  151. </div>
  152. </el-tab-pane>
  153. <el-tab-pane label="温湿度">
  154. <div class="container-tag">
  155. <template v-for="item in elementList" :key="item.id" >
  156. <div v-if="item.data_type==='温湿度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  157. </template>
  158. </div>
  159. </el-tab-pane>
  160. <el-tab-pane label="气压">
  161. <div class="container-tag">
  162. <template v-for="item in elementList" :key="item.id" >
  163. <div v-if="item.data_type==='气压'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  164. </template>
  165. </div>
  166. </el-tab-pane>
  167. <el-tab-pane label="降水">
  168. <div class="container-tag">
  169. <template v-for="item in elementList" :key="item.id" >
  170. <div v-if="item.data_type==='降水'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  171. </template>
  172. </div>
  173. </el-tab-pane>
  174. <el-tab-pane label="云">
  175. <div class="container-tag">
  176. <template v-for="item in elementList" :key="item.id" >
  177. <div v-if="item.data_type==='云'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  178. </template>
  179. </div>
  180. </el-tab-pane>
  181. <el-tab-pane label="能见度">
  182. <div class="container-tag">
  183. <template v-for="item in elementList" :key="item.id" >
  184. <div v-if="item.data_type==='能见度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  185. </template>
  186. </div>
  187. </el-tab-pane>
  188. <el-tab-pane label="天气现象">
  189. <div class="container-tag">
  190. <template v-for="item in elementList" :key="item.id" >
  191. <div v-if="item.data_type==='天气现象'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  192. </template>
  193. </div>
  194. </el-tab-pane>
  195. <el-tab-pane label="积雪">
  196. <div class="container-tag">
  197. <template v-for="item in elementList" :key="item.id" >
  198. <div v-if="item.data_type==='积雪'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  199. </template>
  200. </div>
  201. </el-tab-pane>
  202. <el-tab-pane label="地面温度">
  203. <div class="container-tag">
  204. <template v-for="item in elementList" :key="item.id" >
  205. <div v-if="item.data_type==='地面温度'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  206. </template>
  207. </div>
  208. </el-tab-pane>
  209. <el-tab-pane label="大气电场">
  210. <div class="container-tag">
  211. <template v-for="item in elementList" :key="item.id" >
  212. <div v-if="item.data_type==='大气电场'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  213. </template>
  214. </div>
  215. </el-tab-pane>
  216. <el-tab-pane label="闪电">
  217. <div class="container-tag">
  218. <template v-for="item in elementList" :key="item.id" >
  219. <div v-if="item.data_type==='闪电'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  220. </template>
  221. </div>
  222. </el-tab-pane>
  223. <el-tab-pane label="日照">
  224. <div class="container-tag">
  225. <template v-for="item in elementList" :key="item.id" >
  226. <div v-if="item.data_type==='日照'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  227. </template>
  228. </div>
  229. </el-tab-pane>
  230. <el-tab-pane label="总辐射">
  231. <div class="container-tag">
  232. <template v-for="item in elementList" :key="item.id" >
  233. <div v-if="item.data_type==='总辐射'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  234. </template>
  235. </div>
  236. </el-tab-pane>
  237. <el-tab-pane label="日照文">
  238. <div class="container-tag">
  239. <template v-for="item in elementList" :key="item.id" >
  240. <div v-if="item.data_type==='日照文'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  241. </template>
  242. </div>
  243. </el-tab-pane>
  244. <el-tab-pane label="水文">
  245. <div class="container-tag">
  246. <template v-for="item in elementList" :key="item.id" >
  247. <div v-if="item.data_type==='水文'" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
  248. </template>
  249. </div>
  250. </el-tab-pane>
  251. </el-tabs>
  252. </div>
  253. <template #footer>
  254. <div class="dialog-footer">
  255. <el-button @click="cancel">取 消</el-button>
  256. <el-button type="primary" @click="submitForm">确 定</el-button>
  257. </div>
  258. </template>
  259. </el-dialog>
  260. </div>
  261. </template>
  262. <script setup lang="ts" name="useProTable">
  263. import Pagination from "@/components/ProTable/components/Pagination.vue";
  264. import {ref, reactive, onMounted, onDeactivated, onActivated} from "vue";
  265. import { ColumnProps } from "@/components/ProTable/interface";
  266. import {ElNotification, ElTable} from "element-plus";
  267. import {getDataItemList, getPlatformList, getRgDataList} from "@/api/modules/allData";
  268. import { Platform} from "@/api/interface";
  269. const tableRef = ref<InstanceType<typeof ElTable>>();
  270. const dialog = reactive<any>({
  271. visible: false,
  272. title: ''
  273. });
  274. const cancel = () => {
  275. dialog.visible = false;
  276. }
  277. const handleSortChange = ({ column, prop, order }) =>{
  278. // 在这里发送请求到服务器端进行远程排序
  279. console.log('column:', column)
  280. console.log('prop:', prop)
  281. console.log('order:', order)
  282. }
  283. const timeSpaceList= [
  284. {
  285. value: 1,
  286. label: '1分钟',
  287. },
  288. {
  289. value: 5,
  290. label: '5分钟',
  291. },
  292. {
  293. value: 10,
  294. label: '10分钟',
  295. }
  296. ]
  297. const pageable = ref<any>({
  298. data_type: false,
  299. time_order: 0,
  300. time_space:60,
  301. begin_time:undefined,
  302. end_time: undefined,
  303. as_code_list:[],
  304. data_items:[],
  305. pageNum: 1,
  306. pageSize: 20,
  307. total: 0
  308. });
  309. const isStand =ref(true)
  310. const as_code_list = ref(undefined);
  311. const hot = ref(true);
  312. const points =ref(true);
  313. const singleTime =ref(undefined)
  314. const multiTime =ref(undefined)
  315. const changeHot =(row)=>{
  316. console.log(row)
  317. if(row){
  318. pageable.value.time_space = 60
  319. }else {
  320. pageable.value.time_space = 1
  321. }
  322. }
  323. const changeMultiTime =(time)=>{
  324. if(time){
  325. const timeStamp = new Date(time).getTime();
  326. pageable.value.begin_time = timeStamp/1000
  327. pageable.value.end_time = timeStamp/1000
  328. }else {
  329. pageable.value.begin_time = undefined
  330. pageable.value.end_time = undefined
  331. }
  332. }
  333. const changePoints=(row)=>{
  334. singleTime.value =undefined
  335. pageable.value.begin_time = undefined
  336. pageable.value.end_time = undefined
  337. }
  338. const changeTime =(time)=>{
  339. const timeStamp = new Date(time).getTime();
  340. if(points){
  341. //0点
  342. const startTime = timeStamp + 60 * 1000; // 添加1分钟(60秒)
  343. const endTime = timeStamp + 24 * 60 * 60 * 1000; // 添加一天(24小时)
  344. pageable.value.begin_time = startTime/1000
  345. pageable.value.end_time = endTime/1000
  346. }else {
  347. //18点
  348. const startTimeStamp = timeStamp + 18 * 60 * 60 * 1000 + 60 * 1000;// 添加18小时和1分钟(18*60*60秒+60秒)
  349. const nextDay = new Date(time);
  350. nextDay.setDate(nextDay.getDate() + 1); // 设置为第二天
  351. nextDay.setHours(18, 0, 0, 0); // 设置时间为18:00:00
  352. const endTimeStamp = nextDay.getTime(); // 获取第二天18:00:00的时间戳
  353. pageable.value.begin_time = startTimeStamp/1000
  354. pageable.value.end_time = endTimeStamp/1000
  355. }
  356. }
  357. const changeAslist =(row)=>{
  358. if(row){
  359. pageable.value.as_code_list = [row]
  360. }else {
  361. pageable.value.as_code_list = []
  362. }
  363. }
  364. // 查询功能
  365. const handleQuery = () => {
  366. if(isStand.value){
  367. //多站
  368. pageable.value.pageNum = 1;
  369. getList();
  370. }else {
  371. //单站
  372. if(!pageable.value.as_code_list){
  373. ElNotification({
  374. title: "错误",
  375. message: "请选择台站",
  376. type: "error",
  377. duration: 3000
  378. });
  379. return
  380. }
  381. pageable.value.pageNum = 1;
  382. getList();
  383. }
  384. };
  385. //重置功能
  386. const resetQuery = () => {
  387. pageable.value.pageNum = 1;
  388. pageable.value.as_code_list = undefined
  389. getList();
  390. };
  391. /**
  392. * @description 每页条数改变
  393. * @param {Number} val 当前条数
  394. * @return void
  395. * */
  396. const handleSizeChange = (val: number) => {
  397. console.log("=====");
  398. console.log(val);
  399. };
  400. /**
  401. * @description 当前页改变
  402. * @param {Number} val 当前页
  403. * @return void
  404. * */
  405. const handleCurrentChange = (val: number) => {
  406. pageable.value.pageNum = val
  407. console.log("=====1");
  408. console.log(val);
  409. };
  410. const processTableData = ref([]);
  411. // 表格配置项
  412. let columns = reactive<ColumnProps[]>([]);
  413. //自定义部分表头
  414. let customizeColumns= ref<any>([
  415. {
  416. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  417. data_id: 2,
  418. data_type: "风",
  419. data_item: "ER_FEN_ZHONG_PING_JUN_FENG_XIANG",
  420. data_name: "2分钟风向",
  421. data_unit: "°",
  422. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  423. data_value: "",
  424. data_order: 0,
  425. data_condition: 0
  426. },
  427. {
  428. data_id: 1,
  429. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  430. data_type: "风",
  431. data_name: "2分钟风速",
  432. data_item: "ER_FEN_ZHONG_PING_JUN_FENG_SU",
  433. data_unit: "m/s",
  434. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  435. data_value: "",
  436. data_order: 0,
  437. data_condition: 0
  438. },
  439. {
  440. data_id: 4,
  441. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  442. data_type: "风",
  443. data_name: "10分钟风向",
  444. data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_XIANG",
  445. data_unit: "°",
  446. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  447. data_value: "",
  448. data_order: 0,
  449. data_condition: 0
  450. },
  451. {
  452. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  453. data_id: 3,
  454. data_type: "风",
  455. data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_SU",
  456. data_name: "10分钟风速",
  457. data_unit: "m/s",
  458. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  459. data_value: "",
  460. data_order: 0,
  461. data_condition: 0
  462. },
  463. {
  464. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  465. data_id: 501,
  466. data_type: "能见度",
  467. data_item: "YI_FEN_ZHONG_PING_JUN_NENG_JIAN_DU",
  468. data_name: "1分钟平均能见度",
  469. data_unit: "m",
  470. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  471. data_value: "",
  472. data_order: 0,
  473. data_condition: 0
  474. },
  475. {
  476. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  477. data_id: 101,
  478. data_type: "温湿度",
  479. data_item: "QI_WEN",
  480. data_name: "气温",
  481. data_unit: "℃",
  482. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  483. data_value: "",
  484. data_order: 0,
  485. data_condition: 0
  486. },
  487. {
  488. data_id: 201,
  489. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  490. data_type: "气压",
  491. data_name: "水汽压",
  492. data_item: "SHUI_QI_YA",
  493. data_unit: "hPa",
  494. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  495. data_value: "",
  496. data_order: 0,
  497. data_condition: 0
  498. },
  499. {
  500. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  501. data_id: 109,
  502. data_type: "温湿度",
  503. data_item: "LU_DIAN_WEN_DU",
  504. data_name: "露点温度",
  505. data_unit: "℃",
  506. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  507. data_value: "",
  508. data_order: 0,
  509. data_condition: 0
  510. },
  511. {
  512. data_id: 202,
  513. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  514. data_type: "气压",
  515. data_name: "本站气压",
  516. data_item: "BEN_ZHAN_QI_YA",
  517. data_unit: "hPa",
  518. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  519. data_value: "",
  520. data_order: 0,
  521. data_condition: 0
  522. },{
  523. data_id: 207,
  524. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  525. data_type: "气压",
  526. data_name: "海平面气压",
  527. data_item: "HAI_PING_MIAN_QI_YA",
  528. data_unit: "hPa",
  529. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  530. data_value: "",
  531. data_order: 0,
  532. data_condition: 0
  533. },
  534. {
  535. data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
  536. data_id: 312,
  537. data_type: "降水",
  538. data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_CHENG_ZHONG",
  539. data_name: "小时累计降水量(称重)",
  540. data_unit: "mm",
  541. data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
  542. data_value: "",
  543. data_order: 0,
  544. data_condition: 0
  545. }
  546. ])
  547. const updateColumns = () => {
  548. const column = [
  549. { prop: "as_name", label: "站名", width: 100 },
  550. { prop: "as_code", label: "站号", width: 100 },
  551. { prop: "data_time_i", label: "观测时间", width: 170 }
  552. ];
  553. const newColumns = customizeColumns.value.map(item => ({
  554. prop: item.data_id,
  555. label: item.data_name +'('+item.data_unit+')',
  556. sortable: true,
  557. width: calculateTextLengthInPixels(item.data_name)
  558. }));
  559. columns = [...column, ...newColumns];
  560. pageable.value.data_items = [...customizeColumns.value];
  561. getList();
  562. }
  563. //操作 自定义部分表头
  564. const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
  565. // 查询自动站列表
  566. const queryas = ref<Platform>({
  567. pagesize: 50,
  568. currentpage: 1
  569. })
  570. const platformList =ref<any>([])
  571. const getPlatforms = async () => {
  572. const { data } = await getPlatformList(queryas.value);
  573. platformList.value = data.list
  574. };
  575. // 查询所有人工要素字典表
  576. const elementList =ref<any>([])
  577. const getAllRgDataList = async () => {
  578. const { data } = await getRgDataList();
  579. elementList.value = data.list
  580. };
  581. const getList = async () => {
  582. const { data } = await getDataItemList(pageable.value);
  583. processTableData.value = data.list
  584. pageable.value.total = data.total
  585. };
  586. // 要素的选中和取消
  587. const toggleSelection=(item)=> {
  588. item.isSelected=!item.isSelected
  589. if(item.isSelected){
  590. //添加
  591. copiedCustomizeColumns.value.push(item)
  592. }else {
  593. //删除
  594. copiedCustomizeColumns.value= copiedCustomizeColumns.value.filter(column => column.data_id !== item.data_id);
  595. }
  596. }
  597. const handleSetting = () => {
  598. copiedCustomizeColumns.value = [...customizeColumns.value]
  599. elementList.value.forEach(element => {
  600. const column = copiedCustomizeColumns.value.find(col => col.data_id === element.data_id);
  601. if (column) {
  602. element.isSelected = true;
  603. } else {
  604. element.isSelected = false;
  605. }
  606. });
  607. dialog.title = "列表字段设置"
  608. dialog.visible = true;
  609. }
  610. const submitForm = () => {
  611. dialog.visible = false;
  612. customizeColumns.value = [...copiedCustomizeColumns.value]
  613. updateColumns()
  614. saveCustomizeColumns()
  615. }
  616. // 大概计算字符串长度
  617. function calculateTextLengthInPixels(text) {
  618. return (text.length * 14)+100;
  619. }
  620. //时间戳转换为指定格式的日期字符串
  621. function formatDate(timestamp) {
  622. const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
  623. const year = date.getFullYear();
  624. const month = String(date.getMonth() + 1).padStart(2, '0');
  625. const day = String(date.getDate()).padStart(2, '0');
  626. const hours = String(date.getHours()).padStart(2, '0');
  627. const minutes = String(date.getMinutes()).padStart(2, '0');
  628. return `${year}-${month}-${day} ${hours}:${minutes}`;
  629. }
  630. onMounted(() => {
  631. loadCustomizeColumns()
  632. updateColumns()
  633. getPlatforms()
  634. getAllRgDataList()
  635. })
  636. // 保存customizeColumns数组到localStorage
  637. function saveCustomizeColumns() {
  638. const jsonString = JSON.stringify(customizeColumns.value);
  639. localStorage.setItem('customizeColumns2', jsonString);
  640. }
  641. // 从localStorage中获取customizeColumns数组
  642. function loadCustomizeColumns() {
  643. const jsonString = localStorage.getItem('customizeColumns2');
  644. if (jsonString) {
  645. customizeColumns.value = JSON.parse(jsonString);
  646. }
  647. }
  648. </script>
  649. <style>
  650. .tpc .el-time-spinner__wrapper {
  651. width:100% !important;
  652. }
  653. </style>