Skip to content

山
山西华远大屏
Commit 87a96f43 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：ai分析

parent 6917be1e
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 200 deletions
src/api/avoidanceSys/approval.js → src/api/avoidanceSys/ai.js
View file @ 87a96f43
import request from '@/utils/request'
// 查询流程
export function listProcess(query) {
// 查询应急仓库信息列表
export function getChartData() {
return request({
url: '/approval/process',
url: '/slope/screen/count',
method: 'get',
params: query
})
}
// 修改流程
export function updateProcess(data) {
// 查询应急仓库信息详细
export function getListData(query) {
return request({
url: '/approval/process',
method: 'put',
data:data
url: '/slope/screen/day',
method: 'get',
params: query
})
}
\ No newline at end of file
}
src/api/avoidanceSys/qiaoliang.js
View file @ 87a96f43
import request from '@/utils/request'
// 查询应急仓库信息列表
export function getChartData(query) {
export function getChartData() {
return request({
url: '/material/warehouse/list',
url: '/slope/screen/getAlarmCount',
method: 'get',
params: query
})
}
// 查询应急仓库信息详细
export function getListData() {
export function getListData(query) {
return request({
url: '/material/warehouse/list',
url: '/slope/screen/getTypeMon',
method: 'get',
params: query
})
......
src/components/BigScreen/AiAnalysis.vue
View file @ 87a96f43
......@@ -5,35 +5,32 @@
</div>
<div class="m-body">
<div class="warehouse-info">
<div class="warehouse-cover">
<div v-for="item in 3">
<div class="liquid-chart" :id="`liquidfill${item}`">
{{ item }}
</div>
<p>{{ item }}哈哈</p>
</div>
<div class="warehouse-cover">
<div v-for="item in dataList">
<div class="liquid-chart" :id="`liquidfill${item}`">
{{ item.count }}
</div>
<p>{{ item.title }}</p>
</div>
</div>
<div class="chart-wrapper">
<div id="chart" ref="chart" style="width: 4.5rem; height: 3rem;"></div>
<div id="chart" ref="chart" style="width: 4.5rem; height: 3rem"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
} from "@/api/avoidanceSys/qiaoliang";
import * as echarts from 'echarts';
import { getChartData, getListData } from "@/api/avoidanceSys/ai";
import * as echarts from "echarts";
export default {
name: 'LineChart',
name: "LineChart",
data() {
return {
WarehoseListInfo: [],
warehouseList: [],
chartData: {},
dataList: [],
};
},
......@@ -43,53 +40,133 @@ export default {
setTimeout(() => {
// this.getWarehouseList();
// this.getWarehoseListInfo();
this.initCharts()
// this.initCharts();
// this.initCharts1();
this.getListData();
this.getChartData();
}, 500);
},
methods: {
initCharts(){
var chartDom = document.getElementById('chart');
getChartData(type) {
/** 查询应急预案信息列表 */
getChartData({
pageNum: 1,
pageSize: 99999,
}).then((response) => {
this.chartData = response.data;
this.$nextTick(() => {
this.initCharts();
})
});
},
getListData(type) {
/** 查询应急预案信息列表 */
getListData({
pageNum: 1,
pageSize: 99999,
}).then((response) => {
this.dataList = response.data;
});
},
initCharts() {
var chartDom = document.getElementById("chart");
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
legend: {
top: 25,
icon: "rect", // 设置为圆形图标
itemWidth: 10, // 图标宽度
itemHeight: 10, // 图标高度
itemGap: 20, // 图标间距
itemStyle: {
// 图标样式
color: "#fff", // 设置图标颜色
},
left: "center",
align: "left",
textStyle: {
color: "#fff", // 设置字体颜色
fontSize: 14, // 设置字体大小
},
itemStyle: {
color: "#1f8fff",
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
yAxis: {
type: 'value'
toolbox: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [],
axisLine: { lineStyle: { color: "#a3e4f5" } },
axisTick: { show: false },
},
],
yAxis: [
{
type: "value",
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: "#fff" },
},
},
],
series: [
{
data: [2, 20],
type: 'line',
areaStyle: {}
}
]
name: "Email",
type: "line",
stack: "Total",
lineStyle: {
color: "#1f8fff",
},
areaStyle: {
color: "#1e84e8",
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
],
};
option && myChart.setOption(option);
},
/** 查询数据字典-物资类别信息列表 */
getWarehoseListInfo() {
this.loading = true;
warehouseMaterialList().then((response) => {
this.WarehoseListInfo = response.rows;
this.$nextTick(() => {
this.initCharts(); // 等待 DOM 渲染完再初始化图表
});
});
},
getWarehouseList() {
listWarehouse().then((response) => {
this.warehouseList = this.transformArray(
response.rows,
"id",
"warehouseName"
);
});
option.xAxis[0].data = this.chartData.xaxis;
// option.series = this.chartData.series.map((item)=>{
// return {
// name: item.name,
// type: "line",
// stack: "Total",
// lineStyle: {
// color: "#1f8fff",
// },
// areaStyle: {
// color: "#1e84e8",
// },
// emphasis: {
// focus: "series",
// },
// data: item.data,
// }
// });
myChart.setOption(option);
},
},
};
......@@ -110,31 +187,22 @@ export default {
width: 100%;
height: 5.81rem;
.warehouse-cover {
width: 3.8rem;
height: 1.22rem;
margin: 0 auto;
position: relative;
// background-image: url(~@/assets/images/bigscreen/icon_bg.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: auto;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 0.16rem;
> div {
position: absolute;
width: 0.8rem;
height: 0.8rem;
top: 0.5rem;
left: -0.1rem;
border-radius: 50%;
&:nth-child(1){
&:nth-child(1) {
background-image: url(~@/assets/images/dpNew3/icon1.png);
}
&:nth-child(2){
&:nth-child(2) {
background-image: url(~@/assets/images/dpNew3/icon2.png);
}
&:nth-child(3){
&:nth-child(3) {
background-image: url(~@/assets/images/dpNew3/icon3.png);
}
/* 之后的div使用模数计数器进行循环 */
......@@ -255,7 +323,7 @@ export default {
height: 100%;
}
::v-deep .el-carousel__arrow{
::v-deep .el-carousel__arrow {
display: none;
}
......@@ -276,7 +344,7 @@ export default {
//padding:.08rem .10rem;
//background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
// background-color: rgba(29, 57, 110, 0.65);
&.title4 {
height: 5rem;
width: 4.76rem;
......@@ -324,7 +392,5 @@ export default {
flex-direction: column;
padding: 0.2rem;
padding-top: 0.5rem;
}
</style>
\ No newline at end of file
src/components/BigScreen/QiaoliangMonitor.vue
View file @ 87a96f43
......@@ -8,28 +8,33 @@
<div class="echart-bt">
<div class="echart-bg"></div>
<div id="EchartsPie" class="EchartsPie"></div>
</div>
</div>
<div class="bottom bottom-qiaoliang">
<div class="dt">
<span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
</div>
<dl class="scrolling1">
<!-- <dt>
<span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
</dt> -->
<div class="list-wrap">
<div class="list-content">
<dd v-for="(item, index) in 10" :key="index">
<span><i style="width: 20px;height: 20px;display: block;margin-right: 25px;" :style="{backgroundColor:colorBlock[i]}"></i>{{ item.warehouseName }}</span>
<span :style="{color:colorBlock[index]}">{{ item.validityWarningCount }}</span>
<span :style="{color:colorBlock[index]}">{{ item }}</span>
</dd>
</div>
</div>
</dl>
<div class="dt">
<span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
</div>
<div v-if="!dataList.length" style="font-size: 0.24rem">暂无数据</div>
<dl class="scrolling1">
<div class="list-wrap">
<div class="list-content">
<dd
v-if="dataList.length"
v-for="(item, index) in dataList"
:key="index"
>
<span>{{ item.monName }}</span>
<span :style="{ color: colorBlock[index] }">{{
item.monDate
}}</span>
<span :style="{ color: colorBlock[index] }">{{
item.monNumber
}}</span>
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
</template>
......@@ -43,10 +48,6 @@ import { getChartData, getListData } from "@/api/avoidanceSys/qiaoliang";
export default {
props: {
dataList: {
type: Array,
default: () => [{ name: "测试1:", y: 6.3 }, { name: "测试2:", y: 16.3 }],
},
colors: {
type: Array,
default: () => [
......@@ -70,8 +71,17 @@ export default {
step4qiaoliang: 1, // 每次滚动的像素
intervalTime4qiaoliang: 40, // 每次滚动的时间间隔（ms）
colorBlock:["#27BAFF", "#EEE485", "#25D8A9", "#008ADD","#25D8A9", "#EEE485", "#27BAFF", "#008ADD"],
warehouseList:[],
colorBlock: [
"#27BAFF",
"#EEE485",
"#25D8A9",
"#008ADD",
"#25D8A9",
"#EEE485",
"#27BAFF",
"#008ADD",
],
dataList: [],
chartsTarget: null,
option: {
chart: {
......@@ -82,23 +92,7 @@ export default {
beta: 0,
},
backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
},
// legend: {
// show: false,
// top: "-10%",
// itemStyle: {
// color: "#fff",
// fontSize: 10,
// },
// left: "center",
// itemWidth: 100,
// selectedMode: false,
// data: this.dataList.map((item, index) => {
// item.icon = "circle";
// return item;
// }),
// },
title: {
text: "", //图表的标题文字
},
......@@ -106,28 +100,18 @@ export default {
text: "", //副标题文字
},
plotOptions: {
series: {
cursor: 'pointer',
// events: {
// click: function (event) {
// alert(
// this.name + ' clicked\n' +
// 'Alt: ' + event.altKey + '\n' +
// 'Control: ' + event.ctrlKey + '\n' +
// 'Meta: ' + event.metaKey + '\n' +
// 'Shift: ' + event.shiftKey
// );
// }
// }
events: {
click: (event) => {
console.log('Clicked category:', event); // 在控制台输出类别名
if (event.point) { // 检查是否有被点击的点
var category = event.point.name; // 获取当前点击的类别名
this.getQiaoliangList()
}
}
series: {
cursor: "pointer",
events: {
click: (event) => {
console.log("Clicked category:", event); // 在控制台输出类别名
if (event.point) {
// 检查是否有被点击的点
var category = event.point.name; // 获取当前点击的类别名
this.getListData(category);
}
},
},
},
pie: {
allowPointSelect: true,
......@@ -152,13 +136,12 @@ export default {
credits: {
enabled: false,
},
series: [
{
type: "pie",
name: "",
showInLegend: false,
data: this.generatePieData(),
data: [],
startAngle: 0,
label: {
show: false,
......@@ -185,21 +168,49 @@ export default {
watch: {},
created() {},
mounted() {
this.chartsTarget = Highcharts.chart("EchartsPie", this.option);
this.startScrolling(
".bottom-qiaoliang .list-wrap",
".bottom-qiaoliang .list-content",
"qiaoliang"
);
this.getChartData();
this.getListData("");
},
methods: {
getQiaoliangList(type){
getChartData(type) {
/** 查询应急预案信息列表 */
getChartData({
pageNum: 1,
pageSize: 99999,
}).then((response) => {
const dataList = response.data;
const chartData = dataList.map((item, index) => ({
name: item.name,
y: item.value,
color: this.colors[index] || "#27BAFF", // Default color if no color is provided
}));
this.option.series[0].data = chartData;
this.chartsTarget = Highcharts.chart("EchartsPie", this.option);
});
},
getListData(type) {
/** 查询应急预案信息列表 */
getListData({
pageNum: 1,
pageSize: 99999,
type,
}).then((response) => {
this.dataList = response.data;
this.$nextTick(() => {
setTimeout(() => {
this.startScrolling(
".bottom-qiaoliang .list-wrap",
".bottom-qiaoliang .list-content",
"qiaoliang"
);
}, 100);
});
});
},
generatePieData() {
return this.dataList.map((item, index) => ({
name: item.name,
y: item.value,
......@@ -208,11 +219,19 @@ export default {
},
startScrolling(containerClass, contentClass, type) {
const container = document.querySelector(containerClass);
console.log('container.clientHeight', container.clientHeight)
const content = document.querySelector(contentClass);
var affixHeight = -100;
content.style.transform = `translateY(0px)`;
console.log(content.scrollHeight, "content.scrollHeight");
// return
var affixHeight = -110;
if (this["interval4" + type]) {
clearInterval(this["interval4" + type]);
// 每次请求，重置元素位置初始状态
}
this["interval4" + type] = setInterval(() => {
this["scrollPosition4" + type] +=
this["step4" + type] * this["direction4" + type];
......@@ -327,19 +346,19 @@ export default {
overflow: hidden;
margin-top: -0.16rem;
.dt {
height: 0.42rem;
line-height: 0.42rem;
// margin-top: 0.05rem;
color: #0adfff;
display: grid;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
height: 0.42rem;
line-height: 0.42rem;
// margin-top: 0.05rem;
color: #0adfff;
display: grid;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.18rem;
text-align: center;
border-radius: 4px 4px 0px 0px;
}
font-family: PingFang SC;
font-weight: 500;
font-size: 0.18rem;
text-align: center;
border-radius: 4px 4px 0px 0px;
}
.scrolling1 {
min-height: 2.55rem;
max-height: 2.55rem;
......@@ -347,7 +366,7 @@ export default {
border-radius: 4px 4px 0px 0px;
border: 1px solid #0aabff;
// opacity: 0.5;
dd {
width: 4.28rem;
height: 0.34rem;
......@@ -355,9 +374,9 @@ export default {
color: #d3dfeb;
margin-right: 0px;
display: grid;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
text-align: center;
background: #01689D;
background: #01689d;
opacity: 0.4;
font-size: 0.14rem;
align-items: center;
......@@ -385,5 +404,4 @@ export default {
}
}
}
</style>
src/views/bigscreen.vue
View file @ 87a96f43
......@@ -40,16 +40,18 @@
</div>
<div class="side b0_right">
<div class="a-md34" id="amd34">
<QiaoliangMonitor/>
<!-- <QiaoliangMonitor/> -->
</div>
<div class="a-md34" id="amd34">
<!-- <AiAnalysis /> -->
<AiAnalysis />
</div>
</div>
</div>
</section>
</div>
<section class="statistic_wrapper">
</section>
<footer></footer>
</div>
</template>
......@@ -293,6 +295,13 @@ footer{
// background-color: pink;
}
.statistic_wrapper{
position: absolute;
bottom: 2rem;
}
.amap-logo, .amap-copyright {
display: none !important;
}
......@@ -552,39 +561,7 @@ footer{
user-select: none;
color: #fff;
// 滚动条样式优化
.scrolling1::-webkit-scrollbar {
width: 0.06rem;
height: 0.08rem;
cursor: pointer;
}
.scrolling1::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 10px;
cursor: pointer;
background-color: rgba(23, 121, 230, 0.7);
background-image: -webkit-linear-gradient(
45deg,
rgba(31, 181, 219, 0.7) 25%,
transparent 0,
transparent 50%,
rgba(31, 181, 219, 0.7) 0,
rgba(31, 181, 219, 0.7) 75%,
transparent 0,
transparent
);
}
.scrolling1::-webkit-scrollbar-thumb:hover {
background-color: #1854e8;
}
.scrolling1::-webkit-scrollbar-track {
border-radius: 10px;
background: hsla(0, 0%, 100%, 0.1);
margin-right: 10px;
}
.a-md31 {
// height: 3.2rem;
position: relative;
......
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