Commit 0edae473 by 无尘

feat: 增加图表

parent 72574cb9
<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>好办管理平台</title><link rel=stylesheet type=text/css href=//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.28.css><link href=./static/css/app.9ccccfbcd89ed4ba7622d6793a3624e8.css rel=stylesheet></head><body style="min-width: 1400px;" class=damolish><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.04.js></script><script src=//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js></script><script>// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();</script><script type=text/javascript src=./static/js/manifest.21888914dde388f51292.js></script><script type=text/javascript src=./static/js/vendor.a8492ff9b5740480be69.js></script><script type=text/javascript src=./static/js/app.059777b698dfea96904f.js></script></body></html> <!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>好办管理平台</title><link rel=stylesheet type=text/css href=//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.28.css><link href=./static/css/app.96fdaa2e2180659bd5e9b03274038cd9.css rel=stylesheet></head><body style="min-width: 1400px;" class=damolish><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.04.js></script><script src=//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js></script><script>// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();</script><script type=text/javascript src=./static/js/manifest.ee565db76ee8806c541f.js></script><script type=text/javascript src=./static/js/vendor.a8492ff9b5740480be69.js></script><script type=text/javascript src=./static/js/app.059777b698dfea96904f.js></script></body></html>
\ No newline at end of file \ No newline at end of file
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,b,n){for(var r,t,o,i=0,u=[];i<c.length;i++)t=c[i],f[t]&&u.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(c,b,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=d(d.s=n[i]);return o};var c={},f={87:0};function d(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,d),f.l=!0,f.exports}d.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,d){a=f[e]=[c,d]});a[2]=c;var b=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,d.nc&&n.setAttribute("nonce",d.nc),n.src=d.p+"static/js/"+e+"."+{0:"6bf4b489ef13cf26d834",1:"954a8a70c5f1171933ac",2:"2025d32c544f960c7161",3:"5e5fd50a283f45682919",4:"7fb54b0d6edc84c910b5",5:"d493a299eefcfbd9f885",6:"987ab930d70320e9de11",7:"5b643f905d32f8ee943f",8:"6f38a596c23a135b17cc",9:"44383cfb15abd9a26d55",10:"ba45ab3ce5ecc5a4c375",11:"ad5f64462ed89ca8845f",12:"fc628ad952a874c7bc5f",13:"b68bb1ad2ae5e55de8a9",14:"353532fc7c9d7e93176c",15:"55cc0d824132bba6ac8e",16:"6f8db89af913d5686aa4",17:"9a8169c9d0ae5a0aea62",18:"b070df09cefa0c00a67f",19:"bd39e7c5f3513e49d835",20:"ed8ea4b44e9f01a33577",21:"014d8a819156c10c014d",22:"2ed939fb696d6add98b8",23:"0701e07f97c5ea8c69f9",24:"58659b3ecef2e163ec96",25:"7a6f156b59558add0546",26:"46523111f9cf26cfb321",27:"bbe470a66acf87303d4e",28:"886b319c902f8f5ae151",29:"a89790eb337f7a7893d2",30:"58c967a8d2f6325152fb",31:"1516baa1f7fa60bd4295",32:"579d635900e935a932f6",33:"5e03558f1c154163cdf9",34:"af5117764e2e8461ade5",35:"bf05237e401c79188568",36:"f7fbc1b902a25e45298d",37:"7c4a62ebe3aa2422c830",38:"3a5a77c06c269d7e14f2",39:"52204c50b7bb2a0eb9eb",40:"c7d24d3098ee04e6dad0",41:"3bde66f2e298d3ad896f",42:"b49cb3220f9199fe2f52",43:"ebdfdb42d05c42d3042b",44:"1cef7966d8a4f17e69d1",45:"68cdea50cf7ccf748c65",46:"40a6c2fce9371673d70b",47:"a60347d0e396ab614786",48:"9174f84901233dd8d0f4",49:"4c23d2fce9234583c093",50:"ba943a0915a5c08260e6",51:"377ddd3618ad5bd9c3a8",52:"1e2ae65363a4861dd355",53:"cad2e8ac87e5684a9bc2",54:"aa9df4f3a7eacae9e5db",55:"5515666662cecc9025bc",56:"2d7039de458c3c9cb678",57:"9f9fb6bfcac478732dad",58:"7ca51a6189813a34c8e8",59:"94cef91aa20f1ed4e307",60:"af4a6c684004f80a7ee0",61:"61567903701f9732f012",62:"ddef6dba0e1841fb538c",63:"a3a44a6f506f871deab4",64:"40f89a451c2e89015091",65:"4e16618829c82ab55c8a",66:"af70555c4e8832c02abf",67:"8fdd20bb6633a594da91",68:"5c88c8205192e47c5440",69:"4df5e7e8568b818a23af",70:"ca6ac1fe2e2c3ac7a6ca",71:"c4b9ffa6fd9ed879342f",72:"ecca0939974e3cb8b4ff",73:"4c5f9e1a5892624f46e6",74:"e4179f75b296bd599098",75:"a29bc05b96ce086304e1",76:"a4e7039d1702d1398ad6",77:"9568405fcd7f68bbbed2",78:"6c0dc47c4cd66828eea7",79:"0018729eec70a9546602",80:"189377999dd7e01b560e",81:"32879f43d7e376621672",82:"80e1bea9e7c52a0010e2",83:"8e92060d7042fa029dc4",84:"917d6e79a15c0ce10d4c"}[e]+".js";var r=setTimeout(t,12e4);function t(){n.onerror=n.onload=null,clearTimeout(r);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return n.onerror=n.onload=t,b.appendChild(n),c},d.m=e,d.c=c,d.d=function(e,a,c){d.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(a,"a",a),a},d.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},d.p="./",d.oe=function(e){throw console.error(e),e}}([]); !function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,b,n){for(var r,t,o,i=0,u=[];i<c.length;i++)t=c[i],f[t]&&u.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(c,b,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=d(d.s=n[i]);return o};var c={},f={87:0};function d(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,d),f.l=!0,f.exports}d.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,d){a=f[e]=[c,d]});a[2]=c;var b=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,d.nc&&n.setAttribute("nonce",d.nc),n.src=d.p+"static/js/"+e+"."+{0:"6bf4b489ef13cf26d834",1:"954a8a70c5f1171933ac",2:"2025d32c544f960c7161",3:"5e5fd50a283f45682919",4:"7fb54b0d6edc84c910b5",5:"d493a299eefcfbd9f885",6:"987ab930d70320e9de11",7:"e64a373195ce6306cae6",8:"6f38a596c23a135b17cc",9:"44383cfb15abd9a26d55",10:"ba45ab3ce5ecc5a4c375",11:"8cfa04eede4178233843",12:"fc628ad952a874c7bc5f",13:"b68bb1ad2ae5e55de8a9",14:"353532fc7c9d7e93176c",15:"55cc0d824132bba6ac8e",16:"6f8db89af913d5686aa4",17:"9a8169c9d0ae5a0aea62",18:"b070df09cefa0c00a67f",19:"bd39e7c5f3513e49d835",20:"ed8ea4b44e9f01a33577",21:"014d8a819156c10c014d",22:"2ed939fb696d6add98b8",23:"0701e07f97c5ea8c69f9",24:"58659b3ecef2e163ec96",25:"7a6f156b59558add0546",26:"46523111f9cf26cfb321",27:"bbe470a66acf87303d4e",28:"886b319c902f8f5ae151",29:"a89790eb337f7a7893d2",30:"58c967a8d2f6325152fb",31:"1516baa1f7fa60bd4295",32:"579d635900e935a932f6",33:"5e03558f1c154163cdf9",34:"af5117764e2e8461ade5",35:"bf05237e401c79188568",36:"f7fbc1b902a25e45298d",37:"7c4a62ebe3aa2422c830",38:"3a5a77c06c269d7e14f2",39:"52204c50b7bb2a0eb9eb",40:"c7d24d3098ee04e6dad0",41:"3bde66f2e298d3ad896f",42:"b49cb3220f9199fe2f52",43:"ebdfdb42d05c42d3042b",44:"1cef7966d8a4f17e69d1",45:"68cdea50cf7ccf748c65",46:"40a6c2fce9371673d70b",47:"a60347d0e396ab614786",48:"9174f84901233dd8d0f4",49:"4c23d2fce9234583c093",50:"ba943a0915a5c08260e6",51:"377ddd3618ad5bd9c3a8",52:"1e2ae65363a4861dd355",53:"cad2e8ac87e5684a9bc2",54:"aa9df4f3a7eacae9e5db",55:"5515666662cecc9025bc",56:"2d7039de458c3c9cb678",57:"9f9fb6bfcac478732dad",58:"7ca51a6189813a34c8e8",59:"94cef91aa20f1ed4e307",60:"af4a6c684004f80a7ee0",61:"61567903701f9732f012",62:"ddef6dba0e1841fb538c",63:"a3a44a6f506f871deab4",64:"40f89a451c2e89015091",65:"4e16618829c82ab55c8a",66:"af70555c4e8832c02abf",67:"8fdd20bb6633a594da91",68:"5c88c8205192e47c5440",69:"4df5e7e8568b818a23af",70:"ca6ac1fe2e2c3ac7a6ca",71:"c4b9ffa6fd9ed879342f",72:"ecca0939974e3cb8b4ff",73:"4c5f9e1a5892624f46e6",74:"e4179f75b296bd599098",75:"a29bc05b96ce086304e1",76:"a4e7039d1702d1398ad6",77:"9568405fcd7f68bbbed2",78:"6c0dc47c4cd66828eea7",79:"0018729eec70a9546602",80:"189377999dd7e01b560e",81:"32879f43d7e376621672",82:"80e1bea9e7c52a0010e2",83:"8e92060d7042fa029dc4",84:"917d6e79a15c0ce10d4c"}[e]+".js";var r=setTimeout(t,12e4);function t(){n.onerror=n.onload=null,clearTimeout(r);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return n.onerror=n.onload=t,b.appendChild(n),c},d.m=e,d.c=c,d.d=function(e,a,c){d.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(a,"a",a),a},d.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},d.p="./",d.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file \ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-04-14 09:50:16 * @Date: 2020-04-14 09:50:16
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-07-01 13:52:20 * @LastEditTime: 2020-07-03 15:25:45
--> -->
<!-- <!--
<set-visiable :brandId="brandId" @closeStore="closeStore" @submitStore="submitStore"></set-visiable> <set-visiable :brandId="brandId" @closeStore="closeStore" @submitStore="submitStore"></set-visiable>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div v-if="formData.sendRange == 3" class="w-240 inline-block item-cell-select"> <div v-if="formData.sendRange == 3" class="w-240 inline-block item-cell-select">
<gic-select-store :brandId="brandId" :selectData="formData.selectList" @returnStores="returnStores"> </gic-select-store> <gic-select-store :brandId="brandId" :selectData="formData.selectList" @returnStores="returnStores"> </gic-select-store>
</div> </div>
<div v-if="(formData.sendRange == '2' || formData.sendRange == '3') && !formData.selectList.length" class="el-form-item__error">请选择发送范围</div> <div v-if="(formData.sendRange == '2' || formData.sendRange == '3') && !formData.selectList.length" class="el-form-item__error">请选择可见范围</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -4,21 +4,44 @@ ...@@ -4,21 +4,44 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-07-02 16:48:49 * @Date: 2020-07-02 16:48:49
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-07-03 09:55:24 * @LastEditTime: 2020-07-03 15:48:24
--> -->
<!-- <!--
<area-chart :charData="charData" id="a-chart"></area-chart> <area-progress :charData="charData" id="a-chart"></area-progress>
import areaChart from '@/components/login-data/area-chart.vue'; import areaProgress from '@/components/login-data/area-progress.vue';
--> -->
<template> <template>
<div :id="id"> <div class="bar-chart-body">
<div class="bar-legend"><span class="square-pot bg-597ef7"></span><span class="font-12 color-8c8c8c">登录员工数</span><span class="square-pot bg-e6ecfa m-l-40"></span><span class="font-12 color-8c8c8c">员工总数</span></div>
<ul>
<li v-for="(item, index) in charData" :key="index + 'process'">
<div class="group-name font-12 color-000-45">{{ item.storeGroupName }}</div>
<el-tooltip placement="top">
<div slot="content">
<div>
<div>
<span class="font-12 color-fff">{{ item.storeGroupName }}</span
><span class="font-12 color-fff">{{ item.loginRate }}</span>
</div>
<div>
<span class="procedd-tip-dot bg-e6ecfa"></span> <span class="font-12 color-fff">员工人数:</span> <span class="font-12 color-fff">{{ item.totalClerkCnt }}</span>
</div>
<div>
<span class="procedd-tip-dot bg-597ef7"></span> <span class="font-12 color-fff">登录人数:</span> <span class="font-12 color-fff">{{ loginClerkCnt }}</span>
</div>
</div>
</div>
<div class="people-total flex">
<div class="login-total" :style="{ width: item.loginRate }"></div>
<div>{{ item.loginRate }}</div>
</div>
</el-tooltip>
</li>
</ul>
</div> </div>
</template> </template>
<script> <script>
import * as G2 from "@antv/g2";
export default { export default {
data() { data() {
return { return {
...@@ -29,7 +52,7 @@ export default { ...@@ -29,7 +52,7 @@ export default {
charData: { charData: {
type: Array, type: Array,
default() { default() {
return [] return [];
} }
}, },
id: String, id: String,
...@@ -38,55 +61,48 @@ export default { ...@@ -38,55 +61,48 @@ export default {
default: null default: null
} }
}, },
mounted() { mounted() {},
setTimeout(() => {
this.drawChart(); // 第一步是创建的时候更新图表,但是这个不适用于异步请求接口获取相关数据,采用下面的监听的方式
}, 30);
},
beforeUpdate() {
this.drawChart();
},
watch: { watch: {
charData() { charData() {}
this.drawChart();
}
}, },
methods: { methods: {}
drawChart() {
// 更新的时候要移除先
this.chart && this.chart.destroy();
this.chart = new G2.Chart({
container: this.id,
width: this.width,
autoFit: true,
height: 400,
});
this.chart.source(this.charData);
this.chart.scale({
value: {
min: 0,
nice: true
},
year: {
range: [0, 1],
}
});
this.chart.tooltip({
crosshairs: {
type: 'line'
}
});
this.chart.line().position('year*value');
this.chart.point().position('year*value').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
this.chart.render();
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.square-pot {
display: inline-block;
width: 8px;
height: 8px;
}
.color-000-45 {
color: rgba(0, 0, 0, 0.45);
}
.bg-597ef7 {
background: #597ef7;
}
.bg-e6ecfa {
background: #e6ecfa;
}
.color-8c8c8c {
color: #8c8c8c;
}
.m-l-40 {
margin-left: 40px;
}
.procedd-tip-dot {
width: 6px;
height: 6px;
padding-right: 6px;
border-radius: 3px;
}
.people-total {
width: 100%;
height: 20px;
background: rgba(245, 247, 250, 0.71);
.login-total {
height: 100%;
background: #597ef7;
}
}
</style> </style>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-07-02 16:48:49 * @Date: 2020-07-02 16:48:49
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-07-03 14:07:51 * @LastEditTime: 2020-07-03 15:07:36
--> -->
<!-- <!--
<day-login-chart :charData="charData" id="day-login-chart"></day-login-chart> <day-login-chart :charData="charData" id="day-login-chart"></day-login-chart>
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
container: this.id, container: this.id,
width: this.width, width: this.width,
autoFit: true, autoFit: true,
height: 420, height: 250,
padding: [50, 30, 60, 60] padding: [50, 30, 60, 60]
}); });
this.chart.source(this.charData); this.chart.source(this.charData);
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
textAlign: 'center', // 文本对齐方式 textAlign: 'center', // 文本对齐方式
fill: '#303133', // 文本颜色 fill: '#303133', // 文本颜色
position: 'end', position: 'end',
rotate: 30 rotate: 0
} }
}); });
this.chart.tooltip({ this.chart.tooltip({
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-03-20 14:36:37 * @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-07-03 14:30:10 * @LastEditTime: 2020-07-03 15:47:15
--> -->
<template> <template>
<div class="my-customer-wrap common-set-wrap"> <div class="my-customer-wrap common-set-wrap">
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
<div class="font-14 color-303133">昨日区域登录统计</div> <div class="font-14 color-303133">昨日区域登录统计</div>
<div @click="changeRoute('/areaLoginDetail?brandId=' + activeBrand)" class="cursor-pointer"><span class="font-14 color-909399">区域登录明细</span><i class="el-icon-arrow-right el-icon--right font-14 color-909399"></i></div> <div @click="changeRoute('/areaLoginDetail?brandId=' + activeBrand)" class="cursor-pointer"><span class="font-14 color-909399">区域登录明细</span><i class="el-icon-arrow-right el-icon--right font-14 color-909399"></i></div>
</div> </div>
<div class="chart-content"></div> <div class="chart-content">
<area-progress :charData="processData" id="a-chart"></area-progress>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -70,6 +72,7 @@ ...@@ -70,6 +72,7 @@
import navCrumb from '@/components/nav/nav.vue'; import navCrumb from '@/components/nav/nav.vue';
import totalPreview from '@/components/login-data/total-preview.vue'; import totalPreview from '@/components/login-data/total-preview.vue';
import dayLoginChart from '@/components/login-data/day-login-chart.vue'; import dayLoginChart from '@/components/login-data/day-login-chart.vue';
import areaProgress from '@/components/login-data/area-progress.vue';
import { getRequest, postRequest } from '@/api/api'; import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public'; // import { _debounce } from '@/common/js/public';
...@@ -101,7 +104,15 @@ export default { ...@@ -101,7 +104,15 @@ export default {
activeBrand: '', activeBrand: '',
loginData: {}, loginData: {},
tabActive: '1', tabActive: '1',
charData: [{ time: '10:10', call: 4, waiting: 2, people: 2 }, { time: '10:15', call: 2, waiting: 6, people: 3 }, { time: '10:20', call: 13, waiting: 2, people: 5 }, { time: '10:25', call: 9, waiting: 9, people: 1 }, { time: '10:30', call: 5, waiting: 2, people: 3 }, { time: '10:35', call: 8, waiting: 2, people: 1 }, { time: '10:40', call: 13, waiting: 1, people: 2 }] charData: [{ time: '10:10', call: 4, waiting: 2, people: 2 }, { time: '10:15', call: 2, waiting: 6, people: 3 }, { time: '10:20', call: 13, waiting: 2, people: 5 }, { time: '10:25', call: 9, waiting: 9, people: 1 }, { time: '10:30', call: 5, waiting: 2, people: 3 }, { time: '10:35', call: 8, waiting: 2, people: 1 }, { time: '10:40', call: 13, waiting: 1, people: 2 }],
processData: [
{
storeGroupName: '100',
totalClerkCnt: 100,
loginClerkCnt: 69,
loginRate: '69%'
}
]
}; };
}, },
computed: {}, computed: {},
...@@ -219,7 +230,8 @@ export default { ...@@ -219,7 +230,8 @@ export default {
components: { components: {
navCrumb, navCrumb,
totalPreview, totalPreview,
dayLoginChart dayLoginChart,
areaProgress
} }
}; };
</script> </script>
......
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