feat:新增深拷贝方法

CHANGELOG.md

+## 2022-11-22
+
+- 新增方法深拷贝
+- 文件上传组件优化
+
 ## 2022-11-21
 
 - i18n 学习

src/boot/vue-i18n.ts

@@ -8,6 +8,8 @@ export default boot(({ app }) => {
     // something vue-i18n options here ...
     legacy: false, // you must set `false`, to use Composition API
     locale: 'zh-CN', // set current locale
+    // missingWarn: false,
+    // fallbackWarn: false,
     messages,
   });
 

src/common/utils/index.ts

@@ -7,6 +7,7 @@ export * from './del-empty-objkey';
 export * from './json-str';
 export * from './isEmpty';
 export * from './maths';
+export * from './myCloneDeep';
 export {
   cloneDeep,
   orderBy,

src/common/utils/isEmpty.ts

 export const isEmpty = function (data: any) {
   if (data === '' || data === null || data === undefined) {
     return true;
-  } else {
+  }
+  // [] {} 0 false/true
+  else {
     const typeofs = Object.prototype.toString.call(data);
+    // 数组
     if (typeofs === '[object Array]') {
       if (data.length > 0) {
         return false;
       } else {
         return true;
       }
-    } else {
+    }
+    // 对象
+    else if (typeofs === '[object Object]') {
       if (Object.keys(data).length > 0) {
         return false;
       } else {
         return true;
       }
+    } else {
+      // 不为空
+      return false;
     }
   }
 };

src/common/utils/myCloneDeep.ts

+/**
+ * 对象深拷贝
+ * @param data - 要拷贝的对象
+ **/
+export const objCloneDeep = function (data: any) {
+  const newObj: any = {};
+  for (const key in data) {
+    const item = data[key];
+    const typeofs = Object.prototype.toString.call(item);
+    console.log(typeofs, item);
+
+    // 如果是对象
+    if (typeofs === '[object Object]') {
+      newObj[key] = objCloneDeep(item);
+    }
+    // 如果是数组
+    else if (typeofs === '[object Array]') {
+      newObj[key] = arrCloneDeep(item);
+    } else {
+      newObj[key] = item;
+    }
+  }
+  return newObj;
+};
+
+/**
+ * 数组深拷贝
+ * @param data - 要拷贝的数组
+ **/
+export const arrCloneDeep = function (data: any[]) {
+  const newArr: any = [];
+
+  for (const item of data) {
+    const typeofs = Object.prototype.toString.call(item);
+    // 如果是对象
+    if (typeofs === '[object Object]') {
+      newArr.push(objCloneDeep(item));
+    }
+    // 如果是数组
+    else if (typeofs === '[object Array]') {
+      newArr.push(arrCloneDeep(item));
+    } else {
+      newArr.push(item);
+    }
+  }
+
+  return newArr;
+};
+
+/**
+ * 深拷贝
+ * @param data - 要拷贝的data
+ **/
+export const myCloneDeep = function (data: any) {
+  const typeofs = Object.prototype.toString.call(data);
+  // 如果是对象
+  if (typeofs === '[object Object]') {
+    return objCloneDeep(data);
+  }
+  // 如果是数组
+  else if (typeofs === '[object Array]') {
+    return arrCloneDeep(data);
+  } else {
+    return data;
+  }
+};

src/components/uploader-page/UpLoader.vue

@@ -32,7 +32,7 @@ const emit = defineEmits<{
 const darkDeep = '#222831';
 const darkLight = '#393E46';
 
-const imageTypeList = ['png', 'jpg', 'gif'];
+const imageTypeList = ['png', 'jpg', 'gif', 'svg'];
 const excelTypeList = ['xlsx', 'xls'];
 const otherTypeList = ['pdf'];
 
@@ -151,6 +151,14 @@ function removeAll() {
   state.fileList = [];
 }
 
+function Ok() {
+  let list = [];
+  for (const item of state.fileList) {
+    list.push(item);
+  }
+  emit('onOk', list);
+}
+
 // 预览
 function onView(data: any) {
   if (excelTypeList.includes(data.fileType)) {
@@ -207,7 +215,7 @@ function closeViewDialog() {
             backgroundColor: props.dark ? props.bgColor : '#fff',
             color: props.dark ? darkLight : props.bgColor,
           }"
-          @click="emit('onOk', state.fileList)"
+          @click="Ok"
         />
         <q-btn
           v-if="state.fileList.length > 0"

src/modules/page6/element/table-study/TableStudy.vue

@@ -11,7 +11,10 @@ import ICON from 'src/config/icons';
 import { read, utils, writeFile } from 'xlsx';
 // var XLSX = require('xlsx');
 
-const { t } = useI18n();
+import lang from '../../lang';
+console.log('lang >>>>', lang);
+
+const { t } = useI18n({});
 const { warn } = useMessage();
 
 const excelTypeList = ['xlsx', 'xls'];
@@ -210,7 +213,7 @@ function exportTableData() {
 
       <div>
         <q-btn
-          :label="t('hello')"
+          :label="t('hello1')"
           square
           push
           style="background: #4aacc5; color: white"
@@ -231,7 +234,8 @@ function exportTableData() {
     </div>
     <div class="upload-box">
       <div style="width: 400px; height: 232px" class="q-my-md">
-        <com-up-loader bg-color="#FAD4D4" dark multiple @on-ok="uploadOk" />
+        <!-- FAD4D4 -->
+        <com-up-loader bg-color="#d9d9f3" dark multiple @on-ok="uploadOk" />
       </div>
       <div style="width: 400px; height: 232px" class="q-my-md">
         <com-up-loader bg-color="#A4BE7B" multiple @on-ok="uploadOk" />

src/modules/page6/lang/en-US.ts

+export default {
+  hello: 'hello',
+};

src/modules/page6/lang/index.ts

+import zhCN from './zh-CN';
+import zhTW from './zh-TW';
+import enUS from './en-US';
+import ja from './ja';
+
+export default {
+  'zh-CN': zhCN,
+  'zh-TW': zhTW,
+  'en-US': enUS,
+  ja: ja,
+};

src/modules/page6/lang/ja.ts

+export default {
+  hello: 'こんにちは',
+};

src/modules/page6/lang/zh-CN.ts

+export default {
+  hello: '你好',
+};

src/modules/page6/lang/zh-TW.ts

+export default {
+  hello: '你好',
+};

src/modules/page7/IndexPage.vue

@@ -8,6 +8,13 @@ export default {
 </script>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import {
+  X_DATA,
+  LOCAL_INFECTED,
+  PROVINCE_INNER_INFECTED,
+  PROVINCE_OUT_INFECTED,
+  OFFSHORE_INPUT_INFECTED,
+} from './config';
 import * as echarts from 'echarts';
 type EChartsOption = echarts.EChartsOption;
 
@@ -16,6 +23,10 @@ const chartMainRef = ref<any>(null);
 
 onMounted(() => {
   initDom();
+
+  let abc = false;
+  let type = Object.prototype.toString.call(abc);
+  console.log(type);
 });
 
 function initDom() {
@@ -31,6 +42,7 @@ function initDom() {
         '外省来（返）蓉感染者',
         '境外输入感染者',
       ],
+      show: false,
     },
     grid: {
       left: '3%',
@@ -42,21 +54,7 @@ function initDom() {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: [
-        '2022-11-08',
-        '2022-11-09',
-        '2022-11-10',
-        '2022-11-11',
-        '2022-11-12',
-        '2022-11-13',
-        '2022-11-14',
-        '2022-11-15',
-        '2022-11-16',
-        '2022-11-17',
-        '2022-11-18',
-        '2022-11-19',
-        '2022-11-20',
-      ],
+      data: X_DATA,
     },
     yAxis: {
       type: 'value',
@@ -65,7 +63,7 @@ function initDom() {
       {
         name: '本土感染者',
         type: 'line',
-        data: [30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316],
+        data: LOCAL_INFECTED,
         itemStyle: {
           color: '#E8110F',
         },
@@ -73,7 +71,7 @@ function initDom() {
       {
         name: '省内感染者',
         type: 'line',
-        data: [16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280],
+        data: PROVINCE_INNER_INFECTED,
         itemStyle: {
           color: '#FBC723',
         },
@@ -81,7 +79,7 @@ function initDom() {
       {
         name: '外省来（返）蓉感染者',
         type: 'line',
-        data: [14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36],
+        data: PROVINCE_OUT_INFECTED,
         itemStyle: {
           color: '#1B6AA5',
         },
@@ -90,7 +88,7 @@ function initDom() {
       {
         name: '境外输入感染者',
         type: 'line',
-        data: [7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20],
+        data: OFFSHORE_INPUT_INFECTED,
         itemStyle: {
           color: '#333333',
         },
@@ -103,22 +101,75 @@ function initDom() {
 </script>
 <template>
   <div>
-    <div>成都市新冠疫情单日新增情况</div>
+    <div class="title">
+      成都市新冠疫情 {{ X_DATA[X_DATA.length - 1] }} 新增情况
+    </div>
+    <div class="single-box">
+      <div class="single" style="color: #e8110f">
+        <div class="single-label">本土感染者</div>
+        <div class="single-value">
+          + {{ LOCAL_INFECTED[LOCAL_INFECTED.length - 1] }}
+        </div>
+      </div>
+      <div class="single" style="color: #fbc723">
+        <div class="single-label">省内感染者</div>
+        <div class="single-value">
+          + {{ PROVINCE_INNER_INFECTED[PROVINCE_INNER_INFECTED.length - 1] }}
+        </div>
+      </div>
+      <div class="single" style="color: #1b6aa5">
+        <div class="single-label">外省来（返）蓉感染者</div>
+        <div class="single-value">
+          + {{ PROVINCE_OUT_INFECTED[PROVINCE_OUT_INFECTED.length - 1] }}
+        </div>
+      </div>
+      <div class="single" style="color: #333333">
+        <div class="single-label">境外输入感染者</div>
+        <div class="single-value">
+          + {{ OFFSHORE_INPUT_INFECTED[OFFSHORE_INPUT_INFECTED.length - 1] }}
+        </div>
+      </div>
+    </div>
     <div class="content">
       <div
         class="chart-main"
         ref="chartMainRef"
-        style="width: 1200px; height: 700px"
+        style="width: 1400px; height: 700px"
       ></div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.title {
+  text-align: center;
+  margin: $padding-md auto;
+  font-size: 26px;
+  color: #414141;
+}
 .content {
   display: flex;
   justify-content: center;
 }
-.chart-main {
+.single-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: $padding-md;
+  margin-bottom: 0;
+}
+.single {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 14px;
+  .single-label {
+    font-size: 12px;
+  }
+  .single-value {
+    font-size: 20px;
+  }
 }
 </style>

src/modules/page7/config.ts

+export const X_DATA = [
+  '2022-11-08',
+  '2022-11-09',
+  '2022-11-10',
+  '2022-11-11',
+  '2022-11-12',
+  '2022-11-13',
+  '2022-11-14',
+  '2022-11-15',
+  '2022-11-16',
+  '2022-11-17',
+  '2022-11-18',
+  '2022-11-19',
+  '2022-11-20',
+  '2022-11-21',
+];
+
+// 本土感染者
+export const LOCAL_INFECTED = [
+  30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316, 383,
+];
+
+// 省感染者
+export const PROVINCE_INNER_INFECTED = [
+  16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280, 346,
+];
+
+// 外省来（返）蓉感染者
+export const PROVINCE_OUT_INFECTED = [
+  14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36, 37,
+];
+
+// 境外输入感染者
+export const OFFSHORE_INPUT_INFECTED = [
+  7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20, 8,
+];