chengdandan
/
batteryDiagnosis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化系统_3_21

This commit is contained in:
lixiaobang 2025-03-21 17:43:32 +08:00
parent 586cc28421
commit c9f52a5315
25 changed files with 39334 additions and 21133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17203
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -15,6 +15,7 @@
"echarts": "^5.6.0", "echarts": "^5.6.0",
"echarts-gl": "^1.1.0", "echarts-gl": "^1.1.0",
"element-ui": "^2.15.13", "element-ui": "^2.15.13",
"mqtt": "^4.3.7",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
"video.js": "^8.0.4", "video.js": "^8.0.4",
"vue": "^2.6.11", "vue": "^2.6.11",

4
public/config.js Normal file
View File

@ -0,0 +1,4 @@
window.g = {
MQTT_IP: '172.16.1.146:1884',
H5_IP:'http://172.16.1.177:8081'
}

7
public/index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" name="transparent" content= "true">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" name="transparent" content= "true">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" name="transparent" content= "true">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
@ -11,6 +11,7 @@
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<script type="text/javascript" src="./config.js"></script>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

4
src/App.vue
View File

@ -16,12 +16,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(./assets/iconfont/iconfont.css); @import url('./assets/iconfont/iconfont.css');
#app { #app {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #010721; // background-color: #010721;
overflow: hidden; overflow: hidden;
} }
</style> </style>

BIN
src/assets/2wm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/assets/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

12
src/assets/font.css Normal file
View File

