Skip to content

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

asder

parent b6935922
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 106865 additions and 102 deletions
public/static/maps/nanjingCN.json
View file @ 01177aa1
This diff is collapsed.
public/static/maps/shenyangCN.json
View file @ 01177aa1
This diff is collapsed.
src/api/request.js
View file @ 01177aa1
import axios from 'axios' /*
const envMode=process.env.NODE_ENV; * @Author: wuhao930406 1148547900@qq.com
const publicUrl=envMode=='development'?'/':"/api" * @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：{method} String 请求类型，必填
* @param：{url} String 请求地址，必填 * @param：{url} String 请求地址，必填
* @param：{params} Object 参数参数，非必填 * @param：{params} Object 参数参数，非必填
* @returns：Promise {<pending>} * @returns：Promise {<pending>}
**/ **/
export const http = (method, url, params = {},loading) => { export const http = (method, url, params = {}, loading) => {
return new Promise(function(resolve, reject) { return new Promise(function (resolve, reject) {
axios({ axios({
method: method, method: method,
url: publicUrl+url, url: publicUrl + url,
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
}, },
data: params, data: params,
}) })
.then(res => { .then((res) => {
if(res.status==200){ if (res.status == 200) {
// if(!res.data.success){ // if(!res.data.success){
// // showMessage(res.data.errorMessage, "error") // // showMessage(res.data.errorMessage, "error")
// }else{ // }else{
// } // }
resolve(res.data); resolve(res.data);
}else{ } else {
console.error('axiosThen',res) console.error("axiosThen", res);
reject(res); reject(res);
} }
}) })
.catch(err => { .catch((err) => {
console.error('axiosCatch',err); console.error("axiosCatch", err);
reject(err); reject(err);
// ElMessage({ message: "提交失败", showClose: true, center: true, duration: 2000, type:'error' }); // ElMessage({ message: "提交失败", showClose: true, center: true, duration: 2000, type:'error' });
// !loadingDisable&&hideLoading() // !loadingDisable&&hideLoading()
}) });
}) });
}; };
//封装fetch //封装fetch
export const fetchLocl = async(method, url, params)=>{ export const fetchLocl = async (method, url, params) => {
var opts = { var opts = {
method, method,
// headers: { // headers: {
// 'Accept': 'application/json', // 'Accept': 'application/json',
// 'Content-Type': 'application/x-www-form-urlencoded', // '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(); return res.json();
}) });
// .then((res) => { return res; }) // .then((res) => { return res; })
// .catch((error) => { console.error(error) }) // .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> <script setup>
import echartBarHorizScroll from "./portlet/echart-barHorizScroll.vue"; import echartBarHorizScroll from "./portlet/echart-barHorizScroll.vue";
import echartPie from "./portlet/echart-pie.vue"; import echartPie from "./portlet/echart-pie.vue";
...@@ -6,14 +16,9 @@ import echartMap from "./portlet/echart-map.vue"; ...@@ -6,14 +16,9 @@ import echartMap from "./portlet/echart-map.vue";
import echartSunburst from "./portlet/echart-sunburst.vue"; import echartSunburst from "./portlet/echart-sunburst.vue";
import echartHill from "./portlet/echarts-hill-group/echart-hill.vue"; import echartHill from "./portlet/echarts-hill-group/echart-hill.vue";
import echartBar from "./portlet/echart-bar.vue"; import echartBar from "./portlet/echart-bar.vue";
import echartLine from "./portlet/echart-line.vue"; import echartLine from "./portlet/echart-line.vue";
import counterGrid from "./portlet/counter-grid.vue"; import counterGrid from "./portlet/counter-grid.vue";
import echartBarHoriz from "./portlet/echart-barHoriz.vue"; import echartBarHoriz from "./portlet/echart-barHoriz.vue";
import { fetchLocl } from "@/api/request";
console.log(fetchLocl);
const comps = { const comps = {
echartMap, echartMap,
...@@ -23,11 +28,11 @@ const comps = { ...@@ -23,11 +28,11 @@ const comps = {
echartSunburst, echartSunburst,
echartHill, echartHill,
echartBar, echartBar,
echartBarHoriz, echartBarHoriz,
echartLine, echartLine,
counterGrid, counterGrid,
}; };
const state = reactive({ const state = reactive({
systemTitleConfig: { systemTitleConfig: {
width: 1000, width: 1000,
...@@ -117,8 +122,6 @@ const state = reactive({ ...@@ -117,8 +122,6 @@ const state = reactive({
}); });
const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state); const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
onMounted(() => {});
</script> </script>
<template> <template>
<div class="screen1080C"> <div class="screen1080C">
......
src/viewsCN/dashboardC/portlet/echart-map.vue
View file @ 01177aa1
<script setup> <script setup>
import { $c } from "ayin-color"; import { $c } from "ayin-color";
const { proxy } = getCtx(); const { proxy } = getCtx();
import symbol from "./map/symbol.json"; import symbol from "./map/symbol.json";
import counter from "./map/map-counter.vue"; import counter from "./map/map-counter.vue";
import { httpGetMap } from "@/api/api.js"; import { httpGetMap } from "@/api/api.js";
const state = reactive({ const state = reactive({
map: {}, map: {},
colors: { colors: {
...@@ -435,7 +437,6 @@ const processMapData = (current) => { ...@@ -435,7 +437,6 @@ const processMapData = (current) => {
coordinateSystem: "geo", coordinateSystem: "geo",
symbolOffset: [0, -10], symbolOffset: [0, -10],
label: { show: false }, label: { show: false },
itemStyle: { itemStyle: {
color: { color: {
type: "radial", type: "radial",
...@@ -478,6 +479,7 @@ onMounted(() => { ...@@ -478,6 +479,7 @@ onMounted(() => {
.mapC-wrap { .mapC-wrap {
.poa; .poa;
.fullbox; .fullbox;
.full-map { .full-map {
.poa; .poa;
.fullbox; .fullbox;
......
src/viewsCN/dashboardC/portlet/map/map-counter.vue
View file @ 01177aa1
<template> <template>
<div class="map-counter-alt-wrap"> <div class="map-counter-alt-wrap">
<div class="counter-item" v-for="(item,index) in state.counterList"> <div class="counter-item" v-for="(item, index) in state.counterList">
<i :class="'icon '+item.icon"></i> <i :class="'icon ' + item.icon"></i>
<div class="name">{{item.name}} <span class="unit">({{item.unit}})</span></div> <div class="name">
{{ item.name }} <span class="unit">({{ item.unit }})</span>
</div>
<div class="content"> <div class="content">
<span class="num"> <span class="num">
<DigitalTransform class="num" :value="item.num" :useGrouping="true" :interval="2000"></DigitalTransform> <DigitalTransform
<span class="plus" v-if="item.plus">+{{item.plus}}</span> class="num"
:value="item.num"
:useGrouping="true"
:interval="2000"
></DigitalTransform>
<span class="plus" v-if="item.plus">+{{ item.plus }}</span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <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({ state.counterList = res?.data?.dataList?.map((it, i) => {
counterList:[ return {
{name:"软件销售额",icon:"i carbon:ibm-z-cloud-mod-stack",num:13694,unit:"元",plus:218}, name: it?.label,
{name:"硬件销售额",icon:"i carbon:chip",num:14558,unit:"元"}, icon: iconlist[i],
{name:"技术服务",icon:"i carbon:user-speaker",num:3962,unit:"元",plus:462}, num: it?.value,
{name:"安全服务",icon:"i carbon:rule",num:5302,unit:"元",plus:775}, unit: it?.unit,
] };
}) });
});
});
</script> </script>
<style lang="less"> <style lang="less">
.mapC-wrap{ .mapC-wrap {
.map-counter-alt-wrap{.poa; left:50%; .fixc("x"); bottom:70px; z-index: 10; .map-counter-alt-wrap {
.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; .poa;
.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;} left: 50%;
.name{.fc(var(--font-normal)); font-size: 16px; .ff("cn1"); z-index: 1; .por; .fixc("x");
.unit{font-size: 12px;} 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; .name {
.num{font-size: 24px; .por; font-weight: bold;.ff("en0"); .fc(var(--font-normal)); .fc(var(--font-normal));
.dt-scroll-digital{text-align: center;} font-size: 16px;
.plus{.poa; left:101%; top:-5px; font-size: 12px; .fc(var(--font-normal)); font-weight: normal; .ff("arial");} .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(1){.counter-item-re;}
// &:nth-child(2){.counter-item-ye;} // &:nth-child(2){.counter-item-ye;}
// &:nth-child(3){} // &:nth-child(3){}
&:last-child{margin:0;} &:last-child {
margin: 0;
}
} }
} }
} }
</style> </style>
vite.config.js
View file @ 01177aa1
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import path from "path" import path from "path";
export default defineConfig({ export default defineConfig({
server: { 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: { resolve: {
alias:{ alias: {
"@":path.resolve(__dirname,"src"), "@": path.resolve(__dirname, "src"),
"@static": path.resolve(__dirname, "static"), "@static": path.resolve(__dirname, "static"),
"@assets": path.resolve(__dirname, "src/assets"), "@assets": path.resolve(__dirname, "src/assets"),
"@mixins": path.resolve(__dirname, "src/mixins"), "@mixins": path.resolve(__dirname, "src/mixins"),
...@@ -17,24 +24,32 @@ export default defineConfig({ ...@@ -17,24 +24,32 @@ export default defineConfig({
"@utils": path.resolve(__dirname, "src/utils"), "@utils": path.resolve(__dirname, "src/utils"),
"@api": path.resolve(__dirname, "src/api"), "@api": path.resolve(__dirname, "src/api"),
}, },
}, },
css: { css: {
preprocessorOptions: { preprocessorOptions: {
less: { less: {
javascriptEnabled: true, javascriptEnabled: true,
additionalData:` additionalData: `
@import "${path.resolve(__dirname, './node_modules/ayin-lessmixins/ayin-lessmixins.less')}"; @import "${path.resolve(
@import "${path.resolve(__dirname, './node_modules/ayin-color/ayin-color.less')}"; __dirname,
@import "${path.resolve(__dirname, './node_modules/ayin-color/ayin-color-expand.less')}"; "./node_modules/ayin-lessmixins/ayin-lessmixins.less"
` )}";
//引入的less全局变量，来自于开源组件ayin-color和ayin-lessmixins，访问https://www.npmjs.com/package/ayin-color 查看相关信息 @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: { optimizeDeps: {
include:['echarts','ayin-color'], include: ["echarts", "ayin-color"],
exclude: ['techui-vue3-lite'] exclude: ["techui-vue3-lite"],
}, },
plugins: [vue()], 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