vue3+vite2模板

package.json

@@ -6,7 +6,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.0.5"
+    "axios": "^0.21.1",
+    "sass": "^1.35.1",
+    "vue": "^3.0.5",
+    "vue-i18n": "^9.1.6",
+    "vue-router": "^4.0.10",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.3",

src/App.vue

 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <HelloWorld msg="Hello Vue 3 + Vite" />
+  <router-view></router-view>
 </template>
 
 <script setup>

src/components/HelloWorld.vue

@@ -24,6 +24,24 @@ defineProps({
 })
 
 const state = reactive({ count: 0 })
+
+// /shzl/api/v1/party/personnel
+</script>
+<script>
+import axios from 'axios';
+export default {
+  data(){
+   return{
+
+   } 
+  },
+  created(){
+    // console.log(this.$store.state.name);
+    axios.get(`/shzl/api/v1/party/personnel`).then(res=>{
+      console.log(res);
+    })
+  }
+}
 </script>
 
 <style scoped>
@@ -31,3 +49,9 @@ a {
   color: #42b983;
 }
 </style>
+
+<style lang="scss" scoped>
+  div{
+    color:#fff;
+  }
+</style>

src/i18n/i18n.js

+import {createI18n} from 'vue-i18n'
+import lang from './index'
+
+const i18n = createI18n({
+    locale:localStorage.lang||'cn',
+    message:lang
+})
+
+export default i18n
\ No newline at end of file

src/i18n/index.js

+import en from './language-en'
+import zh from './language-zh'
+
+export default {
+    en,
+    zh,
+}
\ No newline at end of file

src/i18n/language-en.js

+const en = {
+}
+
+export default en
\ No newline at end of file

src/i18n/language-zh.js

+const zh = {
+    serviceshop:"服务超市",
+    compute:"算力产品服务",
+    safety:"安全产品服务",
+    data:"数据产品服务",
+    cloud:"网络产品服务",
+    solution:"解决方案服务",
+    servicemanagge:"服务管理",
+}
+
+export default zh
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import router from './router'
+
+import store from '@/store';
+
+import api from '@/request/api.js'
+
+import i18n from './i18n/i18n'
+
+const createVue = createApp(App)
+
+createVue.config.globalProperties.$api = api
+
+createVue.use(store).use(api).use(router).use(i18n).mount('#app')
+

src/pages/index.vue

+<template>
+    <div>
+        index
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    components: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+        console.log(this.$api.shzl.part_person_all);
+        console.log(11);
+        this.$api.shzl.part_person_all().then(res=>{
+            console.log(res);
+        })
+        
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

src/request/api.js

+// 容器服务
+import common from '@/request/api/common';
+import mapChart from '@/request/api/mapChart';
+import shzl from './api/shzl';
+
+export default {
+    common,
+    mapChart,
+    shzl
+}
\ No newline at end of file

src/request/api/common.js

+import axios from '@/request/http'; // 导入http中创建的axios实例
+
+
+const servicemanager = {
+    servicetypeinit(urlParams) {
+        return axios.get(`/yth/api/v1/service/type?type=${urlParams.name}`);
+    },
+    namecheck(name){
+        return axios.get(`/yth/api/v1/service/check?name=${name}`);
+    },  
+    servicetypelist(urlParams) {
+        return axios.get(`/yth/api/v1/service/home?id=${urlParams.id}`);
+    },
+}
+
+export default servicemanager;
\ No newline at end of file

src/request/api/mapChart.js

+import axios from '@/request/http'; // 导入http中创建的axios实例
+
+
+const mapChart = {
+    getChangzhouMap ()
+    {
+        return axios.get(`/shzl/ui/static/data/changzhou.json`);
+    },
+    exponential ()
+    {
+        return axios.get(`/shzl/api/v1/risk/exponential`);
+    },
+    eventstatistics ()
+    {
+        return axios.get(`/shzl/api/v1/focus/event/statistics`);
+    }
+}
+
+export default mapChart;
\ No newline at end of file

src/request/api/shzl.js