@ -0,0 +1,12 @@
@font-face {
font-family: "庞门正道";
src: url('./font/庞门正道.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFang SC";
src: url('./font/PingFang Medium_1.ttf');
font-weight: normal;
font-style: normal;
}

BIN
src/assets/font/PingFang Bold_0.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font/PingFang Medium_1.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font/PingFang Regular_1.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font/庞门正道.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/leftBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/rightBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

2
src/assets/scss/index.scss
View File

@ -20,7 +20,7 @@
// } // }
.host-body { .host-body {
padding: 0 50px 30px 48px; padding: 0 0 30px 0;
.dv-dec-10, .dv-dec-10,
.dv-dec-10-s { .dv-dec-10-s {

2
src/assets/scss/style.scss
View File

@ -17,7 +17,7 @@ html {
body { body {
font-family: PingFang SC, PingFang SC-Bold; font-family: PingFang SC, PingFang SC-Bold;
line-height: 1.2em; line-height: 1.2em;
background-color: #f1f1f1; background-color: transparent !important;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

BIN
src/assets/swjcBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

2
src/components/pieChart/index.vue
View File

@ -7,7 +7,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import 'echarts-gl'; // import 'echarts-gl';
export default { export default {
name: "cityGreenLand", name: "cityGreenLand",
components: {}, components: {},

54
src/main.js
View File

@ -15,6 +15,8 @@ import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js'; import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js'; import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js'; import 'vue-awesome/icons/align-left.js';
import mqttConfig from '@/utils/mqttConfig';
import "./assets/font.css"
Vue.prototype.http = http Vue.prototype.http = http
//引入echart //引入echart
@ -40,6 +42,58 @@ Vue.component('icon', Icon);
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(dataV); Vue.use(dataV);
//MQTT订阅
var currentTopics = null;
var client = null;
var callback = null;
let mqtt = new mqttConfig(currentTopics);
window.PubScribe = function (topic, _callback,) {
callback = _callback;
if (currentTopics != null) {
//取消currentTopics主题订阅
if (client != null) {
client.unsubscribe(currentTopics);
currentTopics = null;
}
}
if (client == null) {
client = mqtt.createConnect(() => {
client.subscribe(topic, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功0", topic);
}
});
client.on("message", (topic, message) => {
//数据分类
try {
callback(topic, message);
} catch (error) {
}
});
});
} else {
if (topic != null) {
console.log("topic", topic)
currentTopics = topic;
client.subscribe(currentTopics, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功1");
} else {
console.log('消息订阅失败！')
}
});
}
}
}
new Vue({ new Vue({
router, router,
store, store,

50
src/utils/mqttConfig.js Normal file
View File

@ -0,0 +1,50 @@
import mqtt from "mqtt";
class mqttHandle {
constructor() {
this.connect = {
// host: vm.mqttHost,
// port: vm.mqttPort,
endpoint: "/mqtt",
clean: true, // 保留会话
cleanSession: true,
connectTimeout: 8000, // 超时时间
reconnectPeriod: 8000, // 重连时间间隔
host: '172.16.1.253',
port: '1884',//现场
// 认证信息
clientId: Number(new Date()).toString(),
username: 'dev',
password: '!11@22#33',
}
this.mqttClient = null;
}
/**
* 创建链接
* @returns client
*/
createConnect(onConnected) {
//配置链接
const { host, port, endpoint, ...options } = this.connect;
// const connectUrl = 'ws://' + this.connect.host + ':' + this.connect.port + '/mqtt';
const connectUrl = 'ws://' + window.g.MQTT_IP + '/mqtt';
console.log(connectUrl, 'connectUrl');
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => {
console.log("Connection succeeded!");
onConnected();
});
this.mqttClient.on('reconnect', (error) => {
console.log('正在重连')
})
this.mqttClient.on("error", (error) => {
console.log("Connection failed");
});
}
return this.mqttClient;
}
}
export default mqttHandle;

1488
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/integratedData/components/Map.vue
View File

@ -19,7 +19,7 @@
<script> <script>
import echarts from "echarts"; import echarts from "echarts";
import "echarts-gl"; // import "echarts-gl";
import wz from "../../../assets/source/wz.json"; import wz from "../../../assets/source/wz.json";
// import jn from "../../../assets/source/jn.json"; // import jn from "../../../assets/source/jn.json";

2
src/views/integratedData/components/centerMap.vue
View File

@ -8,7 +8,7 @@
<script> <script>
import echarts from "echarts"; import echarts from "echarts";
import "echarts-gl"; // import "echarts-gl";
import wz from "../../../assets/source/wz.json"; import wz from "../../../assets/source/wz.json";
// import jn from "../../../assets/source/jn.json"; // import jn from "../../../assets/source/jn.json";

260
src/views/sportCode/index.vue
View File

@ -5,10 +5,19 @@
<div class="left-wrapper d-flex flex-column"> <div class="left-wrapper d-flex flex-column">
<div class="use-rank-wrapper d-flex flex-column"> <div class="use-rank-wrapper d-flex flex-column">
<div class="use-rank-content"> <div class="use-rank-content">
<contentTop :type="2" title="各县区使用频率排行" :topOptionsProps="useRankSelectProps" /> <contentTop
:type="2"
title="各县区使用频率排行"
:topOptionsProps="useRankSelectProps"
/>
</div> </div>
<div class="use-rank-list-content"> <div class="use-rank-list-content">
<rank-list viewType="opther" :listHeight="465" :tableTitle="userRankTableTitleList" :list="userRankList" /> <rank-list
viewType="opther"
:listHeight="465"
:tableTitle="userRankTableTitleList"
:list="userRankList"
/>
</div> </div>
</div> </div>
<div class="use-status-wrapper d-flex flex-column"> <div class="use-status-wrapper d-flex flex-column">
@ -32,11 +41,21 @@
<div class="data-distribute d-flex h-100 w-100"> <div class="data-distribute d-flex h-100 w-100">
<div class="distribute-left-content w-100"> <div class="distribute-left-content w-100">
<div class="distribute-img"></div> <div class="distribute-img"></div>
<div class="distribute-process-item line-0 distribute-center-text">25.4%</div> <div class="distribute-process-item line-0 distribute-center-text">
<div class="distribute-process-item line-1 distribute-center-text">25.4%</div> 25.4%
<div class="distribute-process-item line-2 distribute-center-text">25.4%</div> </div>
<div class="distribute-process-item line-3 distribute-center-text">25.4%</div> <div class="distribute-process-item line-1 distribute-center-text">
<div class="distribute-process-item line-4 distribute-center-text">25.4%</div> 25.4%
</div>
<div class="distribute-process-item line-2 distribute-center-text">
25.4%
</div>
<div class="distribute-process-item line-3 distribute-center-text">
25.4%
</div>
<div class="distribute-process-item line-4 distribute-center-text">
25.4%
</div>
</div> </div>
<div class="distribute-right-content d-flex flex-column"> <div class="distribute-right-content d-flex flex-column">
<div class="distribute-data-item line-0">25-40岁 12,123人</div> <div class="distribute-data-item line-0">25-40岁 12,123人</div>
@ -61,10 +80,18 @@
<div class="sport-bg"></div> <div class="sport-bg"></div>
<div class="one-use-rank-wrapper"> <div class="one-use-rank-wrapper">
<div class="one-use-rank-top-con"> <div class="one-use-rank-top-con">
<contentTop title="运动码个人使用情况排行" :topRadioProps="oneUseRadioProps" :topOptionsProps="oneUseRankSelectProps" /> <contentTop
title="运动码个人使用情况排行"
:topRadioProps="oneUseRadioProps"
:topOptionsProps="oneUseRankSelectProps"
/>
</div> </div>
<div class="one-use-rank-con"> <div class="one-use-rank-con">
<rank-list :listHeight="340" :tableTitle="oneUseTableTitle" :list="oneUseList" /> <rank-list
:listHeight="340"
:tableTitle="oneUseTableTitle"
:list="oneUseList"
/>
</div> </div>
</div> </div>
</div> </div>
@ -73,18 +100,35 @@
<div class="right-wrapper d-flex flex-column"> <div class="right-wrapper d-flex flex-column">
<div class="city-rank-wrapper d-flex flex-column"> <div class="city-rank-wrapper d-flex flex-column">
<div class="city-rank-content"> <div class="city-rank-content">
<contentTop :type="2" title="市级协会使用频率排行" :topOptionsProps="cityRankSelectProps" /> <contentTop
:type="2"
title="市级协会使用频率排行"
:topOptionsProps="cityRankSelectProps"
/>
</div> </div>
<div class="city-rank-list-content"> <div class="city-rank-list-content">
<Sliders height="360px" :isHasRight="true" :options="cityRankOptions" :rightTextWidth="55" /> <Sliders
height="360px"
:isHasRight="true"
:options="cityRankOptions"
:rightTextWidth="55"
/>
</div> </div>
</div> </div>
<div class="area-use-rank-wrapper d-flex flex-column"> <div class="area-use-rank-wrapper d-flex flex-column">
<div class="area-use-rank-top-con"> <div class="area-use-rank-top-con">
<contentTop :type="2" title="各区县协会使用频率排行" :topOptionsProps="areaUseRankSelectProps" /> <contentTop
:type="2"
title="各区县协会使用频率排行"
:topOptionsProps="areaUseRankSelectProps"
/>
</div> </div>
<div class="area-use-rank-con"> <div class="area-use-rank-con">
<rank-list :listHeight="480" :tableTitle="areaTableTitleList" :list="areaList" /> <rank-list
:listHeight="480"
:tableTitle="areaTableTitleList"
:list="areaList"
/>
</div> </div>
</div> </div>
</div> </div>
@ -93,13 +137,13 @@
</template> </template>
<script> <script>
import contentTop from '@/components/contentTop'; // import contentTop from '@/components/contentTop';
import rankList from '@/components/rankList'; import rankList from "@/components/rankList";
import Sliders from '@/components/Sliders'; import Sliders from "@/components/Sliders";
import lightPlate from '@/components/lightPlate'; import lightPlate from "@/components/lightPlate";
export default { export default {
name: 'sportCode', name: "sportCode",
components: { contentTop, rankList, Sliders, lightPlate }, components: { contentTop, rankList, Sliders, lightPlate },
data() { data() {
return { return {
@ -107,140 +151,128 @@ export default {
useRankSelectProps: { useRankSelectProps: {
selects: [ selects: [
{ {
name: 'useRank1', name: "useRank1",
options: [ options: [{ value: 1, label: "红榜" }],
{ value: 1, label: '红榜' }
]
}, },
{ {
name: 'useRank2', name: "useRank2",
options: [ options: [{ value: 1, label: "区" }],
{ value: 1, label: '区' } },
] ],
}
]
}, },
userRankTableTitleList: [ userRankTableTitleList: [
{ title: '排名', width: '80' }, { title: "排名", width: "80" },
{ title: '名称', val: 'first', width: '160' }, { title: "名称", val: "first", width: "160" },
{ title: '使用频率', val: 'second', width: '160' } { title: "使用频率", val: "second", width: "160" },
], ],
userRankList: [ userRankList: [
{ first: '瓯海区', second: '90%' }, { first: "瓯海区", second: "90%" },
{ first: '龙湾区', second: '90%' }, { first: "龙湾区", second: "90%" },
{ first: '鹿城区', second: '90%' }, { first: "鹿城区", second: "90%" },
{ first: '永嘉县', second: '90%' }, { first: "永嘉县", second: "90%" },
{ first: '乐清市', second: '90%' }, { first: "乐清市", second: "90%" },
{ first: '瑞安市', second: '90%' }, { first: "瑞安市", second: "90%" },
{ first: '文成县', second: '90%' }, { first: "文成县", second: "90%" },
{ first: '平阳县', second: '90%' }, { first: "平阳县", second: "90%" },
{ first: '龙港市', second: '90%' }, { first: "龙港市", second: "90%" },
{ first: '洞头区', second: '90%' } { first: "洞头区", second: "90%" },
], ],
// 运动码个人使用情况排行 // 运动码个人使用情况排行
oneUseRadioProps: { oneUseRadioProps: {
name: 'onuseradio', name: "onuseradio",
width: 100, width: 100,
options: [ options: [
{ value: 1, label: '周' }, { value: 1, label: "周" },
{ value: 2, label: '月' }, { value: 2, label: "月" },
{ value: 3, label: '年' }, { value: 3, label: "年" },
] ],
}, },
oneUseRankSelectProps: { oneUseRankSelectProps: {
selects: [ selects: [
{ {
name: 'oneuse1', name: "oneuse1",
options: [ options: [{ value: 1, label: "红榜" }],
{ value: 1, label: '红榜' } },
] ],
}
]
}, },
oneUseTableTitle: [ oneUseTableTitle: [
{ title: '排名', width: '80' }, { title: "排名", width: "80" },
{ title: '用户姓名', val:'first', width: '180' }, { title: "用户姓名", val: "first", width: "180" },
{ title: '使用时间(h)', val:'second', width: '180' }, { title: "使用时间(h)", val: "second", width: "180" },
{ title: '使用频率', val:'third', width: '180' } { title: "使用频率", val: "third", width: "180" },
], ],
oneUseList: [ oneUseList: [
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' }, { first: "顾阳", second: "30", third: "92%" },
{ first: '顾阳', second: '30', third: '92%' } { first: "顾阳", second: "30", third: "92%" },
], ],
// 市级协会使用频率排行 // 市级协会使用频率排行
cityRankSelectProps: { cityRankSelectProps: {
selects: [ selects: [
{ {
name: 'cityRank1', name: "cityRank1",
options: [ options: [{ value: 1, label: "红榜" }],
{ value: 1, label: '红榜' } },
] ],
}
]
}, },
cityRankOptions: [ cityRankOptions: [
{ value: 100, label: '鹿城区', rightText: 12000 }, { value: 100, label: "鹿城区", rightText: 12000 },
{ value: 90, label: '瓯海区', rightText: 9876 }, { value: 90, label: "瓯海区", rightText: 9876 },
{ value: 80, label: '龙海区', rightText: 8734 }, { value: 80, label: "龙海区", rightText: 8734 },
{ value: 70, label: '洞头区', rightText: 6789 }, { value: 70, label: "洞头区", rightText: 6789 },
{ value: 60, label: '永嘉县', rightText: 6000 }, { value: 60, label: "永嘉县", rightText: 6000 },
{ value: 50, label: '乐清市', rightText: 6000 }, { value: 50, label: "乐清市", rightText: 6000 },
{ value: 40, label: '文成县', rightText: 6000 }, { value: 40, label: "文成县", rightText: 6000 },
{ value: 30, label: '文成县', rightText: 6000 }, { value: 30, label: "文成县", rightText: 6000 },
{ value: 30, label: '文成县', rightText: 6000 }, { value: 30, label: "文成县", rightText: 6000 },
{ value: 30, label: '文成县', rightText: 6000 }, { value: 30, label: "文成县", rightText: 6000 },
], ],
// 各区县协会使用频率排行 // 各区县协会使用频率排行
areaUseRankSelectProps: { areaUseRankSelectProps: {
selects: [ selects: [
{ {
name: 'areause1', name: "areause1",
options: [ options: [{ value: 1, label: "红榜" }],
{ value: 1, label: '红榜' }
]
}, },
{ {
name: 'areause2', name: "areause2",
options: [ options: [{ value: 1, label: "区" }],
{ value: 1, label: '区' } },
] ],
}
]
}, },
areaTableTitleList: [ areaTableTitleList: [
{ title: '排名', width: '80' }, { title: "排名", width: "80" },
{ title: '名称', val:'first', width: '180' }, { title: "名称", val: "first", width: "180" },
{ title: '使用频率', val:'second', width: '180' } { title: "使用频率", val: "second", width: "180" },
], ],
areaList: [ areaList: [
{ first: '瓯海区', second: '90%' }, { first: "瓯海区", second: "90%" },
{ first: '龙湾区', second: '90%' }, { first: "龙湾区", second: "90%" },
{ first: '鹿城区', second: '90%' }, { first: "鹿城区", second: "90%" },
{ first: '永嘉县', second: '90%' }, { first: "永嘉县", second: "90%" },
{ first: '乐清市', second: '90%' }, { first: "乐清市", second: "90%" },
{ first: '瑞安市', second: '90%' }, { first: "瑞安市", second: "90%" },
{ first: '文成县', second: '90%' }, { first: "文成县", second: "90%" },
{ first: '平阳县', second: '90%' }, { first: "平阳县", second: "90%" },
{ first: '龙港市', second: '90%' }, { first: "龙港市", second: "90%" },
{ first: '洞头区', second: '90%' } { first: "洞头区", second: "90%" },
] ],
} };
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../assets/scss/sportCode.scss'; @import "../../assets/scss/sportCode.scss";
</style> </style>

13918
yarn.lock
View File

File diff suppressed because it is too large Load Diff