gongjiale
/
gangkou
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 调整报警管理-厂界在线页面 

调整报警管理-厂界在线页面，解决选择部门后页面无数据的问题，修改页面后端接口。
This commit is contained in:
LokerL 2024-10-11 21:16:39 +08:00
parent 627e8fd07e
commit 72b2ace017
7 changed files with 440 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java Normal file
View File

@ -0,0 +1,31 @@
package com.ruoyi.project.oil.controller;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.project.oil.service.IOilThDeviceReportService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/analysis")
public class OilAnalysisController extends BaseController {
@Autowired
private IOilThDeviceReportService oilThDeviceReportService;
@GetMapping("/factoryBoundaryOnline")
public AjaxResult getDeviceReport(Long deptId, String beginDate, String endDate) {
List<Map<String, Object>> alarmCount = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate);
List<Map<String, Object>> alarmCountDesc = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate);
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("alarmCount", alarmCount);
resultMap.put("alarmCountDesc", alarmCountDesc);
return AjaxResult.success(resultMap);
}
}

7
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
View File

@ -71,4 +71,11 @@ public interface ThDeviceReportMapper {
*/
@MapKey("day")
List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day);
@MapKey("day")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
@MapKey("sn")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
}

4
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
View File

@ -9,4 +9,8 @@ public interface IOilThDeviceReportService {
List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month);
List<Map<String, Object>> dailyReportDataOverview(String day);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate);
}

10
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
View File

@ -31,4 +31,14 @@ public class OilThDeviceReportService implements IOilThDeviceReportService {
return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day));
}
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate));
}
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate));
}
}

48
RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
View File

@ -177,4 +177,52 @@
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn
ORDER BY ppp.dept_name, pp.dept_name, p.dept_name
</select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警每日数量；统计(d.zt = '一级报警' OR d.zt = '二级报警')的alarm_count， 统计当天全部的数量count -->
<select id="selectAlarmCountByDeptIdAndDateRange" parameterType="map" resultType="map">
SELECT TO_CHAR(d.report_time, 'YYYY-MM-DD') AS day,
COUNT(CASE WHEN d.zt = '一级报警' OR d.zt = '二级报警' THEN 1 END) AS alarm_count,
COUNT(1) AS count
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD')
ORDER BY day
</select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警数量 降序排列 -->
<select id="selectAlarmCountByDeptIdAndDateRangeDesc" parameterType="map" resultType="map">
SELECT d.sn,
COUNT(d.id) AS count,
p.dept_name as "p",
pp.dept_name as "pp",
ppp.dept_name as "ppp",
td.address,
td.name,
d.zt
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
LEFT JOIN sys_dept ppp ON pp.parent_id = ppp.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
AND (d.zt = '一级报警' OR d.zt = '二级报警')
GROUP BY d.sn, p.dept_name, pp.dept_name, ppp.dept_name, td.address, td.name, d.zt
ORDER BY count DESC
</select>
</mapper>

9
ruoyi-ui/src/api/analysis/index.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function factoryBoundaryOnline(params) {
return request({
url: '/analysis/factoryBoundaryOnline',
params: params,
method: 'get',
})
}

620
ruoyi-ui/src/views/dataAnalysis/bound/index.vue
View File

