Doreen's Blog

/**
 * 浮点数运算
 * type: 1 加法,2 减法
 */
function floatAddOrMinus(type: number, arg1: string, arg2: string) {
    let len1 = 0
    let len2 = 0
    let m = 0
    let item1 = 0
    let item2 = 0;
    try {
        len1 = arg1.split(".")[1].length;
    } catch (e) {
        len1 = 0;
    }
    try {
        len2 = arg2.split(".")[1].length;
    } catch (e) {
        len2 = 0;
    }

    if (len1 > len2) {
        m = len1;
        item1 = 0;
        item2 = len1 - len2;
    } else {
        m = len2;
        item1 = len2 - len1;
        item2 = 0;
    }

    if (type === 1) {
        return (
            (Number(arg1.replace(".", "")) * 10 ** item1 +
                Number(arg2.replace(".", "")) * 10 ** item2) /
            10 ** m
        );
    } else {
        return (
            (Number(arg1.replace(".", "")) * 10 ** item1 -
                Number(arg2.replace(".", "")) * 10 ** item2) /
            10 ** m
        );
    }
}

// ...
setup(){
    let formData: IEmptyObject = reactive({
      warningUseTime: 0,
      typeName: '',
      categoryCode: '',
      categoryName: '',
      maintenanceCode: '',
      maintenanceName: '',
      model: '',
      attribute: '',
      unit: '',
      warningProductionQuantity: 0
    });

    return { formData }
}
// ...

private pickerOptionsStart = {
    disabledDate: (time: Date) => {
      return time.getTime() > Date.now();
    },
  }

private handleChangeStart() {
    this.formData.endDateStr = '';
}

private dafaulttime: string = '00:00:00-23:59:59';

private handleChangeInputDate(e: Date) {
    // 区别 同一天和下一天的时间限制
    if (this.formData.beginDateStr) {
      const begin = new EasyDate(this.formData.beginDateStr).format('dd');
      const end = new EasyDate(e).format('dd');
      if (begin === end) {
        this.dafaulttime =
          new EasyDate(this.formData.beginDateStr).format('HH:mm:ss') +
          '-23:59:59';
      } else {
        this.dafaulttime =
          '00:00:00-' +
          new EasyDate(this.formData.beginDateStr).format('HH:mm:ss');
      }
    }
  }

  private hanldeDisabledDate(time: Date) {
    // 24 * 3600 * 1000 == 8.64e7
    if (this.formData.beginDateStr) {
      const pickerMinDate = new Date(this.formData.beginDateStr).getTime();
      const maxTime = pickerMinDate + 8.64e7;
      const minTime = pickerMinDate - 8.64e7;
      return time.getTime() >= maxTime || time.getTime() <= minTime;
    } else {
      return time.getTime() > Date.now();
    }
  }

private hanldeOnPick(e: IEmptyObject) {
  if (!e.maxDate) {
    const timeRange = 8.64e7 * 31;
    this.pickDateRange.maxTime = e.minDate.getTime() + timeRange;
    this.pickDateRange.minTime = e.minDate.getTime() - timeRange;
  } else {
    this.pickDateRange.minTime = null;
    this.pickDateRange.maxTime = null;
  }
}

private hanldeDisabledDate(e: Date) {
  const pickerDate = e.getTime();
  if (this.pickDateRange.minTime && this.pickDateRange.maxTime) {
    return (
      e.getTime() <= this.pickDateRange.minTime ||
      e.getTime() >= Date.now() ||
      e.getTime() >= this.pickDateRange.maxTime
    );
  } else {
    return e.getTime() >= Date.now();
  }
}

// √ 生效
:picker-options="{
   disabledDate: (time) => hanldeDisabledDate(time),
    selectableRange: dafaulttime,
  }"

// × 不生效
:picker-options="pickerOption"

private pickerOption = {
   disabledDate: (time) => hanldeDisabledDate(time),
    selectableRange: dafaulttime,
  }

// http.ts
const instance = axios.create({
  timeout: 600000, // by huangrong
  headers: { 'Content-Type': 'application/json' },
  baseURL: '/',
  // transformResponse: (data: any) => {
  //   //
  // }
});

instance.upload = (url, data, config = {}, params) => {
  const formData = new FormData();
  data.forEach(item => {
    formData.append('file', item.value, item.name || item.filename);
  });
  if (params && Object.keys(params).length > 0) {
    for (const m in params) {
      if (params.hasOwnProperty(m)) {
        const key = m;
        const value = params[m];
        formData.append(key, value);
      }
    }
  }
  return instance.request({
    method: 'post',
    ...config,
    url,
    data: formData,
  });
};


// 请求拦截器
instance.interceptors.request.use(config => {
    const { params = {} } = config;
    config.params = { ...params, time: new Date().getTime() };
    // add token if need
    config.headers = {
      ...(config.headers || {}),
      'X-Auth-Token': CookieStorage.token,
      'X-Stargate-AppId': 25,
    };
    return config;
  }, err => {
    // show err
  }
);

