20230620

src/components/highcharts-h.vue

@@ -167,11 +167,17 @@ const chartOptions1 = reactive({
     scrollbar: {
         enabled: false,
     },
+    exporting: {//右上角下载
+        enabled: false
+    },
+    credits: {//右下角水印
+        enabled: false
+    },
     chart: {
         zooming: {
             singleTouch: true,
             resetButton: {},
-            type: 'xy',
+            type: 'x',
         },
         events: {
             selection(event) {

src/components/highcharts-t.vue

@@ -91,9 +91,9 @@ watch(() => popData.dataList, (newValue) => {
 }, { deep: true, immediate: false })
 
 const emit = defineEmits(['setTimeFun']);
-const zoomTypes = ref('xy')
 // 图表配置
 const chartOptions1 = reactive({
+
     xAxis: {
         type: 'datetime',
         // labels: {
@@ -175,7 +175,12 @@ const chartOptions1 = reactive({
     scrollbar: {
         enabled: false,
     },
-    
+    exporting: {//右上角下载
+        enabled: false
+    },
+    credits: {//右下角水印
+        enabled: false
+    },
     chart: {
         zooming: {
             singleTouch: true,
@@ -186,13 +191,10 @@ const chartOptions1 = reactive({
             selection(event) {
                 if (event.xAxis) {
                     // if (store.state.focuDatas!=null) {
-                    //     chartOptions1.chart.zooming.type = 'xy'
-                    // }else{
                     //     chartOptions1.chart.zooming.type = ''
+                    // }else{
+                    //     chartOptions1.chart.zooming.type = 'x'
                     // }
-                    // nextTick(()=>{
-                    //     chartOptions1.series = popData.dataList
-                    // })
                     console.log('框选',store.state.focuDatas)
                     emitter.emit("onSelectionTime",event.xAxis);
                     emit("setTimeFun", event.xAxis)

src/views/data/edit/index.vue

@@ -12,7 +12,7 @@
                 <div style="">
                   <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
                     <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="pickTimes.picktmSta"
-                      :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="setTimeFuns" @focus="focusFun(1)" type="datetimerange" clearable />
+                      :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="setTimeFuns" @focus="focusFun(1)" @blur="blurFun" type="datetimerange" clearable />
                     <n-button type="primary" @click="renderFun(1)" style="margin-left: 10px;">渲染</n-button>
                   </div>
                   <div>
@@ -62,7 +62,7 @@
         <div class="h-full flex flex-col gap-y-3">
           <n-space justify="space-between">
             <n-input-group>
-              <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="pickTimes.pickleveTime" :time-picker-props="{ format: 'HH:mm' }" @focus="focusFun(2)"
+              <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="pickTimes.pickleveTime" :time-picker-props="{ format: 'HH:mm' }" @focus="focusFun(2)" @blur="blurFun"
               @update:formatted-value="setTimeFuns"  type="datetimerange" />
               <n-button type="primary" @click=" renderFun(2) ">渲染</n-button>
             </n-input-group>
@@ -198,7 +198,10 @@ const setTimeFuns = (e) => {
     queryData.Time_end = value[1];
   }
 }
-
+const blurFun = () =>{
+  console.log('失去焦点')
+  blueData.value = null
+}
 const focusFun = (e)=>{
   console.log('获取焦点',e)
   blueData.value = e

src/views/equipment/index.vue

@@ -58,55 +58,51 @@
         </n-radio-group>
       </n-form-item>
     </n-form>
-    <n-modal :show-icon="false" v-model:show="modal.showModalobj" style="width: 900px;min-height: 700px;" preset="dialog"
-      title="选择添加">
-      <n-form inline label-placement="left" :model="formValues" :rules="rules" :size="size">
-        <n-form-item label="布局编号">
-          <n-input v-model:value="formValues.T_layout_no" placeholder="输入布局编号" />
-        </n-form-item>
-        <n-form-item label="设备编号">
-          <n-input v-model:value="formValues.T_sn" placeholder="输入设备编号" />
-        </n-form-item>
-        <n-form-item>
-          <n-button type="primary" attr-type="button" @click="GetficateListApi">
-            查询
-          </n-button>
-        </n-form-item>
-      </n-form>
-      <n-table :bordered="false" :single-line="false">
-        <thead>
-          <tr>
-            <th>
-              <n-checkbox :checked="checked" @update:checked="handleCheckedChange" />
-            </th>
-            <th>布局编号</th>
-            <th>设备编号</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item, index in checje.chkData" :key="index">
-            <td style="width: 60px;">
-              <n-checkbox-group v-model:value="checje.Selecteds" @update:value="handleUpdateValue">
-                <n-checkbox :value="item" />
-              </n-checkbox-group>
-            </td>
-            <td style="width: 250px;">{{ item.T_layout_no }}</td>
-            <td>{{ item.Id }}</td>
-          </tr>
-        </tbody>
-      </n-table>
-      <div style="margin-top: 20px;">
-        <n-pagination :display-order="[ 'size-picker', 'pages','quick-jumper']" :page-count="100" :page-sizes="[10, 20, 30, 40]" show-quick-jumper show-size-picker>
-        <template #prefix="">共 200项
-        </template>
-    </n-pagination>
+    <n-modal :show-icon="false" v-model:show="modal.showModalobj" style="width: 900px;" preset="dialog" title="选择添加">
+      <div style="max-height: 700px;display: flex;flex-direction: column;overflow-y: hidden;">
+        <n-form inline label-placement="left" :model="formValues" :rules="rules" :size="size">
+          <n-form-item label="布局编号">
+            <n-input v-model:value="formValues.T_layout_no" placeholder="输入布局编号" />
+          </n-form-item>
+          <n-form-item label="设备编号">
+            <n-input v-model:value="formValues.T_sn" placeholder="输入设备编号" />
+          </n-form-item>
+          <n-form-item>
+            <n-button type="primary" attr-type="button" @click="GetficateListApi">
+              查询
+            </n-button>
+          </n-form-item>
+          <n-form-item>
+            <n-button type="primary" :disabled="checkedRowKeysRef.length==0" attr-type="button" @click="submitis">
+              立即导入
+            </n-button>
+          </n-form-item>
+        </n-form>
+        <div style="flex: 1;overflow-y: auto;">
+          <n-data-table :columns="createColumns()" :data="checje.chkData" :remote="true" :max-height="480" :pagination="{
+            pageSize: formValues.page_z, 
+            page:formValues.page,
+            pageCount:pageData.pageCount,
+            'show-quick-jumper':true,
+            'show-size-picker':true,
+            'display-order':[ 'size-picker', 'pages','quick-jumper'],
+            'page-sizes':[10, 20, 30, 40],
+            prefix() {
+              return `共${pageData.pageNum}条`
+            }}"
+            @update:page="prevFun"
+            :on-update:page-size="pagesizeFun"
+            :row-key="rowKey" @update:checked-row-keys="handleCheck">
+          </n-data-table>
+        </div>
       </div>
+
     </n-modal>
   </n-modal>
 </template>
 
 <script setup>
-import { h, ref, watch } from 'vue';
+import { h, reactive, ref, watch } from 'vue';
 import { NButton, NSpace, NPopconfirm, NInput } from 'naive-ui';
 import {
   getDeviceClassListList,
@@ -121,9 +117,70 @@ const task = window.sessionStorage.getItem('task')
   : {};
 
 
+const checje = reactive({
+  Selecteds: null,
+  chkData: []
+})
+const checkedRowKeysRef = ref([]);
+const createColumns = () => [
+  {
+    type: "selection",
+  },
+  {
+    title: "布局编号",
+    key: "T_layout_no",
+    // sortOrder: false,
+    // sorter (rowA, rowB) {
+    //   return rowA.age - rowB.age
+    // }
+  },
+  {
+    title: "设备编号",
+    key: "Id"
+  }
+];
+
+const rowKey = (row) => row.T_layout_no
+const handleCheck = (rowKeys) => {//点击选项框勾选存值
+  checkedRowKeysRef.value = rowKeys;
+}
+
 
+
+const submitis = ()=>{
+  console.log(checkedRowKeysRef.value)
+  if(checkedRowKeysRef.value.length!=0){   
+    addDeviceClassList({
+      T_class: queryData.T_class,
+      T_layout_no_list:checkedRowKeysRef.value.join(',')
+    }).then(res=>{
+      if(res.data.Code==200){
+        getDataList();
+        message.success('导入成功')
+      }
+    });
+    
+  }
+}
 const message = useMessage();
+//上下页分页
+const prevFun = (e) => {
+  formValues.page = e
+  GetficateListApi()
+
+}
+
+
+//每页显示条数
+const pagesizeFun = (e) => {
+  formValues.page_z = e
+  GetficateListApi()
 
+}
+const pageData = reactive({
+  pageCount: 0,
+  pageNum: 0
+})
 const formValues = reactive({
   T_sn: '',//设备编号
   T_layout_no: '',//布局编号
@@ -131,31 +188,21 @@ const formValues = reactive({
   page: 1,
   page_z: 10,
 });
-const checked = ref(false)
-const checje = reactive({
-  Selecteds: null,
-  chkData: []
-})
-//全选
-const handleCheckedChange = (value) => {
-  checked.value = value
-  value ? checje.Selecteds = checje.chkData : checje.Selecteds = null
-}
-//单选
-const handleUpdateValue = (value) => {
-  value.length == checje.chkData.length ? checked.value = true : checked.value = false
-}
+
 // 选择导入
 const showAddModalobj = () => {
+  formValues.page = 1
   modal.showModalobj = true;
   GetficateListApi()
 };
-
+//列表Api
 const GetficateListApi = () => {
   getCertificateList(formValues).then(res => {
     let { data: resIt } = res
     if (resIt.Code == 200) {
-      checje.chkData = resIt.Data.List
+      resIt.Data.List!=null?checje.chkData = resIt.Data.List:checje.chkData = []
+      pageData.pageCount = resIt.Data.Page_size
+      pageData.pageNum = resIt.Data.Num
     }
   })
 }

src/views/equipment/sortPonent.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="sortClass" @click="sortClick">
+        <n-icon :class="initials==1?'sortClass-top':'sortClass-xuanz'" style="margin-bottom: -6px;" size="22" :component="CaretUp" />
+        <n-icon :class="initials==2?'sortClass-bot':'sortClass-xuanz'" style="margin-top: -6px;" size="22" :component="CaretDownOutline" />
+    </div>
+</template>
+
+<script setup>
+import { CaretUp, CaretDownOutline } from "@vicons/ionicons5";
+import { ref } from "vue"
+const emit = defineEmits(['setTimeFun']);
+
+const initials = ref(0)
+const sortClick = ()=>{
+    if(initials.value<2){
+        initials.value +=1
+    }else if(initials.value==2){
+        initials.value = 0
+    }
+    emit("soreData", initials.value)
+}
+</script>
+
+<style lang="scss">
+.sortClass {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    &-top {
+        color: #2d8cf0;
+    }
+
+    &-bot {
+        color: #2d8cf0;
+    }
+
+    &-xuanz{
+        color: rgb(224 224 230);    
+    }
+}
+</style>