Yangwl
/
xy_tyrems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
master
Yangwl 2 years ago
parent 3def5d8783 ecc536bc74
commit bdf9e33273
9 changed files with 199895 additions and 149 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-ui/src/assets/icons/highTemperature.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
ruoyi-ui/src/assets/images/indexBg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

99277
ruoyi-ui/src/views/china.json
View File

File diff suppressed because it is too large Load Diff

758
ruoyi-ui/src/views/index.vue
Unescape Escape View File

@ -1,136 +1,656 @@
<template>
<div class="dashboard-editor-container">
<!-- 搜索栏-->
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"
:label-width=" locale ? '100px':'140px'">
<el-form-item label="外胎号" prop="outerTireNumber">
<el-input
v-model="queryParams.outerTireNumber"
placeholder="请输入外胎号"
style="width: 200px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间" style="width: 308px;">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label=" ">
<el-button type="primary" icon="Search" @click="handleQuery">{{ t('option.search') }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
</el-form-item>
</el-form>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<temp ref="tempRef"/>
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8" @click="handleTyreMileage">
<div class="chart-wrapper">
<raddar-chart />
<div class="indexBg" style="background-repeat: no-repeat;background-size: 100% 100%">
<el-container>
<el-aside style="background-color: rgba(0,0,0,0.3);margin-bottom: 0;" width="350px">
<div id="carCharts" style="height:150px;width:150px;display: inline-block;margin-top: 20px"/>
<div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">正常数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
</div>
<div style="color: #3A71A8">故障数</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
</div>
</div>
<div style="width: 90%;border-top: 1px solid #aaa;margin: 40px 0 40px 5%"></div>
<div id="tyreCharts" style="height:150px;width:150px;display: inline-block;margin-top: 20px"/>
<div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">正常数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
</div>
<div style="color: #3A71A8">故障数</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart ref="pieRef"/>
<div
style="width: 80%;border: 1px solid #ccc;padding: 14px ;text-align: center;margin-left: 10%;color:#fff;margin-top: 100px">
<div style="font-size: 24px"> 101.101%</div>
<div style="font-size: 12px">描述文字</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart ref="barRef"/>
<div style="width: 100%;color: #fff;margin-top: 40px;font-size: 12px">
<div style="width: 33%;float: left;text-align: center">
<div>
参数1
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
<div style="width: 33%;float: left;text-align: center">
<div>
参数2
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
<div style="width: 33%;float: left;text-align: center">
<div>
参数3
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
</div>
</el-col>
</el-row>
</el-aside>
<el-container>
<el-main>
<div id="charts" :class="className" :style="{height:height,width:width}"/>
</el-main>
<el-footer style="background-color: rgba(0,0,0,0);height: 160px">
<div
style="width: 90%;height: 150px;margin-left: 5%;background-color: rgba(0,0,0,0.4);margin-top: 10px;border-radius: 5px;overflow: hidden;">
<div
style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 ">
<div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div>
<div>预警总数</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>低温预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>高温预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>低压预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>高压预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>12</div>
<div>其他预警</div>
</div>
</div>
</div>
</el-footer>
</el-container>
<el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)" width="350px">
<div v-for="i in 60" style="position:relative;color:#fff;height: 120px;">
<img src="../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px">低压</div>
<div style="position: absolute;top:50px;left: 0px">时间</div>
<div style="position: absolute;top:70px;left: 0px">信息</div>
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">鲁B66666</div>
<div style="position: absolute;top: 50px;right: 0px">2排左侧内胎</div>
<div style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div>
</div>
</el-aside>
</el-container>
</div>
</template>
<script setup name="basetyre">
import {useI18n} from 'vue-i18n';
import Cookies from "js-cookie";
import Temp from '@/views/dashboard/Temp'
import RaddarChart from '@/views/dashboard/RaddarChart'
import PieChart from '@/views/dashboard/PieChart'
import BarChart from '@/views/dashboard/BarChart'
import {getTempdata} from "@/api/report/report";
import * as echarts from 'echarts'
provide('echart', echarts)
const {t} = useI18n();
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
const {proxy} = getCurrentInstance();
// 搜索区域开关标识
const showSearch = ref(true);
const dateRange = ref([]);
const tempRef = ref();
const pieRef = ref();
const barRef = ref()
<script>
import * as echarts from 'echarts';
// require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
import chinaMap from './china.json'
// 搜索参数
const queryParams = ref({
outerTireNumber: null,
})
const animationDuration = 6000
// 表单验证规则
const rules = {
outerTireNumber: [{required: true, message: "胎号不能为空", trigger: "blur"}],
}
export default {
// mixins: [resize],
expose: ['setData'],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: 'calc(100vh - 284px)'
}
},
data() {
return {
chart: null,
carChart: null,
tyreChart: null,
mapName: 'china',
geoCoordMap: {},
chartData: [
{name: "北京", value: 177},
{name: "天津", value: 42},
{name: "河北", value: 102},
{name: "山西", value: 81},
{name: "内蒙古", value: 47},
{name: "辽宁", value: 67},
{name: "吉林", value: 82},
{name: "黑龙江", value: 66},
{name: "上海", value: 24},
{name: "江苏", value: 92},
{name: "浙江", value: 114},
{name: "安徽", value: 109},
{name: "福建", value: 116},
{name: "江西", value: 91},
{name: "山东", value: 119},
{name: "河南", value: 137},
{name: "湖北", value: 116},
{name: "湖南", value: 114},
{name: "重庆", value: 91},
{name: "四川", value: 125},
{name: "贵州", value: 62},
{name: "云南", value: 83},
{name: "西藏", value: 9},
{name: "陕西", value: 80},
{name: "甘肃", value: 56},
{name: "青海", value: 10},
{name: "宁夏", value: 18},
{name: "新疆", value: 67},
{name: "广东", value: 123},
{name: "广西", value: 59},
{name: "海南", value: 14},
],
toolTipData: [
{
"name": "北京",
"value": [116.405285, 39.904989, 177]
},
{
"name": "天津",
"value": [117.190182, 39.125596, 42]
},
{
"name": "河北",
"value": [114.502461, 38.045474, 102]
},
{
"name": "山西",
"value": [112.549248, 37.857014, 81]
},
{
"name": "内蒙古",
"value": [111.670801, 40.818311, 47]
},
{
"name": "辽宁",
"value": [123.429096, 41.796767, 67]
},
{
"name": "吉林",
"value": [125.3245, 43.886841, 82]
},
{
"name": "黑龙江",
"value": [126.642464, 45.756967, 66]
},
{
"name": "上海",
"value": [121.472644, 31.231706, 24]
},
{
"name": "江苏",
"value": [118.767413, 32.041544, 92]
},
{
"name": "浙江",
"value": [120.153576, 30.287459, 114]
},
{
"name": "安徽",
"value": [117.283042, 31.86119, 109]
},
{
"name": "福建",
"value": [119.306239, 26.075302, 116]
},
{
"name": "江西",
"value": [115.892151, 28.676493, 91]
},
{
"name": "山东",
"value": [117.000923, 36.675807, 119]
},
{
"name": "河南",
"value": [113.665412, 34.757975, 137]
},
{
"name": "湖北",
"value": [114.298572, 30.584355, 116]
},
{
"name": "湖南",
"value": [112.982279, 28.19409, 114]
},
{
"name": "重庆",
"value": [106.504962, 29.533155, 91]
},
{
"name": "四川",
"value": [104.065735, 30.659462, 125]
},
{
"name": "贵州",
"value": [106.713478, 26.578343, 62]
},
{
"name": "云南",
"value": [102.712251, 25.040609, 83]
},
{
"name": "西藏",
"value": [91.132212, 29.660361, 9]
},
{
"name": "陕西",
"value": [108.948024, 34.263161, 80]
},
{
"name": "甘肃",
"value": [103.823557, 36.058039, 56]
},
{
"name": "青海",
"value": [101.778916, 36.623178, 10]
},
{
"name": "宁夏",
"value": [106.278179, 38.46637, 18]
},
{
"name": "新疆",
"value": [87.617733, 43.792818, 67]
},
{
"name": "广东",
"value": [113.280637, 23.125178, 123]
},
{
"name": "广西",
"value": [108.320004, 22.82402, 59]
},
{
"name": "海南",
"value": [110.33119, 20.031971, 14]
}]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initCarChart()
this.initTyreChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
setData(e) {
let item = e.filter(val => !!val)
this.XData = item.map(val => val.time || '')
this.dataOne = item.map(val => val.course)
this.dataTwo = item.map(val => val.textureDepth)
this.initChart()
},
initChart() {
echarts.registerMap('china', chinaMap);
this.chart = echarts.init(document.getElementById('charts'), 'macarons')
this.chart.showLoading();
let mapFeatures = chinaMap.features;
mapFeatures.forEach((v) => {
// 地区名称
let name = v.properties.name;
// 地区经纬度
this.geoCoordMap[name] = v.properties.cp;
// 表单数据
const form = ref({});
/** 表单重置 */
function reset() {
form.value = {
outerTireNumber: null,
};
proxy.resetForm("postRef");
}
/** 搜索按钮操作 */
function handleQuery() {
getTempdata(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
tempRef.value.setData(response.data);
pieRef.value.setData(response?.data?.WarnData);
barRef.value.setData(response?.data?.patternTextureList)
}).finally(() => {
//loading.value = false;
});
//getList();
}
/** 搜索按钮操作 */
function handleTyreMileage() {
});
this.chart.hideLoading();
}
/** 重置按钮操作 */
const resetQuery = () => {
proxy.resetForm("queryRef");
handleQuery();
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
this.chart.setOption({
visualMap: {
show: false,
min: 0,
max: 200,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
geo: {
show: true,
map: this.mapName,
zoom:1.2,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
// roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.toolTipData,
symbolSize: (val) => {
return val[2] / 10;
},
label: {
normal: {
formatter: (e) => {
console.log(e)
return e.data.name
},
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
zoom:1.6,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
// roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: this.chartData
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: (val) => {
let a = (100 - 20) / (480 - 20);
let b = 20 - a * 20;
b = 100 - a * 480;
return a * val[2] + b;
},
label: {
normal: {
show: true,
formatter: (e) => {
return e.value[2]
},
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: this.toolTipData,
},
]
})
},
initCarChart() {
this.carChart = echarts.init(document.getElementById('carCharts'))
this.carChart.setOption({
title: [
{
text: "333",
x: "center",
top: "52%",
textStyle: {
color: "#fff",
fontSize: 20,
fontWeight: "12",
},
},
{
text: "60%",
x: "center",
top: "32%",
textStyle: {
fontSize: "24",
color: "#fff",
fontWeight: "14",
},
},
],
polar: {
radius: ["80%", "100%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [60],
coordinateSystem: "polar",
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#fdf914",
},
{
offset: 1,
color: "#38a700",
},
]),
},
},
},
],
})
},
initTyreChart() {
this.tyreChart = echarts.init(document.getElementById('tyreCharts'))
this.tyreChart.setOption({
title: [
{
text: "333",
x: "center",
top: "52%",
textStyle: {
color: "#fff",
fontSize: 20,
fontWeight: "12",
},
},
{
text: "60%",
x: "center",
top: "32%",
textStyle: {
fontSize: "24",
color: "#fff",
fontWeight: "14",
},
},
],
polar: {
radius: ["80%", "100%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [60],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#fdf914",
},
{
offset: 1,
color: "#38a700",
},
]),
},
},
},
],
})
},
getErrInfo(){
if( typeof(WebSocket) != "function" ) {
alert("您的浏览器不支持Websocket通信协议")
return
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
}
</script>
<style>
.indexBg{
background-image:url('../assets/images/indexBg.jpg');
}
</style>

99277
ruoyi-ui/src/views/realTimeMonitoring/DetailsOfAlarmInfo/china.json
View File

File diff suppressed because it is too large Load Diff

642
ruoyi-ui/src/views/realTimeMonitoring/DetailsOfAlarmInfo/index.vue
Unescape Escape View File

@ -0,0 +1,642 @@
<template>
<div style="background-color: rgb(14, 27, 59)">
<el-container>
<el-aside style="background-color: rgba(0,0,0,0.3)" width="350px">
<div id="carCharts" style="height:150px;width:150px;display: inline-block;margin-top: 20px"/>
<div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">正常数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
</div>
<div style="color: #3A71A8">故障数</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
</div>
</div>
<div style="width: 90%;border-top: 1px solid #aaa;margin: 40px 0 40px 5%"></div>
<div id="tyreCharts" style="height:150px;width:150px;display: inline-block;margin-top: 20px"/>
<div
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
<div style="color: #3A71A8">正常数</div>
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
</div>
<div style="color: #3A71A8">故障数</div>
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
</div>
</div>
<div
style="width: 80%;border: 1px solid #ccc;padding: 14px ;text-align: center;margin-left: 10%;color:#fff;margin-top: 100px">
<div style="font-size: 24px"> 101.101%</div>
<div style="font-size: 12px">描述文字</div>
</div>
<div style="width: 100%;color: #fff;margin-top: 40px;font-size: 12px">
<div style="width: 33%;float: left;text-align: center">
<div>
参数1
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
<div style="width: 33%;float: left;text-align: center">
<div>
参数2
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
<div style="width: 33%;float: left;text-align: center">
<div>
参数3
</div>
<div style="font-size: 22px">
1234 km
</div>
</div>
</div>
</el-aside>
<el-container>
<el-main>
<div id="charts" :class="className" :style="{height:height,width:width}"/>
</el-main>
<el-footer style="background-color: rgba(0,0,0,0);height: 160px">
<div
style="width: 90%;height: 150px;margin-left: 5%;background-color: rgba(0,0,0,0.4);margin-top: 10px;border-radius: 5px;overflow: hidden;">
<div
style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 ">
<div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div>
<div>预警总数</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>低温预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>高温预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>低压预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>1</div>
<div>高压预警</div>
</div>
</div>
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;left: 0px;position: absolute">
<div style="width: 60%;margin-left: 30%;">
<div>12</div>
<div>其他预警</div>
</div>
</div>
</div>
</el-footer>
</el-container>
<el-aside style="background-color: rgba(0,0,0,0.3)" width="350px">
<div v-for="i in 6" style="position:relative;color:#fff;height: 120px">
<img src="../../../assets/icons/highTemperature.png"
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px">低压</div>
<div style="position: absolute;top:50px;left: 0px">时间</div>
<div style="position: absolute;top:70px;left: 0px">信息</div>
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">鲁B66666</div>
<div style="position: absolute;top: 50px;right: 0px">2排左侧内胎</div>
<div style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div>
</div>
</el-aside>
</el-container>
</div>
</template>
<script>
import * as echarts from 'echarts';
// require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
import chinaMap from './china.json'
const animationDuration = 6000
export default {
// mixins: [resize],
expose: ['setData'],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: 'calc(100vh - 284px)'
}
},
data() {
return {
chart: null,
carChart: null,
tyreChart: null,
mapName: 'china',
geoCoordMap: {},
chartData: [
{name: "北京", value: 177},
{name: "天津", value: 42},
{name: "河北", value: 102},
{name: "山西", value: 81},
{name: "内蒙古", value: 47},
{name: "辽宁", value: 67},
{name: "吉林", value: 82},
{name: "黑龙江", value: 66},
{name: "上海", value: 24},
{name: "江苏", value: 92},
{name: "浙江", value: 114},
{name: "安徽", value: 109},
{name: "福建", value: 116},
{name: "江西", value: 91},
{name: "山东", value: 119},
{name: "河南", value: 137},
{name: "湖北", value: 116},
{name: "湖南", value: 114},
{name: "重庆", value: 91},
{name: "四川", value: 125},
{name: "贵州", value: 62},
{name: "云南", value: 83},
{name: "西藏", value: 9},
{name: "陕西", value: 80},
{name: "甘肃", value: 56},
{name: "青海", value: 10},
{name: "宁夏", value: 18},
{name: "新疆", value: 67},
{name: "广东", value: 123},
{name: "广西", value: 59},
{name: "海南", value: 14},
],
toolTipData: [
{
"name": "北京",
"value": [116.405285, 39.904989, 177]
},
{
"name": "天津",
"value": [117.190182, 39.125596, 42]
},
{
"name": "河北",
"value": [114.502461, 38.045474, 102]
},
{
"name": "山西",
"value": [112.549248, 37.857014, 81]
},
{
"name": "内蒙古",
"value": [111.670801, 40.818311, 47]
},
{
"name": "辽宁",
"value": [123.429096, 41.796767, 67]
},
{
"name": "吉林",
"value": [125.3245, 43.886841, 82]
},
{
"name": "黑龙江",
"value": [126.642464, 45.756967, 66]
},
{
"name": "上海",
"value": [121.472644, 31.231706, 24]
},
{
"name": "江苏",
"value": [118.767413, 32.041544, 92]
},
{
"name": "浙江",
"value": [120.153576, 30.287459, 114]
},
{
"name": "安徽",
"value": [117.283042, 31.86119, 109]
},
{
"name": "福建",
"value": [119.306239, 26.075302, 116]
},
{
"name": "江西",
"value": [115.892151, 28.676493, 91]
},
{
"name": "山东",
"value": [117.000923, 36.675807, 119]
},
{
"name": "河南",
"value": [113.665412, 34.757975, 137]
},
{
"name": "湖北",
"value": [114.298572, 30.584355, 116]
},
{
"name": "湖南",
"value": [112.982279, 28.19409, 114]
},
{
"name": "重庆",
"value": [106.504962, 29.533155, 91]
},
{
"name": "四川",
"value": [104.065735, 30.659462, 125]
},
{
"name": "贵州",
"value": [106.713478, 26.578343, 62]
},
{
"name": "云南",
"value": [102.712251, 25.040609, 83]
},
{
"name": "西藏",
"value": [91.132212, 29.660361, 9]
},
{
"name": "陕西",
"value": [108.948024, 34.263161, 80]
},
{
"name": "甘肃",
"value": [103.823557, 36.058039, 56]
},
{
"name": "青海",
"value": [101.778916, 36.623178, 10]
},
{
"name": "宁夏",
"value": [106.278179, 38.46637, 18]
},
{
"name": "新疆",
"value": [87.617733, 43.792818, 67]
},
{
"name": "广东",
"value": [113.280637, 23.125178, 123]
},
{
"name": "广西",
"value": [108.320004, 22.82402, 59]
},
{
"name": "海南",
"value": [110.33119, 20.031971, 14]
}]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initCarChart()
this.initTyreChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
setData(e) {
let item = e.filter(val => !!val)
this.XData = item.map(val => val.time || '')
this.dataOne = item.map(val => val.course)
this.dataTwo = item.map(val => val.textureDepth)
this.initChart()
},
initChart() {
echarts.registerMap('china', chinaMap);
this.chart = echarts.init(document.getElementById('charts'), 'macarons')
this.chart.showLoading();
let mapFeatures = chinaMap.features;
mapFeatures.forEach((v) => {
// 地区名称
let name = v.properties.name;
// 地区经纬度
this.geoCoordMap[name] = v.properties.cp;
});
this.chart.hideLoading();
this.chart.setOption({
visualMap: {
show: false,
min: 0,
max: 200,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
geo: {
show: true,
map: this.mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
// roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.toolTipData,
symbolSize: (val) => {
return val[2] / 10;
},
label: {
normal: {
formatter: (e) => {
console.log(e)
return e.data.name
},
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
// roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: this.chartData
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: (val) => {
let a = (100 - 20) / (480 - 20);
let b = 20 - a * 20;
b = 100 - a * 480;
return a * val[2] + b;
},
label: {
normal: {
show: true,
formatter: (e) => {
return e.value[2]
},
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: this.toolTipData,
},
]
})
},
initCarChart() {
this.carChart = echarts.init(document.getElementById('carCharts'))
this.carChart.setOption({
title: [
{
text: "333",
x: "center",
top: "52%",
textStyle: {
color: "#fff",
fontSize: 20,
fontWeight: "12",
},
},
{
text: "60%",
x: "center",
top: "32%",
textStyle: {
fontSize: "24",
color: "#fff",
fontWeight: "14",
},
},
],
polar: {
radius: ["80%", "100%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [60],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#fdf914",
},
{
offset: 1,
color: "#38a700",
},
]),
},
},
},
],
})
},
initTyreChart() {
this.tyreChart = echarts.init(document.getElementById('tyreCharts'))
this.tyreChart.setOption({
title: [
{
text: "333",
x: "center",
top: "52%",
textStyle: {
color: "#fff",
fontSize: 20,
fontWeight: "12",
},
},
{
text: "60%",
x: "center",
top: "32%",
textStyle: {
fontSize: "24",
color: "#fff",
fontWeight: "14",
},
},
],
polar: {
radius: ["80%", "100%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [60],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#fdf914",
},
{
offset: 1,
color: "#38a700",
},
]),
},
},
},
],
})
}
}
}
</script>

