fix:修改bug，并联调接口

2022-10-23 20:36:39 +08:00
parent b8ec59991d
commit 9b6050ed70
7 changed files with 336 additions and 91 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -12031,7 +12031,7 @@
    },
    "sortablejs": {
      "version": "1.15.0",
-      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
    },
    "source-list-map": {
@@ -13705,7 +13705,7 @@
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
@@ -13717,7 +13717,7 @@
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
@@ -13727,7 +13727,7 @@
        },
        "chalk": {
          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
@@ -13738,7 +13738,7 @@
        },
        "color-convert": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
@@ -13748,21 +13748,21 @@
        },
        "color-name": {
          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
          "dev": true,
          "optional": true,
@@ -13774,7 +13774,7 @@
        },
        "supports-color": {
          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
--- a/src/api/qc.js
+++ b/src/api/qc.js
@@ -44,3 +44,11 @@ export function getNullDealConfig(params) {
    params
  })
 }
+/* 答卷标记取消 */
+export function heads(params) {
+  return request({
+    url: `/console/surveys/${params.sn}/answers/heads`,
+    method: 'GET',
+    params
+  })
+}
--- a/src/views/DataAnalyse/components/diagram/newBtnList.vue
+++ b/src/views/DataAnalyse/components/diagram/newBtnList.vue
@@ -127,8 +127,8 @@ const opChange = (e) => {
 }
 const dataList = ref([
  // {value:'0',label:'添加数据'},
-  { value: '1', label: '导入数据' }
-  //{value:'2',label:'导出数据'},
+  // { value: '1', label: '导入数据' }
+  { value: '2', label: '导出数据' }
 ])
 // 添加数据 导入数据 导出数据
 const dataChange = (e) => {
--- a/src/views/DataAnalyse/particulars/notData/components/Transfer.vue
+++ b/src/views/DataAnalyse/particulars/notData/components/Transfer.vue
@@ -1,18 +1,28 @@
 <template>
  <transfer
+    v-if="!loading"
    :data-source="mockData"
    :show-search="false"
    :show-select-all="false"
+    ref="transfer"
    :list-style="{
-      width: '250px',
-      height: '300px'
+      width: 'calc(50% - 20px)',
+      height: '100%',
+      background: '#ffffff'
    }"
+    :titles="['选择变量', '检验变量列表 （变量数≥2）']"
    :target-keys="targetKeys"
-    :render="(item) => `${item.title}-${item.description}`"
-    @change="handleChange">
+    @change="handleChange"
+    :lazy="false">
    <!-- <template #footer>
      <a-button size="small" style="float: right; margin: 5px" @click="getMock">reload</a-button>
    </template> -->
+    <template #render="item">
+      <span class="custom-item">
+        {{ item.title }}
+      </span>
+    </template>
+
    <template #notFoundContent>
      <span>没数据</span>
    </template>
@@ -21,51 +31,162 @@
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
 import { Transfer } from 'ant-design-vue'