@ -1,302 +1,344 @@
<template>
<div class="app-container">
<el-form :inline="true" :model="queryParams" ref="form">
<el-form-item>
<span style="margin-right: 10px;">日期</span>
<el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryChart">搜索</el-button>
</el-form-item>
</el-form>
<div style="display: flex;height: 780px;">
<div style="width: 50%;background: #e0e1e2;padding:10px">
<div class="title">厂界在线监测设备报警情况分析</div>
<div style="width:100%;height:700px;" ref="qdCityMap1"></div>
</div>
<div style="width: 50%;background: #e0e1e2;padding:10px">
结合最近14天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
<el-table v-loading="loading" :data="monitorList" style="height: 800px;">
<el-table-column label="企业名称" align="center" prop="a" />
<el-table-column label="设备编号" align="center" prop="d" />
<el-table-column label="放置区域" align="center" prop="b" />
<el-table-column label="报警次数" align="center" prop="e" >
<template slot-scope="scope">
<span :style="{ color: 'red' }">{{ scope.row.e }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">下发通知</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!--发送通知-->
<send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
</div>
</template>
<script>
import { queryAlarmChart} from "@/api/demostrate/monitor";
import { queryMonitorPrediction} from "@/api/demostrate/monitor";
import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
const echarts = require("echarts");
export default {
name: "alarm",
components: {sendMsg},
dicts: [],
data() {
return {
monitorList:[{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:2},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:4},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}
,{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:6},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
],
loading:false,
pickerOptions: {
// disabledDate(time) {
// // 计算选择的时间跨度
// const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
// // 如果时间跨度超过30天，则禁用该日期
// return diff > 30;
// },
shortcuts: [
{
text: '最近30天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 29); // 30天前
picker.$emit('pick', [start, end]);
}
}]},
dateList: [],//日期
total:0,
isOpenMsg:false,
deviceInfo: {},
// 查询参数
queryParams: {
startTime: null,
endTime: null,
},
<div class="app-container">
<el-row :gutter="10">
<el-col :span="6">
<dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
</el-col>
<el-col :span="6">
<el-date-picker
v-model="dateList"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="dateChange"
>
</el-date-picker>
</el-col>
</el-row>
};
<div style="display: flex; height: 700px; margin-top: 10px;">
<div style="width: 50%; background: #e0e1e2; padding: 10px">
<div class="title">厂界在线监测设备报警情况分析</div>
<div style="width: 100%; height: 650px" ref="qdCityMap1"></div>
</div>
<div style="width: 50%; background: #e0e1e2; padding: 10px">
结合{{days}}天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
<el-table v-loading="loading" :data="alarmCountDesc" max-height="650">
<el-table-column label="企业名称" align="center" prop="p" />
<el-table-column label="设备编号" align="center" prop="sn" />
<el-table-column label="放置区域" align="center" prop="address" />
<el-table-column label="报警次数" align="center" prop="count">
<template slot-scope="scope">
<span :style="{ color: 'red' }">{{ scope.row.count }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>下发通知</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!--发送通知-->
<send-msg
:deviceInfo="deviceInfo"
v-if="isOpenMsg"
:isOpenMsg="isOpenMsg"
@closeMsg="closeMsg"
></send-msg>
</div>
</template>
<script>
import { queryAlarmChart } from "@/api/demostrate/monitor";
import { queryMonitorPrediction } from "@/api/demostrate/monitor";
import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
const echarts = require("echarts");
import { factoryBoundaryOnline } from "@/api/analysis"
import to from '@/utils/await-to.js';
import moment from 'moment';
import { debounce } from '@/utils';
export default {
name: "alarm",
components: { sendMsg },
dicts: [],
data() {
return {
dept: null,
queryDebounce: null,
alarmCount: [],
alarmCountDesc: [],
days: 0,
loading: false,
pickerOptions: {
// disabledDate(time) {
// // 计算选择的时间跨度
// const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
// // 如果时间跨度超过30天，则禁用该日期
// return diff > 30;
// },
shortcuts: [
{
text: "最近30天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 29); // 30天前
picker.$emit("pick", [start, end]);
},
},
],
},
dateList: [], //日期
total: 0,
isOpenMsg: false,
deviceInfo: {},
// 查询参数
queryParams: {
deptId: null,
beginDate: null,
endDate: null,
},
};
},
mounted() {
this.queryDebounce = debounce(this.query, 100);
setTimeout(() => {
let dsiab_com = this.$refs.qdCityMap1;
dsiab_com.removeAttribute("_echarts_instance_");
this.getDefaultDateRange();
});
},
watch: {
dateList: {
handler: function () {
// 计算选择的时间天数
const diff = Math.abs(
new Date(this.dateList[1]).getTime() -
new Date(this.dateList[0]).getTime()
);
this.days = diff / (1000 * 60 * 60 * 24);
},
deep: true,
},
created() {
},
methods: {
dateChange() {
this.queryDebounce();
},
mounted() {
setTimeout(() => {
let dsiab_com = this.$refs.qdCityMap1
dsiab_com.removeAttribute('_echarts_instance_')
this.getDefaultDateRange()
// this.getList();
})
handleDeptChange(dept) {
this.dept = dept;
this.queryDebounce();
},
methods: {
//发送通知
handleUpdate(row) {
this.deviceInfo = row
this.isOpenMsg = true
},
queryChart() {
if (this.dateList && this.dateList.length > 0) {
this.queryParams.startTime = this.dateList[0]
this.queryParams.endTime = this.dateList[1]
} else {
this.queryParams.startTime = null
this.queryParams.endTime = null
async query() {
if (this.dept && this.dateList.length > 0) {
this.queryParams.deptId = this.dept.deptId;
this.queryParams.beginDate = this.dateList[0];
this.queryParams.endDate = this.dateList[1];
console.log(this.queryParams);
const [err, res] = await to(factoryBoundaryOnline(this.queryParams));
if (err) {
console.error(err);
this.$message.error("查询失败");
return;
}
// queryAlarmChart(this.queryParams).then(response => {
// if(response.data && response.data.length>0){
// let xData=[]//日期
// let yData1=[]// 一级报警
// let yData2=[]// 二级报警
// let yData3=[]//报警率
// response.data.forEach(map=>{
// xData.push(map.reportTime)
// yData1.push(map.level1)
// yData2.push(map.level2)
// yData3.push(map.progress)
// })
// this.init(xData,yData1,yData2,yData3)
// }
// });
let xData = ['2024-05-03','2024-05-06','2024-05-08','2024-05-11','2024-05-15','2024-05-20']//日期
let yData1 = [10,12,32,12,5,6,9]// 一级报警
let yData2 = [5,1,3,5,9,2,1]// 二级报警
let yData3 = [15,23,3,12,20,3,2]//报警率
this.init(xData, yData1, yData2, yData3)
},
getDefaultDateRange() {
const endDate = new Date(); // 当前时间
const startDate = new Date();
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
this.dateList = [startDate, endDate]
this.queryChart()
},
init(xData,yData1,yData2,yData3) {
const yData2GradientColor = [
if (res.code !== 200) {
this.$message.error(res.msg);
return;
}
console.log(res);
this.alarmCount = res.data.alarmCount;
this.alarmCountDesc = res.data.alarmCountDesc;
this.queryChart();
}
},
//发送通知
handleUpdate(row) {
this.deviceInfo = row;
this.isOpenMsg = true;
},
queryChart() {
const xData = [];
const yData1 = [];
const yData2 = [];
const yData3 = [];
this.alarmCount.forEach((item) => {
xData.push(item.day);
yData1.push(item.alarmCount);
yData3.push(((item.alarmCount / item.count) * 100).toFixed(2));
});
this.init(xData, yData1, yData2, yData3);
},
getDefaultDateRange() {
const endDate = new Date(); // 当前时间
const startDate = new Date();
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
// 格式化为YYYY-MM-DD
this.dateList = [
moment(startDate).format("YYYY-MM-DD"),
moment(endDate).format("YYYY-MM-DD"),
];
this.queryChart();
},
init(xData, yData1, yData2, yData3) {
const yData2GradientColor = [
{
offset: 0,
color: "#0058e1",
},
{
offset: 1,
color: "#3BA1E3",
},
];
const yData3GradientColor = [
{
offset: 0,
color: "#32E8D4",
},
{
offset: 1,
color: "#4BA1E3",
},
];
const option = {
tooltip: {
trigger: "axis", // x轴触发
formatter: function (params) {
let list = [];
let listItem = "";
params.forEach((item) => {
// 柱状图加单位 局，折线图加单位 %
let unitValue =
item.seriesType == "bar" ? item.value + "个" : item.value + "%";
list.push(item.marker + "" + item.seriesName + ": " + unitValue);
});
listItem = list.join("<br/>");
return "<div>" + listItem + "</div>";
},
},
legend: {
orient: "horizontal", // 水平排列
x: "center", //可设定图例在左、右、居中
y: "top", //可设定图例在上、下、居中
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
},
xAxis: {
type: "category",
data: xData,
},
yAxis: [
{
offset: 0,
color: '#0058e1'
},
{
offset: 1,
color: '#3BA1E3'
}
]
const yData3GradientColor = [
{
offset: 0,
color: '#32E8D4'
},
{
offset: 1,
color: '#4BA1E3'
}
]
const option = {
tooltip: {
trigger: 'axis', // x轴触发
formatter: function (params) {
let list = []
let listItem = ''
params.forEach((item) => {
// 柱状图加单位 局，折线图加单位 %
let unitValue = item.seriesType == 'bar' ? item.value + '个' : item.value + '%'
list.push(item.marker + '' + item.seriesName + ': ' + unitValue)
})
listItem = list.join('<br/>')
return '<div>' + listItem + '</div>'
}
},
legend: {
orient: 'horizontal', // 水平排列
x: 'center', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
},
xAxis: {
type: 'category',
data: xData
},
yAxis: [
{
type: 'value',
name: '报警数',
yAxisIndex: 0,
axisLabel: {
//y轴每个刻度都加单位
formatter: "{value}个",
},
type: "value",
name: "报警数",
yAxisIndex: 0,
axisLabel: {
//y轴每个刻度都加单位
formatter: "{value}个",
},
{
type: 'value',
name: "报警率(%)",
min: 0, // 最小为0
max: 100, // 最大为100
interval: 25, // 间隔25
axisLabel: {
//y轴每个刻度都加单位
formatter: "{value}%",
},
},
{
type: "value",
name: "报警率(%)",
min: 0, // 最小为0
max: 100, // 最大为100
interval: 25, // 间隔25
axisLabel: {
//y轴每个刻度都加单位
formatter: "{value}%",
},
],
series: [
{
type: 'bar',
stack: 'x',
name: "报警数",
data: yData1,
label: {
show: true,
color: '#eee'
},
barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// stack:'重叠',
itemStyle: {
// borderRadius: [20, 20, 6, 6],
color: '#15C1AF',
}
},
],
series: [
{
type: "bar",
stack: "x",
name: "报警数",
data: yData1,
label: {
show: true,
color: "#eee",
},
// {
// type: 'bar',
// stack: 'x',
// name: "二级报警数",
// data: yData2,
// label: {
// show: true,
// color: '#eee'
// },
// barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// // stack:'重叠',
// itemStyle: {
// // borderRadius: [20, 20, 6, 6],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
// }
// },
{
type: 'line',
name: '报警率(%)',
data: yData3,
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
symbolSize: 10, // 圆点大小
barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// stack:'重叠',
itemStyle: {
// borderRadius: [20, 20, 6, 6],
color: "#15C1AF",
},
},
// {
// type: 'bar',
// stack: 'x',
// name: "二级报警数",
// data: yData2,
// label: {
// show: true,
// color: '#eee'
// },
// barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// // stack:'重叠',
// itemStyle: {
// // borderRadius: [20, 20, 6, 6],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
// }
// },
{
type: "line",
name: "报警率(%)",
data: yData3,
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
symbolSize: 10, // 圆点大小
// itemStyle: {
// color: '#74DER1', // 折线图小圆点颜色
// },
lineStyle: {
color: '#DE390F',
},
label: {
show: true,
color: '#ddd',
formatter: '{c}%' // {c}数据值
},
}
]
};
this.myChart = echarts.init(this.$refs.qdCityMap1)
this.myChart.setOption(option);
},
}
};
</script>
<style>
.title {
padding-left: 10px;
color: #212121;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
background-position-y: 7px;
}
</style>
lineStyle: {
color: "#DE390F",
},
label: {
show: true,
color: "#ddd",
formatter: "{c}%", // {c}数据值
},
},
],
};
this.myChart = echarts.init(this.$refs.qdCityMap1);
this.myChart.setOption(option);
},
},
};
</script>
<style>
.title {
padding-left: 10px;
color: #212121;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
background-position-y: 7px;
}
</style>