21
ruoyi-ui/src/views/realTimeMonitoring/alarmSendingSettings/index.vue
Unescape Escape View File

@ -8,10 +8,11 @@
</el-form-item>
<el-form-item label="选择车辆" prop="internationalization8">
<el-cascader
v-model="form.carId"
:options="options"
:props="{ multiple: true, checkStrictly: true,value:'id',label:'title',children:'baseCarList', }"
:props="{ multiple: true, value:'id',label:'title',children:'baseCarList', }"
clearable
@change="cascaderChange"></el-cascader>
@change="cascaderChange" />
</el-form-item>
<el-form-item label="第一轴高气压阀值" prop="z1PressureHigh;">
<el-input-number v-model="form.z1PressureHigh" :min="0" :step="5"/>
@ -71,6 +72,7 @@ const form = ref({
zPressureHigh: 0,
zPressureLow: 0,
temperatureHigh: 0,
carId:null,
time: parseTime(new Date()),
})
const setDisabled = (arr) => {
@ -84,10 +86,11 @@ const setDisabled = (arr) => {
listBaseCar().then(e => {
let res = JSON.stringify(e.rows)
let newObj = JSON.parse(res.replace(/"carLicense":/g, '"title":'))
setDisabled(newObj)
// setDisabled(newObj)
options.value = newObj
})
const cascaderChange = (e) => {
console.log(e)
let lastIds = ids.value || []
let nowIds = e.map(val => val.at(-1))
let nowClick = nowIds.filter(val => !(lastIds.includes(val)))?.[0]
@ -133,4 +136,16 @@ const handleQuery = (e) => {
proxy.$modal.msgSuccess("操作成功");
})
}
const resetQuery = () => {
form.value = {
z1PressureHigh: 0,
z1PressureLow: 0,
zPressureHigh: 0,
zPressureLow: 0,
temperatureHigh: 0,
carId:null,
time: parseTime(new Date()),
}
ids.value=[]
}
</script>

65
ruoyi-ui/src/views/realTimeMonitoring/electronicFence/index.vue
Unescape Escape View File

@ -24,6 +24,7 @@
<el-form-item label=" ">
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
<el-button icon="Refresh" @click="getLine">获取点位</el-button>
</el-form-item>
</el-form>
@ -44,10 +45,9 @@ const queryParams = ref({})
let map = null
let polyline = null
let passedPolyline = null
let mouseTool = null
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
let path2 = [[116.400969, 39.921592], [116.401496, 39.919008], [116.399264, 39.919765], [116.39802, 39.921016]]
const areaPath = ref([path,path2])
let marketPath = [116.390669, 39.911147]
AMapLoader.load({
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
@ -75,7 +75,7 @@ AMapLoader.load({
marker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path),
content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path,path2),
});
marker.setMap(map);
@ -91,32 +91,47 @@ AMapLoader.load({
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
let polygon = new AMap.Polygon({path: path});
map.add([polygon]);
let polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon]);
polyEditor.on('add', function (data) {
console.log(data);
let polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
})
polyEditor.on('addnode', function (data) {
// 获取区域坐标
console.log(polyEditor.getTarget()._opts.path)
})
polyEditor.on('adjust', function (data) {
// 获取区域坐标
console.log(polyEditor.getTarget()._opts.path)
areaPath.value.forEach( (e,index)=> {
let polygon = new AMap.Polygon({path: e});
map.add([polygon]);
let polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon]);
polyEditor.on('add', function (data) {
console.log(data);
let polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
})
polyEditor.on('addnode', function (data) {
// 获取区域坐标
areaPath.value[index] = polyEditor.getTarget()._opts.path
})
polyEditor.on('adjust', function (data) {
// 获取区域坐标
areaPath.value[index] = polyEditor.getTarget()._opts.path
})
polyEditor.setTarget(polygon);
polyEditor.open();
})
polyEditor.setTarget(polygon);
polyEditor.open();
// map.setFitView();
}).catch(e => {
console.log(e);
})
const getLine = () => {
let list = areaPath.value
let params = []
list.forEach((e,index)=>{
e.forEach(val => {
params.push({
longitude:val[0],
latitude:val[1],
index:index
})
})
})
console.log(params)
}
</script>
<style>
#container4 {
@ -125,4 +140,4 @@ AMapLoader.load({
width: 100%;
height: calc(100vh - 190px);
}
</style>
</style>

4
ruoyi-ui/vite.config.js
Unescape Escape View File

@ -33,10 +33,10 @@ export default defineConfig(({mode, command}) => {
open: true,
proxy: {
'/dev-api': {
target: 'https://ticptest.tercelo.com/dev-api',
// target: 'https://ticptest.tercelo.com/dev-api',
// target: 'http://47.94.93.46/dev-api',
// target: 'http://10.11.41.249:8080',
// target: 'http://localhost:8080',
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}

Write Preview
Loading…
Cancel
Save