+import { heads } from '@/api/qc'
+import Sortable from 'sortablejs'
+
+import { useRoute } from 'vue-router'
+import { fa } from 'element-plus/lib/locale'
 export default defineComponent({
  components: {
    Transfer
  },
-  setup() {
+  setup(props, content) {
    const mockData = ref([])
    const targetKeys = ref([])
+    const transfer = ref()
+    const route = useRoute()
+    const sn = route.query.sn
+    const qc_keysStr = ref(localStorage.getItem('qc_keys' + sn))
+    const loading = ref(false)
+
    onMounted(() => {
-      getMock()
+      getData()
    })
+    const getData = async () => {
+      const data = await heads({
+        sn
+      })

-    const getMock = () => {
-      const keys = []
-      const mData = []
-
-      for (let i = 0; i < 20; i++) {
-        const data = {
-          key: i.toString(),
-          title: `content${i + 1}`,
-          description: `description of content${i + 1}`,
-          chosen: Math.random() * 2 > 1
+      if (data) {
+        const keys = []
+        const mData = []
+        let qc_keys = []
+        if (qc_keysStr.value) {
+          qc_keys = qc_keysStr.value.split(',')
        }
-
-        if (data.chosen) {
-          keys.push(data.key)
+        let index = 0
+        for (const key in data.columns[2]) {
+          const item = data.columns[2][key]
+          const udata = {
+            key: key,
+            title: item.title,
+            description: item.title,
+            chosen: false
+          }
+          if (qc_keys.includes(key)) {
+            udata.chosen = true
+            keys.push(key)
+          }
+          mData.push(udata)
        }
-
-        mData.push(data)
+        targetKeys.value = keys
+        mockData.value = mData
      }
-
-      mockData.value = mData
-      targetKeys.value = keys
    }

    const handleChange = (keys, direction, moveKeys) => {
      targetKeys.value = keys
-      console.log(keys, direction, moveKeys)
+      //console.log(keys, direction, moveKeys)
+      localStorage.setItem('qc_keys' + sn, targetKeys.value.toString())
+      content.emit('qc_keys', targetKeys.value.toString())
    }
+    const clear = () => {
+      qc_keysStr.value = ''
+      localStorage.removeItem('qc_keys' + sn)
+      getData()
+    }
+    const setQcKeys = (value) => {
+      qc_keysStr.value = value
+      localStorage.setItem('qc_keys' + sn, qc_keysStr.value)
+      getData()
+    }
+    // const drag = (ev, option) => {
+    //   draggingKey.value = option.key
+    //   draggingChosen.value = option.chosen
+    //   // showMock()
+    // }
+    // onMounted(() => {
+    //   showMock()
+    // })

+    // const showMock = () => {
+    //   setTimeout(() => {
+    //     const leftPanel = transfer.value.$el.getElementsByClassName('ant-transfer-list-content')[0]
+    //     const rightPanel = transfer.value.$el.getElementsByClassName('ant-transfer-list-content')[1]
+    //     //const rightEl = rightPanel.getElementsByClassName('custom-item')[0]
+    //     Sortable.create(rightPanel, {
+    //       group: 'shared', // set both lists to same group
+    //       animation: 150,
+    //       onEnd: (evt) => {
+    //         const item = undefined
+    //         mockData.value.forEach((s, index) => {
+    //           if (s.key == draggingKey.value) {
+    //             mockData.value[index].chosen = false
+    //           }
+    //         })
+
+    //         getMock(mockData)
+    //       }
+    //     })
+    //     Sortable.create(leftPanel, {
+    //       group: 'shared', // set both lists to same group
+    //       animation: 150,
+    //       onEnd: (evt) => {
+    //         const item = undefined
+    //         mockData.value.forEach((s, index) => {
+    //           if (s.key == draggingKey.value) {
+    //             mockData.value[index].chosen = true
+    //           }
+    //         })
+    //         getMock(mockData)
+    //       }
+    //     })
+    //   }, 500)
+    // }
    return {
      mockData,
      targetKeys,
      handleChange,
-      getMock
+      //  drag,
+      transfer,
+      loading,
+      clear,
+      setQcKeys
    }
  }
 })
 </script>
+<style lang="scss" scoped>
+.ant-transfer {
+  width: 100% !important;
+}
+:deep(.ant-transfer-list) {
+  padding: 0;
+  .ant-transfer-list-header {
+    position: relative;
+  }
+}
+
+:deep(.ant-transfer-operation) {
+  width: auto;
+  height: 100%;
+
+  .ant-btn {
+    height: calc(50% - 4px);
+  }
+  .ant-btn[disabled] {
+    background: #fff;
+  }
+}
+:deep(.ant-transfer-list-header-selected) {
+  span {
+    display: none;
+  }
+}
+:deep(.ant-transfer-list-header-title) {
+  position: relative;
+  display: block !important;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+</style>
--- a/src/views/DataAnalyse/particulars/notData/components/hearder.vue
+++ b/src/views/DataAnalyse/particulars/notData/components/hearder.vue
@@ -1,14 +1,22 @@
 <template>
  <div class="hearder">
    <slot>
-      <i class="iconfont icon-xiangzuo-moren"></i>
+      <i class="icon iconfont" @click="router.back()">&#xe6c0;</i>
      <span class="hearder-title">返回分析列表</span>
    </slot>
  </div>
 </template>

 <script>
-export default {}
+import { useRouter } from 'vue-router'
+export default {
+  setup() {
+    const router = useRouter()
+    return {
+      router
+    }
+  }
+}
 </script>

 <style lang="scss" scoped>
@@ -29,7 +37,7 @@ export default {}
  font-weight: normal;
  color: #434343;
 }
-.icon-xiangzuo-moren {
+.icon {
  cursor: pointer;
 }
 </style>
--- a/src/views/DataAnalyse/particulars/notData/components/notDataHearder.vue
+++ b/src/views/DataAnalyse/particulars/notData/components/notDataHearder.vue
@@ -1,12 +1,16 @@
 <template>
  <div>
-    <div class="function-memo">
+    <div
+      class="function-memo"
+      :class="{
+        border: isShow
+      }">
      <div class="function-memo-title">
-        <slot name="title"> 方法说明</slot>
+        <slot name="title" v-if="isShow"> 方法说明</slot>
      </div>
      <slot name="icon">
        <div class="function-memo-icon">
-          <i class="icon iconfont" @click="hide" v-if="!isShow">&#xe76a;</i>
+          <i class="icon iconfont" @click="hide" v-if="isShow">&#xe76a;</i>
          <i class="icon iconfont" @click="show" v-else>&#xe76b;</i>
        </div>
      </slot>
@@ -19,7 +23,7 @@ export default {
  props: {
    isShow: {
      type: Boolean,
-      default: () => false
+      default: () => true
    }
  },
  setup(props, context) {
@@ -44,7 +48,6 @@ export default {
  font-family: PingFang SC-中黑体, PingFang SC;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.85);
-  border-bottom: 1px solid #e8e8e8;
  padding: 18px 0;
  margin: 0 18px;
  .function-memo-icon {
@@ -56,4 +59,7 @@ export default {
    cursor: pointer;
  }
 }
+.border {
+  border-bottom: 1px solid #e8e8e8;
+}
 </style>
--- a/src/views/DataAnalyse/particulars/notData/notData.vue
+++ b/src/views/DataAnalyse/particulars/notData/notData.vue
@@ -1,38 +1,43 @@
 <template>
  <div class="not-data">
    <hearder></hearder>
-    <div class="not-data-title">无效样本处理</div>
+    <div class="not-data-title">
+      <div>无效样本处理</div>
+      <div class="rightflex1">
+        <a-button class="mr-10" @click="clear">重置</a-button>
+        <a-button type="primary" @click="handle">处理</a-button>
+      </div>
+    </div>
    <div class="flex">
      <!-- 左 -->
      <div class="flex1 bgf">
        <notDataHearder :style="isShow ? '100px' : '100%'" v-model:isShow="isShow"></notDataHearder>
+        <div v-if="isShow">
+          <notDataHeaderTitle></notDataHeaderTitle>
+          <div class="function-content">无效样本此处指相同数字出现比例较高或缺失比例较高的样本</div>
+          <div class="function-content">无效样本处理指通过设置的无效样本判断规则来筛选样本并做标记或删除处理，是对行的操作。</div>

-        <notDataHeaderTitle></notDataHeaderTitle>
-        <div class="function-content">无效样本此处指相同数字出现比例较高或缺失比例较高的样本</div>
-        <div class="function-content">无效样本处理指通过设置的无效样本判断规则来筛选样本并做标记或删除处理，是对行的操作。</div>
+          <notDataHeaderTitle>
+            <div>规则说明</div>
+          </notDataHeaderTitle>

-        <notDataHeaderTitle>
-          <div>规则说明</div>
-        </notDataHeaderTitle>
-
-        <div class="function-content">前置操作作为选中变量1-4复制到检验变量列表，比例设置50%，以此为比例分别对【相同数字】和【缺失比例】两种规则进行说明如下：</div>
-        <div class="function-content">【相同数字】</div>
-        <div class="function-table">
-          <div class="function-content">以4个变量举例：在变量1-4范围内，相同内容出50% 及以上，筛选出样本1和样本2。</div>
-          <a-table :pagination="false" class="function-content" size="middle" :columns="test_columns" :data-source="test_data" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" />
-        </div>
-        <div class="function-content">【缺失比例】</div>
-        <div class="function-table">
-          <div class="function-content">以4个变量举例：在变量1-4范围内，相同内容出50% 及以上，筛选出样本1和样本2。</div>
-          <a-table :pagination="false" class="function-content" size="middle" :columns="test_columns" :data-source="test_data_2" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" />
+          <div class="function-content">前置操作作为选中变量1-4复制到检验变量列表，比例设置50%，以此为比例分别对【相同数字】和【缺失比例】两种规则进行说明如下：</div>
+          <div class="function-content">【相同数字】</div>
+          <div class="function-table">
+            <div class="function-content">以4个变量举例：在变量1-4范围内，相同内容出50% 及以上，筛选出样本1和样本2。</div>
+            <a-table :pagination="false" class="function-content" size="middle" :columns="test_columns" :data-source="test_data" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" />
+          </div>
+          <div class="function-content">【缺失比例】</div>
+          <div class="function-table">
+            <div class="function-content">以4个变量举例：在变量1-4范围内，相同内容出50% 及以上，筛选出样本1和样本2。</div>
+            <a-table :pagination="false" class="function-content" size="middle" :columns="test_columns" :data-source="test_data_2" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" />
+          </div>
        </div>
      </div>
      <!-- 中 -->
-      <div class="flex2 bgf">
-        <div>选择变量</div>
-        <div>检验变量列表（变量书≥2）</div>
-        <Transfer></Transfer>
-      </div>
+
+      <Transfer ref="Transfer" @qc_keys="onQcKeys"></Transfer>
+
      <!-- 右 -->
      <div class="flex1">
        <div class="bgf h50">
@@ -41,24 +46,22 @@
            <template #icon>&nbsp;</template>
          </notDataHearder>
          <div>
-            <a-checkbox-group v-model:value="value">
-              <a-row>
-                <a-col :span="100">
-                  <div class="rows-check">
-                    <a-checkbox value="A"></a-checkbox>
-                    删除样本 ≥ <a-input-number :min="1" :max="100000" v-model:value="value2" />&nbsp;%
-                  </div>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col :span="100">
-                  <div class="rows-check">
-                    <a-checkbox value="B"></a-checkbox>
-                    缺失比例 ≥ <a-input-number :min="1" :max="100000" v-model:value="value2" />&nbsp;%
-                  </div>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
+            <a-row>
+              <a-col :span="100">
+                <div class="rows-check">
+                  <a-checkbox value="2" @change="changeSame" v-model:checked="uData.isSame">相同内容</a-checkbox>
+                  ≥ <a-input-number :disabled="!uData.isSame" @blur="changeSame" :max="100" v-model:value="uData.sameRatio" />&nbsp;%
+                </div>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="100">
+                <div class="rows-check">
+                  <a-checkbox value="1" @change="changeNull" v-model:checked="uData.isNull">缺失比例</a-checkbox>
+                  ≥ <a-input-number :disabled="!uData.isNull" @blur="changeNull" :max="100" v-model:value="uData.nullRatio" />&nbsp;%
+                </div>
+              </a-col>
+            </a-row>
          </div>
        </div>
        <div class="bgf h50">
@@ -67,7 +70,7 @@
            <template #icon>&nbsp;</template>
          </notDataHearder>
          <div class="rows-check">
-            <a-radio-group v-model:value="value">
+            <a-radio-group v-model:value="uData.type" @change="saveStorage">
              <a-radio :style="radioStyle" :value="1">标记样本</a-radio>
              <a-radio :style="radioStyle" :value="2">删除样本</a-radio>
            </a-radio-group>
@@ -84,6 +87,10 @@ import hearder from './components/hearder'
 import notDataHearder from './components/notDataHearder'
 import notDataHeaderTitle from './components/notDataHeaderTitle'
 import Transfer from './components/Transfer'
+import { getNullDealConfig, nullDeal } from '@/api/qc'
+import { onMounted } from '@vue/runtime-core'
+import { useRoute } from 'vue-router'
+
 export default {
  components: {
    hearder,
@@ -92,7 +99,44 @@ export default {
    Transfer
  },
  setup() {
-    const isShow = ref(true)
+    const route = useRoute()
+    const sn = route.query.sn
+    const isShow = ref(false)
+    const Transfer = ref()
+    const uData = ref({
+      type: 1,
+      sameRatio: undefined,
+      isSame: false,
+      nullRatio: undefined,
+      isNull: false,
+      variableKeys: ''
+    })
+
+    const getData = async () => {
+      const data = await getNullDealConfig({ sn: route.query.sn })
+      const qc_not_data = localStorage.getItem('qc_not_data' + sn)
+      if (qc_not_data) {
+        uData.value = JSON.parse(qc_not_data)
+      }
+      if (data && !qc_not_data) {
+        uData.value = {
+          ...data.data,
+          isSame: data.data.sameRatio > 0,
+          isNull: data.data.nullRatio > 0,
+          variableKeys: data.data.variableKeys.toString()
+        }
+        Transfer.value.setQcKeys(uData.value.variableKeys)
+        saveStorage()
+      }
+    }
+
+    onMounted(() => {
+      const data = localStorage.getItem('qc_not_data' + sn)
+      if (data) {
+        uData.value = JSON.parse(data)
+      }
+      getData()
+    })

    const test_columns = [
      { title: '', dataIndex: 'ben' },
@@ -147,12 +191,59 @@ export default {
        num4: ''
      }
    ]
-
+    const changeSame = () => {
+      debugger
+      if (uData.value.sameRatio <= 0 || !uData.value.sameRatio) {
+        uData.value.sameRatio = 70
+      }
+      saveStorage()
+    }
+    const changeNull = () => {
+      debugger
+      if (uData.value.nullRatio <= 0 || !uData.value.nullRatio) {
+        uData.value.nullRatio = 70
+      }
+      saveStorage()
+    }
+    const saveStorage = () => {
+      localStorage.setItem('qc_not_data' + sn, JSON.stringify(uData.value))
+    }
+    const onQcKeys = (value) => {
+      uData.value.variableKeys = value.toString()
+      saveStorage()
+    }
+    const clear = () => {
+      localStorage.removeItem('qc_not_data' + sn)
+      Transfer.value.clear()
+      uData.value = {
+        type: 1,
+        sameRatio: undefined,
+        isSame: false,
+        nullRatio: undefined,
+        isNull: false,
+        variableKeys: ''
+      }
+      saveStorage()
+    }
+    const handle = () => {
+      const data = nullDeal({
+        sn,
+        ...uData.value
+      })
+    }
    return {
      isShow,
      test_columns,
      test_data,
-      test_data_2
+      test_data_2,
+      uData,
+      changeSame,
+      changeNull,
+      onQcKeys,
+      saveStorage,
+      clear,
+      Transfer,
+      handle
    }
  }
 }
@@ -174,6 +265,11 @@ export default {
    margin: 22px 32px;
    padding: 0 8px;
    border-left: 4px solid #70b936;
+    display: flex;
+  }
+  .rightflex1 {
+    flex: 1;
+    text-align: right;
  }
  .flex {
    display: flex;
@@ -198,7 +294,7 @@ export default {
 }
 .rows-check {
  margin: 25px 32px 0 32px;
-  min-width: 200px;
+  min-width: 220px;
 }
 .function-content {
  margin: 14px 48px;
@@ -222,4 +318,10 @@ export default {
    color: #646464;
  }
 }
+.h100 {
+  width: 100%;
+}
+.mr-10 {
+  margin-right: 10px;
+}
 </style>