// common-api.ts
export function uploadFile(path: string, file: IUploadParam[], config?: AxiosRequestConfig, params?: IEmptyObject) {
  return http.upload(path, file, config, params).then(res => {
    return Promise.resolve(res.data);
  });
}

// index.vue
 uploadFile(
        this.path,
        (this.$refs.imageUpload as any).fileList,
        {},
        {
          body: new Blob(
            [
              JSON.stringify({
                ...this.formData,
                factory: this.factory,
                workshop: this.workshop,
              }),
            ],
            { type: 'application/json' }
          ),
        }
      )

// 响应拦截器
instance.interceptors.response.use(response => {
  return Promise.resolve(response);
}, error => {
  // show error_msg and reject
  // console.log('响应失败信息', error.response);
  if (error && error.response && error.response.status) {
    let errCode = 0;
    let errMsg = '';
    if (!!error.response.data) {
      // 文件流错误处理
      if (error.response.config.responseType === 'blob') {
        const reader = new FileReader();
        reader.readAsText(error.response.data);
        reader.onload = () => {
          try {
            const { errorMsg } = JSON.parse(reader.result as string);
            errMsg = errorMsg;
            handleError(error.response.status, errMsg);
          } catch (error) {
            console.log('解析错误');
          }
        };
      } else {
        // 普通错误处理
        const { status, errorMsg } = error.response.data;
        errCode = status;
        errMsg = errorMsg;
        handleError(error.response.status, errMsg);
      }
    }
  }
  return Promise.reject(error);
});

server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://rap2api.taobao.org/app/mock/data',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      '/music-api': {
        target: 'https://api.uomg.com/api/rand.music?format=json&sort=%E7%83%AD%E6%AD%8C%E6%A6%9C',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/music-api/, '')
      },
      '/music-lyric': {
        // target:'https://api.imjad.cn/cloudmusic/?type=lyric&id=1479526505'
        target: 'https://api.imjad.cn/cloudmusic/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/music-lyric/, '')
      },
      '/one-api': {
        target: 'https://api.tianapi.com/txapi/one/index?key=7764228bedff0b2310879d47173c4603&rand=1',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/one-api/, '')
      },
      '/diary-api': {
        target: 'http://api.tianapi.com/txapi/tiangou/index?key=7764228bedff0b2310879d47173c4603',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/diary-api/, '')
      },

    },
}

import { CookieStorage } from '@/utils/cookies';
import axios, { AxiosRequestConfig } from 'axios';
import qs from 'qs';

const instance = axios.create({
  timeout: 600000,
  headers: { 'Content-Type': 'application/json' },
  baseURL: '/',
});

// 保存下载文件
function saveFile(binaryData: string, fileName: string, mime?: string) {
  const fileDownload = require('js-file-download');
  fileDownload(binaryData, fileName, mime);
}

instance.download = {
  get(url, config) {
    const { filename = 'temp', mime = '' } = config || {};
    return instance.get(url, { ...config, responseType: 'blob' }).then(res => {
      saveFile(res.data, filename, mime);
      return Promise.resolve(res);
    });
  },
  post: (url, data, config) => {
    const { filename = 'temp', mime = '' } = config || {};
    return instance.post(url, data, { ...config, responseType: 'blob' }).then(res => {
      saveFile(res.data, filename, mime);
      return Promise.resolve(res);
    });
  },
};

// ne-upload
instance.upload = (url, data, config = {}, params) => {
  const formData = new FormData();
  data.forEach(item => {
    formData.append('file', item.value, item.name || item.filename);
  });
  if (params && Object.keys(params).length > 0) {
    for (const m in params) {
      if (params.hasOwnProperty(m)) {
        const key = m;
        const value = params[m];
        formData.append(key, value);
      }
    }
  }
  return instance.request({
    method: 'post',
    ...config,
    url,
    data: formData,
  });
};

instance.formdata = (url, data, config = {}) => {
  const formData = qs.stringify(data); // 会将汉字encode
  return instance.request({
    ...config,
    url,
    data: formData,
    method: config.method || 'post',
    headers: { ...config.headers, 'Content-Type': 'application/x-www-form-urlencoded' },
  });
};

// 请求拦截器
instance.interceptors.request.use(config => {
    const { params = {} } = config;
    config.params = { ...params, time: new Date().getTime() };
    // add token if need
    config.headers = {
      ...(config.headers || {}),
      'X-Auth-Token': CookieStorage.token,
      'X-Stargate-AppId': 25,
    };
    return config;
  }, err => {
    // show err
  }
);

