Skip to content

V
vue3portal
Commit 01177aa1 authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent b6935922
Hide whitespace changes
Inline Side-by-side
Showing with 106865 additions and 102 deletions
public/static/maps/nanjingCN.json
View file @ 01177aa1
This source diff could not be displayed because it is too large. You can view the blob instead.
public/static/maps/shenyangCN.json
View file @ 01177aa1
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/request.js
View file @ 01177aa1
import axios from 'axios'
const envMode=process.env.NODE_ENV;
const publicUrl=envMode=='development'?'/':"/api"
/*
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-16 13:43:53
* @FilePath: /vue3portal/src/api/request.js
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
*/
import axios from "axios";
const envMode = process.env.NODE_ENV;
const publicUrl = envMode == "development" ? "/vstp" : "/vstp";
/**
* 封装请求
* 封装请求
* @param：{method} String 请求类型，必填
* @param：{url} String 请求地址，必填
* @param：{params} Object 参数参数，非必填
* @returns：Promise {<pending>}
**/
export const http = (method, url, params = {},loading) => {
return new Promise(function(resolve, reject) {
export const http = (method, url, params = {}, loading) => {
return new Promise(function (resolve, reject) {
axios({
method: method,
url: publicUrl+url,
headers: {
'Content-Type': 'application/json',
},
data: params,
method: method,
url: publicUrl + url,
headers: {
"Content-Type": "application/json",
},
data: params,
})
.then(res => {
if(res.status==200){
// if(!res.data.success){
// // showMessage(res.data.errorMessage, "error")
// }else{
// }
resolve(res.data);
}else{
console.error('axiosThen',res)
reject(res);
.then((res) => {
if (res.status == 200) {
// if(!res.data.success){
// // showMessage(res.data.errorMessage, "error")
// }else{
// }
resolve(res.data);
} else {
console.error("axiosThen", res);
reject(res);
}
})
.catch(err => {
console.error('axiosCatch',err);
})
.catch((err) => {
console.error("axiosCatch", err);
reject(err);
// ElMessage({ message: "提交失败", showClose: true, center: true, duration: 2000, type:'error' });
// !loadingDisable&&hideLoading()
})
})
});
});
};
//封装fetch
export const fetchLocl = async(method, url, params)=>{
export const fetchLocl = async (method, url, params) => {
var opts = {
method,
method,
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/x-www-form-urlencoded',
// },
};
if (method == "post") {
opts.body = { params };
}
if(method=='post'){ opts.body={params} }
return await fetch(url,opts).then((res) => {
return await fetch(url, opts).then((res) => {
return res.json();
})
});
// .then((res) => { return res; })
// .catch((error) => { console.error(error) })
}
\ No newline at end of file
};
src/viewsCN/dashboardC/layout.vue
View file @ 01177aa1
<!--
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-16 11:24:18
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-16 17:07:28
* @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
import echartBarHorizScroll from "./portlet/echart-barHorizScroll.vue";
import echartPie from "./portlet/echart-pie.vue";
......@@ -6,14 +16,9 @@ import echartMap from "./portlet/echart-map.vue";
import echartSunburst from "./portlet/echart-sunburst.vue";
import echartHill from "./portlet/echarts-hill-group/echart-hill.vue";
import echartBar from "./portlet/echart-bar.vue";
import echartLine from "./portlet/echart-line.vue";
import counterGrid from "./portlet/counter-grid.vue";
import echartBarHoriz from "./portlet/echart-barHoriz.vue";
import { fetchLocl } from "@/api/request";
console.log(fetchLocl);
const comps = {
echartMap,
......@@ -23,11 +28,11 @@ const comps = {
echartSunburst,
echartHill,
echartBar,
echartBarHoriz,
echartLine,
counterGrid,
};
const state = reactive({
systemTitleConfig: {
width: 1000,
......@@ -117,8 +122,6 @@ const state = reactive({
});
const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
onMounted(() => {});
</script>
<template>
<div class="screen1080C">
......
src/viewsCN/dashboardC/portlet/echart-map.vue
View file @ 01177aa1
<script setup>
import { $c } from "ayin-color";
const { proxy } = getCtx();
import symbol from "./map/symbol.json";
import counter from "./map/map-counter.vue";
import { httpGetMap } from "@/api/api.js";
const state = reactive({
map: {},
colors: {
......@@ -435,7 +437,6 @@ const processMapData = (current) => {
coordinateSystem: "geo",
symbolOffset: [0, -10],
label: { show: false },
itemStyle: {
color: {
type: "radial",
......@@ -478,6 +479,7 @@ onMounted(() => {
.mapC-wrap {
.poa;
.fullbox;
.full-map {
.poa;
.fullbox;
......
src/viewsCN/dashboardC/portlet/map/map-counter.vue
View file @ 01177aa1
<template>
<div class="map-counter-alt-wrap">
<div class="counter-item" v-for="(item,index) in state.counterList">
<i :class="'icon '+item.icon"></i>
<div class="name">{{item.name}} <span class="unit">({{item.unit}})</span></div>
<div class="counter-item" v-for="(item, index) in state.counterList">
<i :class="'icon ' + item.icon"></i>
<div class="name">
{{ item.name }} <span class="unit">({{ item.unit }})</span>
</div>
<div class="content">
<span class="num">
<DigitalTransform class="num" :value="item.num" :useGrouping="true" :interval="2000"></DigitalTransform>
<span class="plus" v-if="item.plus">+{{item.plus}}</span>
<DigitalTransform
class="num"
:value="item.num"
:useGrouping="true"
:interval="2000"
></DigitalTransform>
<span class="plus" v-if="item.plus">+{{ item.plus }}</span>
</span>
</div>
</div>
</div>
</template>
<script setup>
import { http } from "@/api/request";
const state = reactive({
counterList: [
{
name: "软件销售额",
icon: "i carbon:ibm-z-cloud-mod-stack",
num: 13694,
unit: "元",
plus: 218,
},
{ name: "硬件销售额", icon: "i carbon:chip", num: 14558, unit: "元" },
{
name: "技术服务",
icon: "i carbon:user-speaker",
num: 3962,
unit: "元",
plus: 462,
},
{
name: "安全服务",
icon: "i carbon:rule",
num: 5302,
unit: "元",
plus: 775,
},
],
});
onMounted(() => {
http("POST", "/index/statistics/total", {}).then((res) => {
const iconlist = [
"carbon:ibm-z-cloud-mod-stack",
"carbon:chip",
"carbon:user-speaker",
"carbon:user",
"carbon:carbon",
"carbon:carbon-ui-builder",
"carbon:airline-manage-gates",
"carbon:chat"
]?.map(it=>{
return "i "+it
})
const state=reactive({
counterList:[
{name:"软件销售额",icon:"i carbon:ibm-z-cloud-mod-stack",num:13694,unit:"元",plus:218},
{name:"硬件销售额",icon:"i carbon:chip",num:14558,unit:"元"},
{name:"技术服务",icon:"i carbon:user-speaker",num:3962,unit:"元",plus:462},
{name:"安全服务",icon:"i carbon:rule",num:5302,unit:"元",plus:775},
]
})
state.counterList = res?.data?.dataList?.map((it, i) => {
return {
name: it?.label,
icon: iconlist[i],
num: it?.value,
unit: it?.unit,
};
});
});
});
</script>
<style lang="less">
.mapC-wrap{
.map-counter-alt-wrap{.poa; left:50%; .fixc("x"); bottom:70px; z-index: 10;
.counter-item{.bdl(@blA15,3px); .bdFilter; .bgc(fade(@blA17,70%)); width: 210px; display:inline-block; height: 80px; margin:0 20px 0 0; padding:10px 0 0 60px; position: relative;
.icon{.fc(var(--font-normal)); font-size: 32px;z-index: 1; .poa;left:5px; top:50%; .fixc("y"); width: 50px; height: 58px; line-height: 60px; text-align: center;}
.name{.fc(var(--font-normal)); font-size: 16px; .ff("cn1"); z-index: 1; .por;
.unit{font-size: 12px;}
.mapC-wrap {
.map-counter-alt-wrap {
.poa;
left: 50%;
.fixc("x");
bottom: 34px;
z-index: 10;
padding-left: 30px;
.counter-item {
.bdl(@blA15,3px);
.bdFilter;
.bgc(fade(@blA17,70%));
width: 210px;
display: inline-block;
height: 80px;
margin: 20px 20px 0 0;
padding: 10px 0 0 60px;
position: relative;
.icon {
.fc(var(--font-normal));
font-size: 32px;
z-index: 1;
.poa;
left: 5px;
top: 50%;
.fixc("y");
width: 50px;
height: 58px;
line-height: 60px;
text-align: center;
}
.content{.fc(var(--font-normal)); margin:10px 0;
.num{font-size: 24px; .por; font-weight: bold;.ff("en0"); .fc(var(--font-normal));
.dt-scroll-digital{text-align: center;}
.plus{.poa; left:101%; top:-5px; font-size: 12px; .fc(var(--font-normal)); font-weight: normal; .ff("arial");}
.name {
.fc(var(--font-normal));
font-size: 16px;
.ff("cn1");
z-index: 1;
.por;
.unit {
font-size: 12px;
}
}
.content {
.fc(var(--font-normal));
margin: 10px 0;
.num {
font-size: 24px;
.por;
font-weight: bold;
.ff("en0");
.fc(var(--font-normal));
.dt-scroll-digital {
text-align: center;
}
.plus {
.poa;
left: 101%;
top: -5px;
font-size: 12px;
.fc(var(--font-normal));
font-weight: normal;
.ff("arial");
}
}
}
// &:nth-child(1){.counter-item-re;}
// &:nth-child(2){.counter-item-ye;}
// &:nth-child(3){}
&:last-child{margin:0;}
&:last-child {
margin: 0;
}
}
}
}
</style>
vite.config.js
View file @ 01177aa1
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
server: {
host: '127.0.0.1'
host: "127.0.0.1",
proxy: {
"/vstp/": {
target: "http://192.168.40.117:8044/vstp",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/vstp/, ""),
},
},
},
resolve: {
alias:{
"@":path.resolve(__dirname,"src"),
alias: {
"@": path.resolve(__dirname, "src"),
"@static": path.resolve(__dirname, "static"),
"@assets": path.resolve(__dirname, "src/assets"),
"@mixins": path.resolve(__dirname, "src/mixins"),
......@@ -17,24 +24,32 @@ export default defineConfig({
"@utils": path.resolve(__dirname, "src/utils"),
"@api": path.resolve(__dirname, "src/api"),
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData:`
@import "${path.resolve(__dirname, './node_modules/ayin-lessmixins/ayin-lessmixins.less')}";
@import "${path.resolve(__dirname, './node_modules/ayin-color/ayin-color.less')}";
@import "${path.resolve(__dirname, './node_modules/ayin-color/ayin-color-expand.less')}";
`
//引入的less全局变量，来自于开源组件ayin-color和ayin-lessmixins，访问https://www.npmjs.com/package/ayin-color 查看相关信息
}
}
additionalData: `
@import "${path.resolve(
__dirname,
"./node_modules/ayin-lessmixins/ayin-lessmixins.less"
)}";
@import "${path.resolve(
__dirname,
"./node_modules/ayin-color/ayin-color.less"
)}";
@import "${path.resolve(
__dirname,
"./node_modules/ayin-color/ayin-color-expand.less"
)}";
`,
//引入的less全局变量，来自于开源组件ayin-color和ayin-lessmixins，访问https://www.npmjs.com/package/ayin-color 查看相关信息
},
},
},
optimizeDeps: {
include:['echarts','ayin-color'],
exclude: ['techui-vue3-lite']
include: ["echarts", "ayin-color"],
exclude: ["techui-vue3-lite"],
},
plugins: [vue()],
})
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment