字典转化
单项：
this.commonFun.formatSimpleDict('VEH_STATE_GEAR_MODE',item.gearMode)
数组：
this.commonFun.getVehicleSelectData("OTA_SOFT_VER_STATUS_DICT");
面包屑
第一级：
let navList = this.commonFun.navConfigList([{
name: '测试',
path: this.$route.path,
query_str: ''
}], this);
this.$store.commit("setting/setNavList", navList)
this.$store.commit("setting/setOpenKeys", ['/OTA'])
this.$store.commit("setting/setSelectedKeys", ['/OTA/test'])
第二级：
let navList = this.commonFun.navConfigList('详情',this);
this.$store.commit("setting/setNavList", navList)
this.$store.commit("setting/setOpenKeys", ['/configuration'])
this.$store.commit("setting/setSelectedKeys", ['/configuration/warnConfig/alarm/list'])
分页
select下拉选择框：
<a-select style="width:200px" placeholder="请选择" :default-value="undefined"
@change="selectStatusTypeChange">
<a-select-option v-for="(item2,index2) in selectStatusType" :key="item2.value">
{{item2.label}}
</a-select-option>
</a-select>
<a-select style="width:200px" placeholder="请选择" :default-value=“’1’”
@change="selectStatusTypeChange">
<a-select-option v-for="(item2,index2) in selectStatusType" :key="item2.value">
{{item2.label}}
</a-select-option>
</a-select>
默认弹框
需要注意的点：
1、有ref
2、绑定model属性，定义data变量
3、在data里定义rules（rules是一个对象）
4、prop里面的属性和rules对应起来
5、props里面的属性名称既要和rules对应起来，还要和model里的变量对应起来，而且v-model里的对象最多一个点，多级会有问题
<template>
<a-modal
title="上传软件"
class="ms-default-modal"
:width="680"
:visible="visible"
:closable="true"
:centered="true"
:maskClosable="false"
:destroyOnClose="true"
@cancel="handleCancel"
:maskStyle="{ backgroundColor: 'rgba(0,0,0,0.25)' }"
>
<a-form-model
:model="newestEdition"
ref="ruleForm"
:rules="next_rules"
:labelAlign="'left'"
>
<a-form-model-item label="版本" prop="mainVersion">
<div style="display: flex;">
<a-input
placeholder="数字，整数"
@change="
newestEdition.mainVersion = newestEdition.mainVersion.replace(
/[^\d]/g,
''
)
"
v-model="newestEdition.mainVersion"
allowClear
/>
</div>
</a-form-model-item >
<a-form-model-item label="版本" prop="selection">
<a-select style="width:200px" placeholder="请选择" :default-value="newestEdition.selection"
@change="selectStatusTypeChange">
<a-select-option v-for="(item2,index2) in selectStatusType" :key="item2.value">
{{item2.label}}
</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
<template slot="footer">
<div class="opera">
<div
class="ms-btn ms-primary-btn"
type="primary"
@click="uploadSectionFile"
>
确 认
</div>
<div class="ms-btn ms-default-btn" @click="handleCancel">取 消</div>
</div>
</template>
</a-modal>
</template>
<script>
export default{
created(){
let navList = this.commonFun.navConfigList([{
name: '测试',
path: this.$route.path,
query_str: ''
}], this);
this.$store.commit("setting/setNavList", navList)
this.$store.commit("setting/setOpenKeys", ['/OTA'])
this.$store.commit("setting/setSelectedKeys", ['/OTA/test']);
this.selectStatusType = this.commonFun.getVehicleSelectData("OTA_SOFT_VER_STATUS_DICT");
this.newestEdition.mainVersion='1';
this.newestEdition.selection = ['1,2'];
},
data(){
return{
visible:true,
selectStatusType:[],
newestEdition:{
mainVersion:'1',
selection:undefined
},
next_rules:{
mainVersion:[{ required: true, pattern: /^[1-9][0-9]*$/, message: '请输入整数', trigger: 'blur' },{}],
selection:[{ required: true, message: '请输入整数', trigger: 'blur' },{}],
}
}
},
methods:{
selectStatusTypeChange(val){
this.newestEdition.selection = val
},
selectStatusTypeChange(val){
if(val.length==0){
return this.newestEdition.selection = undefined;
}
this.newestEdition.selection = JSON.stringify(val)
},
uploadSectionFile(e){
e.preventDefault();
this.$refs.ruleForm.validate(valid => {
if(valid){
}
})
},
handleCancel(){
this.visible = false;
}
}
}
</script>
<style>
</style>
自定义校验
const checkPerformanceSpec = (rule, value, callback) => {
console.log(rule)
console.log(value)
if (!!value) {
callback()
} else {
callback(new Error('订购时间必须选择'))
}
}
rule:{
selection:[{ required: true, validator:checkPerformanceSpec, message: '请输入整数', trigger: 'blur' },{}],
}
SVG
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bianji" />
</svg>
上传进度
先校验文件名是否可以上传
然后在上传
上传成功后通知OTA上传成功
上传进度：
上传文件将名字转换
let file = this.fileList[0] || null;
let bobleData = new File([file], res.vehParamUploadFullName, {
type: file.type
});
this.getUploadWithDeadline(res.auth.key,res.auth.url,bobleData);
折线变曲线
var Vector2 = function(x, y) {
this.x = x;
this.y = y;
};
Vector2.prototype = {
"length": function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
"normalize": function () {
var inv = 1 / this.length();
return new Vector2(this.x * inv, this.y * inv);
},
"add": function (v) {
return new Vector2(this.x + v.x, this.y + v.y);
},
"multiply": function (f) {
return new Vector2(this.x * f, this.y * f);
},
"dot": function (v) {
return this.x * v.x + this.y * v.y;
},
"angle": function (v) {
return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
}
};
function getControlPoint(path) {
var rt = 0.3;
var i = 0, count = path.length - 2;
var arr = [];
for (; i < count; i++) {
var a = path[i], b = path[i + 1], c = path[i + 2];
var v1 = new Vector2(a.x - b.x, a.y - b.y);
var v2 = new Vector2(c.x - b.x, c.y - b.y);
var v1Len = v1.length(), v2Len = v2.length();
var centerV = v1.normalize().add(v2.normalize()).normalize();
var ncp1 = new Vector2(centerV.y, centerV.x * -1);
var ncp2 = new Vector2(centerV.y * -1, centerV.x);
if (ncp1.angle(v1) < 90) {
var p1 = ncp1.multiply(v1Len * rt).add(b);
var p2 = ncp2.multiply(v2Len * rt).add(b);
arr.push(p1, p2)
} else {
var p1 = ncp1.multiply(v2Len * rt).add(b);
var p2 = ncp2.multiply(v1Len * rt).add(b);
arr.push(p2, p1)
}
}
return arr;
};
function drawPath(path,ctx){
var point=getControlPoint(path);
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle="blue";
var int=0;
for(var i =0;i<path.length;i++){
if(i==0){
ctx.moveTo(path[0].x,path[0].y);
ctx.quadraticCurveTo(path[0].x,path[0].y,path[1].x,path[1].y);
int=int+1;
}else if(i<path.length-2){
ctx.moveTo(path[i].x,path[i].y);
ctx.bezierCurveTo(point[int].x,point[int].y,point[int+1].x,point[int+1].y,path[i+1].x,path[i+1].y);
int+=2;
}else if(i==path.length-2){
ctx.moveTo(path[path.length-2].x,path[path.length-2].y);
ctx.quadraticCurveTo(point[point.length-1].x,point[point.length-1].y,path[path.length-1].x,path[path.length-1].y);
}
}
ctx.stroke();
ctx.closePath();
ctx.beginPath();
}
var con=document.getElementById("c").getContext("2d");
var points =[{ x: 50, y: 50 }, { x: 200, y: 100 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 370, y: 100 }, { x: 570, y: 200 }];
drawPath(points,con);