// 响应拦截器
instance.interceptors.response.use(response => {
    return Promise.resolve(response);
  }, error => {
    // show error_msg and reject
    console.log('响应失败信息', error.response);
    if (error && error.response && error.response.status) {
      let errCode = 0;
      let errMsg = '';
      if (!!error.response.data) {
        const { status, errorMsg } = error.response.data;
        errCode = status;
        errMsg = errorMsg;
      }
      switch (error.response.status) {
        case 400:
          window._vm.$messageSelf.error(errMsg);
          break;
        case 401:
          // to login or authorize
          window._vm.$messageSelf.error(errMsg);
          CookieStorage.clear();
          // window.location.href = '';
          break;
        case 403:
          // to login or authorize
          window._vm.$messageSelf.error(errMsg);
          CookieStorage.clear();
          window.location.href = '/';
          break;
        case 404:
          // request failed, no res on server
          window._vm.$messageSelf.error('系统错误，请稍候再试');
          break;
        case 500:
          // server error
          window._vm.$messageSelf.error(errMsg);
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default instance;

import http from '@/utils/http';

export function commonRequest(path: string, params: any = {}, method: string = 'get') {
  if (method === 'post') {
    return http.post(path, params).then(res => {
      return Promise.resolve(res.data);
    });
  } else {
    return http.get(path, { params }).then(res => {
      return Promise.resolve(res.data);
    });
  }
}

import { ref, reactive } from 'vue'
import { getData } from "../api/api";
import { toSeconds } from '../utils/time'
export async function useMusic() {

    // 随机歌曲相关信息获取
    let datas: any = await getData(2, "", {});
    let music = reactive({ value: datas.data.data });
    let music_id = ref(music.value.url.split("?id=")[1]);

    // 歌词通过歌曲id获取
    let lyric: any = await getData(3, "", {
        type: "lyric",
        id: music_id.value,
    });
    // 对歌词数据进行处理 [{text:'歌词',time:2.333 (歌词开始秒数)},...] 
    let arr = lyric.data.lrc.lyric.split('\n')
    let obj: any = reactive({ data: [] })
    arr.forEach((element: string) => {
        let key = toSeconds(element.split(']')[0].slice(1))
        let value = element.split(']')[1]
        obj.data.push({ text: value, time: key })
    });

    // 设置一个index作为歌词数据的索引
    let index = ref(0)

    return { index, obj, music }
}

export default defineComponent({
  setup: async () => {
    // 在异步组合api中，生命周期函数必须写在 数据/方法前面 
    onMounted(() => {});

    let { index,obj,music } = await useMusic();

    // 绑定audio对象
    let audio = ref(); 

    // 每条歌词数据
    let msg = obj.data && obj.data[0].text ? ref(obj.data[0].text) : ref(" ");

    // 进度条改变触发事件
    function handleMusicTimeChange() {
      if (audio.value.currentTime >= obj.data[index.value + 1].time) {
        index.value++;
      }
      msg.value = obj.data[index.value].text;
      
    }
    return {
      msg,
      index,
      obj,
      audio,
      music,
      handleMusicTimeChange,
    };
  },
});

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'  // +
import 'element-plus/lib/theme-chalk/index.css' // +

createApp(App).use(ElementPlus).mount('#app')  // .use(ElementPlus)

// 但是文档上是写的 this.$alert('...')
// 众所周知 vue3 的setup里面没有 this
// 根据 消息提示 组件的配置方法： ElMessage('...')
// 我大胆猜想了下消息弹框的使用 然后 成功了..

setup:()=>{
  // ...
  ElMessageBox.alert('...')
}

import { createRouter, createWebHistory } from 'vue-router'

const Router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('../components/HelloWorld.vue')
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('../components/Home.vue')
        },
    ]
})

export default Router

import router from './router/router'

createApp(App).use(router).mount('#app')  // .use(router)

import axios from 'axios'

axios.defaults.baseURL = '/api'
//'http://rap2api.taobao.org/app/mock/data'  不代理
axios.defaults.timeout = 10000

export function get(url: string, params: any) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then((res) => {
            resolve(res)
        }).catch((err) => {
            reject(err)
        })
    })
}

import { get } from './http'
export const getData = (url: string, params: any) => get(url, params)

// ...
server: {
    host: '10.9.37.4',
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://rap2api.taobao.org/app/mock/data', // 目标接口域名
        changeOrigin: true,
        secure: false,  // 是否是https
        ws: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 重新接口地址
      }
    }

  }

// child component
setup: async () => {
        let datas: any = await getData('/1531382', { scope: 'response' })
        
        let color = reactive(JSON.parse(JSON.stringify(datas.data.data.color)))
        return { color }
    }

// App.vue
<template>
  <suspense>
    <router-view></router-view>
  </suspense>
</template>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  alias: {
    '@': path.join(__dirname, 'src')  // 配置用@来代表src目录
  },
  // 服务器相关配置
  server: {
    port: 8080,
    host: '0.0.0.0',
    open: true, // 是否自动开启浏览器
  },
})