xielei
/
xytSk-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 首页未读已读功能模块开发

master
李神峰 2024-11-08 15:39:26 +08:00
parent b02e418a72
commit fc58c47e92
11 changed files with 244 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages.json
View File

@ -128,37 +128,37 @@
} }
}, },
{ {
"path": "pages/mypage/compents/wtcl/index",//问题处理 "path": "pages/mypage/compents/wtcl/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{ {
"path": "pages/mypage/compents/wxyh/index",//问题处理 "path": "pages/mypage/compents/wxyh/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{ {
"path": "pages/mypage/compents/wxyh/formZdy/index",//问题处理 "path": "pages/mypage/compents/wxyh/formZdy/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{ {
"path": "pages/mypage/compents/xcrw/index",//问题处理 "path": "pages/mypage/compents/xcrw/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{ {
"path": "pages/mypage/compents/wtcl/detail/index",//问题处理 "path": "pages/mypage/compents/wtcl/detail/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
}, },
{ {
"path": "pages/mypage/compents/xcrw/detail/index",//巡查任务 "path": "pages/mypage/compents/xcrw/detail/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }

105
pages/homeIndex/index.vue
View File

@ -29,8 +29,8 @@
<div class="navIcon"> <div class="navIcon">
<image style="width: 100%; height: 100%" :src="item.icon" mode="aspectFit"></image> <image style="width: 100%; height: 100%" :src="item.icon" mode="aspectFit"></image>
<div class="readStatus" v-show=" <div class="readStatus" v-show="
(readStatus && item.key == 3) || (dispatchStatus && item.key ==5 && limit == 0) || (xcStatus && item.key == 1) || (handleStatus && item.key ==3) ||
(limit == 1 && readYjStatus && item.key == 5) (warnStatus && item.key == 4)
"></div> "></div>
</div> </div>
<div class="navTxt">{{ item.value }}</div> <div class="navTxt">{{ item.value }}</div>
@ -54,6 +54,10 @@
<script> <script>
import moment from 'moment' import moment from 'moment'
const stm = moment().startOf('year').format("YYYY-MM-DD HH:mm:ss");
const etm = moment().format("YYYY-MM-DD HH:mm:ss");
const warnStm = moment().subtract(1,"days").format("YYYY-MM-DD HH:mm:ss")
const warnetm = moment().format("YYYY-MM-DD HH:mm:ss")
import SkInfo from '../skInfo/index.vue' import SkInfo from '../skInfo/index.vue'
import YlzList from '../ylzList/index.vue' import YlzList from '../ylzList/index.vue'
export default { export default {
@ -64,17 +68,20 @@
data() { data() {
return { return {
Ylzlist: [], Ylzlist: [],
userList: uni.getStorageSync('value').data, userList: uni.getStorageSync('value'),
limit: 1,
readStatus: false, //工灾情状态
readYjStatus: false, //预警状态
dispatchStatus: false, //调令状态
default_src: uni.getStorageSync('avatar'), default_src: uni.getStorageSync('avatar'),
messagelist: [], messagelist: [],
ylzList: [], ylzList: [],
xcStatus: false, //巡查任务状态
handleStatus: false, //问题处理
warnStatus: false, //预警
} }
}, },
onPullDownRefresh() { onPullDownRefresh() {
this.getXcrwData();
this.getHandleData();
this.getYjData();
uni.$showMsg("刷新成功");
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, 1000); }, 1000);
@ -160,7 +167,7 @@
} }
const { const {
data data
} = await uni.$http.post('/gunshiApp/xfflood/visitMenuLog/insert', params) } = await uni.$http.post('/gunshiApp/xyt/visitMenuLog/insert', params)
} catch (error) {} } catch (error) {}
}, },
myNavigateTo(url, menu2) { myNavigateTo(url, menu2) {
@ -168,17 +175,83 @@
url: url // 跳转到对应路径的页面 url: url // 跳转到对应路径的页面
}) })
this.setInsert(menu2) this.setInsert(menu2)
} },
// 巡查任务
async getXcrwData() {
const userId = uni.getStorageSync('value').userId
const params = {
dateRangeSo: {
start: stm,
end: etm,
},
inspectUserId: userId,
statusList: [0, 1]
}
try {
const res = await uni.$http.post("/gunshiApp/xyt/inspect/task/list", params)
if (res.data.data.length > 0) {
this.xcStatus = true
}
} catch (error) {
uni.$showMsg();
}
},
// 问题处理
async getHandleData() {
let params = {
"pageSo": {
"pageSize": 10,
"pageNumber": 1
},
"dateTimeRangeSo": {
start:stm,
end:etm
},
"isHandle": 0,
"inspectUserId": uni.getStorageSync('value').userId
}
try {
const res = await uni.$http.post("/gunshiApp/xyt/inspect/detail/page", params)
if (res.data.data.records.length > 0) {
this.handleStatus = true
}
} catch (error) {
uni.$showMsg();
}
},
// 预警
async getYjData() {
const params = {
start: warnStm,
end:warnetm
}
try {
const res = await uni.$http.post("/gunshiApp/xyt/stQxWarnR/home/warn", params)
const {flowWarn,pressWarn,qxWarn,shiftWarn} = res.data.data
const arr = [...flowWarn,...pressWarn,...qxWarn,...shiftWarn]
if (arr.length > 0) {
this.warnStatus = true
}
} catch (error) {
uni.$showMsg();
}
},
}, },
onLoad() { onLoad() {
this.getList() console.log("走了几遍");
this.getYlzList() this.getList();
this.userList = uni.getStorageSync('value') this.getYlzList();
}, },
onShow() { onShow() {
this.setInsert() this.setInsert()
} this.getXcrwData();
this.getHandleData();
this.getYjData();
},
} }
</script> </script>
@ -262,11 +335,13 @@
text-align: left; text-align: left;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.info_24 { .info_24 {
padding: 15px; // padding: 15px;
background-color: #fff; background-color: #fff;
margin-bottom: 12rpx; // margin-bottom: 12rpx;
} }
.title .line { .title .line {
border: 2px solid #3380ff; border: 2px solid #3380ff;
border-radius: 3rpx; border-radius: 3rpx;

72
pages/login/login.vue
View File

@ -4,9 +4,9 @@
<image style="width: 100%; height: 100%" src="../../static/images/bg_img.png" mode="scaleToFill"></image> <image style="width: 100%; height: 100%" src="../../static/images/bg_img.png" mode="scaleToFill"></image>
</div> </div>
<view class="user-title"> <view class="user-title">
<text class="sub" >用户登录</text> <text class="sub">用户登录</text>
<text class="line"></text> <text class="line"></text>
</view> </view>
<uni-forms :modelValue="formData" class="form"> <uni-forms :modelValue="formData" class="form">
<uni-forms-item> <uni-forms-item>
<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" /> <uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
@ -26,7 +26,6 @@
<script> <script>
import CryptoJS from 'crypto-js' import CryptoJS from 'crypto-js'
const imgUrl = uni.getStorageSync("imgUrl");
export default { export default {
data() { data() {
return { return {
@ -48,22 +47,8 @@ const imgUrl = uni.getStorageSync("imgUrl");
}, },
methods: { methods: {
handleChange(formData) { handleChange(formData) {
checked = !checked
formData.checked = !formData.checked formData.checked = !formData.checked
}, },
// async getImgFlow(avatar){
// if(!avatar) {
// uni.setStorageSync("avatar",'../../static/tabs/touxiang.png')
// return
// }
// try {
// const {data} = await uni.$http.get(`/gunshiApp/xyt/common/download/resource?resource=${avatar}`)
// const url = fileChange(data)
// uni.setStorageSync("avatar",url)
// } catch (error) {
// }
// },
login(formData) { login(formData) {
//loading //loading
uni.showLoading({ uni.showLoading({
@ -110,7 +95,7 @@ const imgUrl = uni.getStorageSync("imgUrl");
if (res.data.token) { if (res.data.token) {
uni.setStorageSync('Gs-Token', res.data.token) uni.setStorageSync('Gs-Token', res.data.token)
uni.$http.get('/gunshiApp/xyt/getInfo').then(res => { uni.$http.get('/gunshiApp/xyt/getInfo').then(res => {
// this.getImgFlow(res.data.user.avatar) this.getImgFlow(res.data.user.avatar)
uni.setStorageSync('value', res.data.user) uni.setStorageSync('value', res.data.user)
setTimeout(function () { setTimeout(function () {
uni.hideLoading() uni.hideLoading()
@ -132,7 +117,25 @@ const imgUrl = uni.getStorageSync("imgUrl");
clearTimeout() clearTimeout()
} }
}) })
} },
getImgFlow(imgUrl) {
if (imgUrl) {
uni.request({
url: 'http://local.gunshiiot.com:18083' +
`/gunshiApp/xyt/common/download/resource?resource=${imgUrl}`,
responseType: 'arraybuffer',
success: (res) => {
// 将arraybuffer转换为Base64编码
let base64 = uni.arrayBufferToBase64(res.data);
const p = 'data:image/png;base64,' + base64;
uni.setStorageSync("avatar", p)
}
})
} else {
uni.setStorageSync('avatar', "../../static/tabs/touxiang.png")
}
},
} }
} }
</script> </script>
@ -150,7 +153,7 @@ const imgUrl = uni.getStorageSync("imgUrl");
.img { .img {
width: 100vw; width: 100vw;
height: 40vh; height: 40vh;
margin-top: 0vh; margin-top: 0vh;
/* background-color: red; */ /* background-color: red; */
@ -166,27 +169,24 @@ const imgUrl = uni.getStorageSync("imgUrl");
.user-title { .user-title {
position: relative; position: relative;
padding: 4px; padding: 4px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.sub{
font-size: 28px; .sub {
color: #000; font-size: 28px;
} color: #000;
.line{ }
.line {
position: absolute; position: absolute;
width: 80px; width: 80px;
height: 5px; height: 5px;
left:20px; left: 20px;
bottom: -10px; bottom: -10px;
background-color: #00a8ff; background-color: #00a8ff;
border-radius: 15%; border-radius: 15%;
} }
} }
</style> </style>

85
pages/mypage/compents/xcrw/detail/index.vue
View File

@ -5,8 +5,9 @@
fontSize:'18px' fontSize:'18px'
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'> }" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
</u-navbar> </u-navbar>
<view class="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0; height:calc(100vh - 44px)"> <view class=""
<view style="margin: 10px;background-color: #fff;padding: 10px;"> style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0; height:calc(100vh - 44px)">
<view style="margin: 10px;background-color: #fff;padding: 10px;">
<view class="item"> <view class="item">
<view class="blueTiao"></view> <view class="blueTiao"></view>
<view class="title"> <view class="title">
@ -14,7 +15,7 @@
</view> </view>
</view> </view>
<view class="contentItem"> <view class="contentItem">
<view class="itemC"> <view class="itemC">
<text>任务标题1</text> <text>任务标题1</text>
<text>{{taskTitle}}</text> <text>{{taskTitle}}</text>
</view> </view>
@ -40,8 +41,8 @@
<!-- <view v-show="status == 0 && btnStatus == 0" style="display:flex;justify-content: center;margin-top: 20%;"> <!-- <view v-show="status == 0 && btnStatus == 0" style="display:flex;justify-content: center;margin-top: 20%;">
<view class="circle-btn" @click="startXc">开始巡查</view> <view class="circle-btn" @click="startXc">开始巡查</view>
</view> --> </view> -->
<view style="margin: 10px;background-color: #fff;padding: 10px;"> <view style="margin: 10px;background-color: #fff;padding: 10px;">
<view class="item"> <view class="item">
<view class="blueTiao"></view> <view class="blueTiao"></view>
<view class="title"> <view class="title">
巡检项 巡检项
@ -50,7 +51,7 @@
<view class="contentItem"> <view class="contentItem">
<db-form :xjItem="xjItem"></db-form> <db-form :xjItem="xjItem"></db-form>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -59,22 +60,22 @@
import moment from 'moment' import moment from 'moment'
import DbForm from './dbForm.vue' import DbForm from './dbForm.vue'
export default { export default {
components:{ components: {
DbForm DbForm
}, },
data() { data() {
return { return {
taskTitle:'', taskTitle: '',
taskType:'', taskType: '',
taskContent:'', taskContent: '',
startDate:'', startDate: '',
endDate:'', endDate: '',
status:'', status: '',
id:'', id: '',
btnStatus: 0, btnStatus: 0,
xjItem:[], xjItem: [],
list:["正常","异常"], list: ["正常", "异常"],
current:3 current: 3
}; };
}, },
mounted() { mounted() {
@ -82,7 +83,7 @@
}, },
methods: { methods: {
// 开始巡查 // 开始巡查
async startXc(){ async startXc() {
try { try {
this.btnStatus = 1; this.btnStatus = 1;
this.getXjItem(this.id) this.getXjItem(this.id)
@ -90,25 +91,27 @@
uni.$showMsg(); uni.$showMsg();
} }
}, },
// 获取巡查项 // 获取巡查项
async getXjItem(id){ async getXjItem(id) {
try { try {
const {data} = await uni.$http.get(`/gunshiApp/xyt/inspect/detail/info?taskId=${this.id}`) const {
if(data.code == 200){ data
} = await uni.$http.get(`/gunshiApp/xyt/inspect/detail/info?taskId=${this.id}`)
if (data.code == 200) {
this.xjItem = data.data this.xjItem = data.data
} }
} catch (error) { } catch (error) {
uni.$showMsg(); uni.$showMsg();
} }
}, },
change(e){ change(e) {
this.current = e; this.current = e;
} }
}, },
onLoad(option){ onLoad(option) {
this.taskTitle = option.taskTitle this.taskTitle = option.taskTitle
this.taskType = option.taskType this.taskType = option.taskType
this.taskContent = option.taskContent this.taskContent = option.taskContent == "null" ? null : option.taskContent
this.startDate = (option.startDate) this.startDate = (option.startDate)
this.endDate = option.endDate == "null" ? "" : option.endDate this.endDate = option.endDate == "null" ? "" : option.endDate
this.status = option.status this.status = option.status
@ -137,13 +140,15 @@
padding-bottom: 10px; padding-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: space-between; // justify-content: space-between;
.blueTiao{ .blueTiao {
background-color: #007aff; background-color: #007aff;
width: 5px; width: 5px;
height: 16px; height: 16px;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
border-width: 0px; border-width: 0px;
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
@ -155,6 +160,7 @@
.titleRight { .titleRight {
display: flex; display: flex;
.border { .border {
border-width: 0px; border-width: 0px;
background-color: rgba(236, 245, 255, 1); background-color: rgba(236, 245, 255, 1);
@ -172,8 +178,9 @@
} }
} }
.contentItem{
.itemC{ .contentItem {
.itemC {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
@ -181,21 +188,24 @@
padding: 10px; padding: 10px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
.itemNo{
.itemNo {
color: #666666; color: #666666;
padding: 10px; padding: 10px;
} }
} }
.circle-btn{
.circle-btn {
width: 120px; width: 120px;
height: 120px; height: 120px;
background-color: #007aff; background-color: #007aff;
border-radius: 50%; border-radius: 50%;
color:#fff; color: #fff;
text-align: center; text-align: center;
line-height: 120px; line-height: 120px;
} }
.yuandian{
.yuandian {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -203,15 +213,18 @@
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.xj-content{
.xj-content {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.xj-text{
.xj-text {
margin-left: 10%; margin-left: 10%;
margin-top: 2%; margin-top: 2%;
} }
.subsectioin{
.subsectioin {
display: flex; display: flex;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;

4
pages/mypage/mypage.vue
View File

@ -13,7 +13,7 @@
<view class="funcBar"> <view class="funcBar">
<div class="funcList" v-for="(item, index) in func" :key="index"> <div class="funcList" v-for="(item, index) in func" :key="index">
<div @click="navigateToSubPage(func,index)"> <div @click="navigateToSubPage(func,index)">
<div class="funcIcon"> <div class="funcIcon" style="width:30px:;height:30px">
<image class="icon-left" style="width: 100%; height: 100%" :src="item.img" mode="aspectFit"> <image class="icon-left" style="width: 100%; height: 100%" :src="item.img" mode="aspectFit">
</image> </image>
</div> </div>
@ -25,7 +25,7 @@
<view class="" style="padding: 5px 0 0 5px;"> <view class="" style="padding: 5px 0 0 5px;">
历史记录 历史记录
</view> </view>
<view class="" style="display: flex;"> <view class="" style="display: flex;width: 100%;justify-content: space-around;">
<div class="funcList" v-for="(item, index) in xjxList" :key="index" > <div class="funcList" v-for="(item, index) in xjxList" :key="index" >
<div @click="navigateToSubPage(xjxList,index)"> <div @click="navigateToSubPage(xjxList,index)">

7
pages/xcrw/detail/dbForm.vue
View File

@ -60,7 +60,7 @@
</view> </view>
<view class="" v-if="o.isHandle == 0"> <view class="" v-if="o.isHandle == 0">
<u-form-item label="责任人" prop="handleUserId" borderBottom required> <u-form-item label="责任人" prop="handleUserId" borderBottom required>
<uni-data-picker :localdata="treeList" popup-title="请选择班级" v-model="o.handleUserId" <uni-data-picker :localdata="treeList" popup-title="请选择责任人" v-model="o.handleUserId"
:border="false" :border="false"
:map="{'text':'title','value':'value'}" :map="{'text':'title','value':'value'}"
v-slot:default="{data, error, options}" v-slot:default="{data, error, options}"
@ -270,6 +270,11 @@
} }
}, },
submit(status) { submit(status) {
const timer = getStorageSync('timer');
if(timer) {
clearInterval(timer);
uni.removeStorageSync('timer')
}
let tigger = true let tigger = true
//判断是否符合提交条件 //判断是否符合提交条件
this.listData.forEach(item => { this.listData.forEach(item => {

47
pages/xcrw/detail/index.vue
View File

@ -90,17 +90,17 @@
// 开始巡查 // 开始巡查
async startXc(){ async startXc(){
try { try {
if(status == 0){ if(this.status == 0){
const {data} = await uni.$http.get(`/gunshiApp/xyt/inspect/task/startInspect/${this.id}`) const {data} = await uni.$http.get(`/gunshiApp/xyt/inspect/task/startInspect/${this.id}`)
if(data.code == 200){ if(data.code == 200){
this.btnStatus = 1; this.btnStatus = 1;
this.getXjItem(this.id) this.getXjItem(this.id)
} }
}else if(status == 1){ }else if(this.status == 1){
this.btnStatus = 1; this.btnStatus = 1;
this.getXjItem(this.id) this.getXjItem(this.id)
} }
this.getLocationWithInterval();
} catch (error) { } catch (error) {
uni.$showMsg(); uni.$showMsg();
@ -118,14 +118,51 @@
} }
}, },
getLocationWithInterval() {
this.getLocation(); // 首次获取经纬度信息
// 设置定时器，每隔5秒获取一次经纬度信息
let timer= setInterval(() => {
this.getLocation();
}, 300000); // 五分钟
uni.setStorageSync("timer", timer);
},
// 获取经纬度
getLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.sendLocation(res.latitude,res.longitude)
},
fail: (err) => {
console.log('Failed to get location:', err);
}
});
},
// 将经纬度传给服务器
async sendLocation(latitude, longitude) {
try {
const { data } = await uni.$http.post(`/gunshiApp/xyt/inspectTaskTrack/insert`, {
taskId: this.id,
lttd: latitude,
lgtd: longitude
})
if (data.code == 200) {
console.log('Location sent successfully')
}
} catch (error) {
uni.$showMsg();
}
}
}, },
onLoad(option){ onLoad(option){
this.taskTitle = option.taskTitle this.taskTitle = option.taskTitle
this.taskType = option.taskType this.taskType = option.taskType
this.taskContent = option.taskContent this.taskContent = option.taskContent== "null" ? null:option.taskContent
this.startDate = (option.startDate) this.startDate = (option.startDate)
this.endDate = option.endDate == "null" ? "" : option.endDate this.endDate = option.endDate == "null" ? "" : option.endDate
this.status = option.status this.status = option.status
this.id = option.id this.id = option.id
} }

7
pages/xcrw/index.vue
View File

@ -129,6 +129,13 @@
url:`/pages/xcrw/detail/index?taskTitle=${record.taskTitle}&taskType=${record.taskType}&taskContent=${record.taskContent}&startDate=${record.startDate}&endDate=${record.endDate}&status=${record.status}&id=${record.id}` url:`/pages/xcrw/detail/index?taskTitle=${record.taskTitle}&taskType=${record.taskType}&taskContent=${record.taskContent}&startDate=${record.startDate}&endDate=${record.endDate}&status=${record.status}&id=${record.id}`
}) })
} }
},
onShow(){
const timer =uni.getStorageSync('timer');
if(timer){
clearInterval(timer);
uni.removeStorageSync('timer');
}
} }
} }
</script> </script>

18
pages/ylzList/index.vue
View File

@ -39,7 +39,6 @@
h12:22, h12:22,
h24:35, h24:35,
}, },
ylzList:[]
} }
}, },
methods:{ methods:{
@ -60,27 +59,14 @@
// #eb20f5 100-250 // #eb20f5 100-250
// #761e50 >=250 // #761e50 >=250
}, },
// 获取雨量站
async getYlzData(){
try {
const {data} = await uni.$http.post(
"/gunshiApp/xyt/stPptnRReal/list")
if(data.code == 200){
this.ylzList = [...data.data];
}
} catch (error) {
uni.$showMsg();
}
},
toDetail(){ toDetail(){
uni.navigateTo({ uni.navigateTo({
url:`/pages/ylzList/detail/index?stnm=${this.item.stnm}` url:`/pages/ylzList/detail/index?stnm=${this.item.stnm}`
}) })
}, },
}, },
mounted() {
this.getYlzData();
},
} }
</script> </script>

BIN
static/images/info.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 723 B

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/images/password.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 1.7 KiB