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