+import axios from '@/request/http'; // 导入http中创建的axios实例
+
+
+let shzl = {
+    part_all(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    part_person_all(){
+        return axios.get(`/shzl/api/v1/party/personnel`);
+    },
+    part_build(){
+        return axios.get(`/shzl/api/v1/party/construction`);
+    },
+    person_all(){
+        return axios.get(`/shzl/api/v1/population/situation`);
+    },
+    look_person(){
+        return axios.get(`/shzl/api/v1/population/caring`);
+    },
+    look_event(type){
+        return axios.get(`/shzl/api/v1/focus/event`,{
+            params:{
+                type:type
+            }
+        });
+    },
+    get_risk_list(){
+        return axios.get(`/shzl/api/v1/risk/list`);
+    },
+    get_financial(){
+        return axios.get(`/shzl/api/v1/finance/crime`);
+    },
+    get_financial_word(){
+        return axios.get(`/shzl/api/v1/finance/wordcloud`);
+    },
+    get_financial_bar(){
+        return axios.get(`/shzl/api/v1/finance/crime_type`);
+    },
+    get_ly_all(){
+        return axios.get(`/shzl/api/v1/travel/complaints`);
+    },
+    get_jq_now(){
+        return axios.get(`/shzl/api/v1/travel/passenger`);
+    },
+    get_yl_now(){
+        return axios.get(`/shzl/api/v1/medical/complaints`);
+    },
+    get_jt_data(){
+        return axios.get(`/shzl/api/v1/traffic/accident`);
+    },
+    get_weather(){
+        return axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=常州`);
+    }
+    
+}
+
+export default shzl;
\ No newline at end of file

src/request/api/ypfx.js

+import axios from '@/request/http'; // 导入http中创建的axios实例
+
+
+let ypfx = {
+    //预警概况
+    yjgk(){
+        return axios.get(``);
+    },
+    //预警等级分析
+    yjdjfx(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    //预警区域分布
+    yjqyfb(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    //预警处理占比
+    yjclzb(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    //预警趋势分析
+    yjqsfx(type){
+        return axios.get(`/shzl/api/v1/focus/event`,{
+            params:{
+                type:type
+            }
+        });
+    },
+    //预警转事件占比
+    yjzsjzb(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    //预警风险排名
+    yjfxpm(){
+
+    },
+    //预警类型占比
+    yjlxzb(){
+        return axios.get(`/shzl/api/v1/population/caring`);
+    },
+    //预警转化率
+    yyjzhl(){
+        return axios.get(`/shzl/api/v1/party/org`);
+    },
+    //转事件处置状态统计
+    zsjczzttj(){
+
+    },
+}
+
+export default ypfx;
\ No newline at end of file

src/request/http.js

+/**
+ * axios封装
+ * 请求拦截、响应拦截、错误统一处理
+ */
+import axios from 'axios';
+import router from '../router';
+import store from '../store/index';
+
+function getCookie(name) {
+    var strCookie = document.cookie;
+    var arrCookie = strCookie.split("; ");
+    for (var i = 0; i < arrCookie.length; i++) {
+        var arr = arrCookie[i].split("=");
+        if (arr[0] == name) return arr[1];
+    }
+    return "";
+}
+
+const tip = msg => {
+    console.log(msg)
+}
+
+/** 
+ * 跳转登录页
+ * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
+ */
+// const toLogin = () => {
+//     router.replace({
+//         path: '/awecloud/login/#/',
+//         query: {
+//             redirect: router.currentRoute.fullPath
+//         }
+//     });
+// }
+
+/** 
+ * 请求失败后的错误统一处理 
+ * @param {Number} status 请求失败的状态码
+ */
+const errorHandle = (status, other) => {
+    // 状态码判断
+    switch (status) {
+        case 400: tip('请求错误(400)'); break;
+        // 401: 未登录状态，跳转登录页
+        case 401:
+            // toLogin();
+            break;
+        // 403 token过期
+        // 清除token并跳转登录页
+        case 403:
+            tip('登录过期，请重新登录');
+            localStorage.removeItem('token');
+            store.commit('loginSuccess', null);
+            setTimeout(() => {
+                // toLogin();
+            }, 1000);
+            break;
+        case 404: tip('请求的资源不存在'); break;
+        case 408: tip('请求超时(408)');
+        case 500: tip('服务器错误(500)');
+        case 501: tip('服务未实现(501)');
+        case 502: tip('网络错误(502)');
+        case 503: tip('服务不可用(503)');
+        case 504: tip('网络超时(504)');
+        case 505: tip('HTTP版本不受支持(505)');
+        default: tip(`连接出错,${other}`);
+    }
+}
+
+// 创建axios实例
+var instance = axios.create({ timeout: 1000 * 12 });
+// 设置post请求头
+instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+/** 
+ * 请求拦截器 
+ * 每次请求前，如果存在token则在请求头中携带token 
+ */
+instance.interceptors.request.use(
+    config => {
+        // const token = store.state.token;
+        // var token = 'Basic cm9vdA%3D%3D'
+        // token && (config.headers.Authorization = token);
+        // const token = store.state.token;
+        // var token = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZXh0IjoibGltaW5nZSIsInR5cGUiOiJ1c2VyIn0.YUPQ-3nttgfRGOUV4T06JZ6osH46nZ0UUolYdEBhvSQ'
+        // token && (config.headers.Authorization = token);
+
+        // if(config.headers.Authorization!="headers"){
+        //     const token = process.env.DRONE_TOKEN ? process.env.DRONE_TOKEN : Conf.token;
+        //     var Authorization = `Bearer ${token}`
+        //     token && (config.headers.Authorization = Authorization);
+        // }else{
+        // config.headers.Authorization = '';
+        // }
+        return config;
+    },
+    error => Promise.error(error))
+
+// 响应拦截器
+instance.interceptors.response.use(
+    // 请求成功
+    res => res.status === 200|| res.status === 201? Promise.resolve(res) : Promise.reject(res),
+    // 请求失败
+    error => {
+        const { response } = error;
+        if (response) {
+            // 请求已发出，但是不在2xx的范围 
+            errorHandle(response.status, response.data.errmessage);
+            return Promise.reject(response);
+        }
+    });
+
+export default instance;

src/router/index.js

+import {createRouter, createWebHashHistory} from "vue-router";
+
+
+
+const routes = [
+  {
+    path: '/',  //path  链接路径
+    name: 'index',  // 路由名称
+    component: () => import("@/pages/index.vue"), //映射组件
+  },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+});
+
+
+export default router

src/services/helper.js

+module.exports.timestamp = function(timestamp) {
+  // 获取当前时间戳（毫秒）(new Date()).getTime()
+  // 毫秒->秒 /1000
+  let date = Math.floor(new Date().getTime() / 1000);
+  let time = date - timestamp;
+  if (time == 0) {
+    return 0;
+  } else if (time < 60) {
+    return time + "秒";
+  } else if (time / 60 < 60) {
+    return Math.round(time / 60) + "分钟前";
+  } else if (time / 60 / 60 < 24) {
+    return Math.round(time / 60 / 60) + "小时前";
+  } else if (time / 60 / 60 / 24 < 24) {
+    return Math.round(time / 60 / 60 / 24) + "天前";
+  } else if (time / 60 / 60 / 24 / 7 < 7) {
+    return Math.round(time / 60 / 60 / 24) + "周前";
+  }
+};
+module.exports.enqueuedtimes = function(finishedtime, starttime) {
+  let time = finishedtime - starttime;
+  if (time < 60 && time > 0) {
+    return time + "秒";
+  } else if (time / 60 < 60 && time > 0) {
+    return parseInt(time / 60) + "分钟" + (time % 60) + "秒";
+  } else if (time < 0) {
+    return "--";
+  }
+};
+module.exports.yuntimes = function(finishedtime, starttime) {
+  if (!finishedtime || !starttime) {
+    return "00:00";
+  }
+  let time = finishedtime - starttime;
+  var str = "";
+  if (time < 60 && time > 0) {
+    str += "00:";
+    if (time < 10) {
+      str += "0" + time;
+    } else {
+      str += time;
+    }
+  } else {
+    var minute = parseInt(time / 60);
+    var seconds = time % 60;
+    console.log("m==>", minute, "| s==>", seconds);
+    if (minute < 10) {
+      str += "0" + minute;
+    } else {
+      str += minute;
+    }
+    str += ":";
+    if (seconds < 10) {
+      str += "0" + seconds;
+    } else {
+      str += seconds;
+    }
+  }
+  return str;
+};
+module.exports.dateFormat = function(fmt, timestamp) {
+  let date = new Date(timestamp);
+  let ret;
+  const opt = {
+    "Y+": date.getFullYear().toString(), // 年
+    "m+": (date.getMonth() + 1).toString(), // 月
+    "d+": date.getDate().toString(), // 日
+    "H+": date.getHours().toString(), // 时
+    "M+": date.getMinutes().toString(), // 分
+    "S+": date.getSeconds().toString() // 秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  };
+  for (let k in opt) {
+    ret = new RegExp("(" + k + ")").exec(fmt);
+    if (ret) {
+      fmt = fmt.replace(
+        ret[1],
+        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
+      );
+    }
+  }
+  return fmt;
+};
+module.exports.GetProperty = function(obj, prop) {
+  if (!obj) return null;
+  let res = obj;
+  if (prop) {
+    let props = prop.split(".");
+    for (let i = 0; i < props.length; i++) {
+      res = res[props[i]];
+      if (typeof res == "undefined" || res == null) {
+        return null;
+      }
+    }
+  }
+  return res;
+};
+
+module.exports.GetTimeDifference = function(stop_date) {
+  let nowdate = new Date();
+  let stoopdate = new Date(stop_date);
+  return nowdate > stoopdate;
+};
+
+module.exports.dateStringTransform = function(date) {
+  /* 
+    input: 2020-06-12T16:38:11+08:00
+    output: 2020-06-12 16:38:11
+  */
+  if (String(date).indexOf("T") != -1) {
+    let arr = date.split("T");
+    let t = arr[1];
+    let tarr = t.split(".000");
+    let marr = tarr[0].split(":");
+    let h =
+      parseInt(marr[0]) >= 10 ? parseInt(marr[0]) : "0" + parseInt(marr[0]);
+    let m =
+      parseInt(marr[1]) >= 10 ? parseInt(marr[1]) : "0" + parseInt(marr[1]);
+    let s =
+      parseInt(marr[2]) >= 10 ? parseInt(marr[2]) : "0" + parseInt(marr[2]);
+    let dd = arr[0] + " " + h + ":" + m + ":" + s;
+    return dd;
+  } else {
+    return date;
+  }
+};
+
+module.exports.getLangDate = function(date) {
+  var dateObj = new Date(date); //表示当前系统时间的Date对象
+  var year = dateObj.getFullYear(); //当前系统时间的完整年份值
+  var month = dateObj.getMonth() + 1; //当前系统时间的月份值
+  var date = dateObj.getDate(); //当前系统时间的月份中的日
+  var day = dateObj.getDay(); //当前系统时间中的星期值
+  var weeks = [
+    "星期日",
+    "星期一",
+    "星期二",
+    "星期三",
+    "星期四",
+    "星期五",
+    "星期六"
+  ];
+  var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
+  var hour = dateObj.getHours(); //当前系统时间的小时值
+  var minute = dateObj.getMinutes(); //当前系统时间的分钟值
+  var second = dateObj.getSeconds(); //当前系统时间的秒钟值
+  //如果月、日、小时、分、秒的值小于10，在前面补0
+  if (month < 10) {
+    month = "0" + month;
+  }
+  if (date < 10) {
+    date = "0" + date;
+  }
+  if (hour < 10) {
+    hour = "0" + hour;
+  }
+  if (minute < 10) {
+    minute = "0" + minute;
+  }
+  var newDate =
+    year +
+    "年" +
+    month +
+    "月" +
+    date +
+    "日  " +
+    week
+  var newTime = hour +":" +minute
+    
+
+    return [newDate,newTime]
+};

src/services/index.js

+
+module.exports = {
+  "event": "/sjgl/api/events",
+};
\ No newline at end of file

src/services/routeblocking.js

+
+// 取得cookie
+function getCookie(name) {
+    var nameEQ = name + '='
+    var ca = document.cookie.split(';') // 把cookie分割成组
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i] // 取得字符串
+      while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
+        c = c.substring(1, c.length) // 有的话，从第二位开始取
+      }
+      if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
+        return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
+      }
+    }
+    return false
+  }
+
+  // 清除cookie
+function clearCookie(name) {
+    setCookie(name, "", -1);
+}
+
+// 设置cookie
+function setCookie(name, value, seconds) {
+    seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
+    var expires = "";
+    if (seconds != 0 ) {      //设置cookie生存时间
+      var date = new Date();
+      date.setTime(date.getTime()+(seconds*1000));
+      expires = "; expires="+date.toGMTString();
+    }
+    document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
+  }
+
+
+export {
+    getCookie,
+    clearCookie,
+    setCookie,
+}

src/store/index.js

+import {createStore} from 'vuex'
+
+
+const store = createStore({
+  state: {
+    name: "",
+    userInfo: {},
+    userType:"",
+    pid:null
+  },
+  mutations: {
+    change(state, name) {
+      state.name = name;
+    },
+    changeUserInfo(state, value) {
+      state.userInfo = value;
+      state.userType = value.user_type;
+    },
+    getPid(state, id) {
+      state.pid = id;
+    },
+  }
+});
+export default store;
+

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// https://vitejs.dev/config/
+const path = require('path')
+console.log(__dirname);
+
+function resolve_path (dir) {
+  return path.join(__dirname, './', dir)
+}
+
+
 export default defineConfig({
   plugins: [vue()],
   base:'./',
+  clearScreen:false,
+  resolve:{
+    alias:{
+      '@':resolve_path('src'),
+    }
+  },
+  server:{
+    proxy:{
+      '/shzl/api': {
+        target: 'https://sjgl.wodcloud.com/shzl/api',  // 接口域名
+        changeOrigin: true,  // 是否跨域
+        rewrite: (path) => path.replace('/shzl/api', ''),
+      },
+    }
+  },
   build:{
     outDir:'dist/zjhl',
     assetsDir:'static'