日志
echarts鼠标提示框
formatter: function (params) {
var res = '<div><span>部门：' + params[0].data.depart + '</span></div>';
res += '<div><span>工程师：' + params[0].name + '</span></div>';
res += '<div><span>次数：' + params[0].data.value + '</span></div>';
res += '<div><span>主管：' + params[0].data.leader + '</span></div>';
return res
}
获取对象keys
export class AppComponent implements OnInit{
private R
ngOnInit(): void {
this.game()
}
game(){
this.R = {
"one":"hello",
"two":"world",
"three":"game",
"foru":"over"
}
console.log(this.R)
console.log(Object.keys(this.R)) // ["one", "two", "three", "four"]
console.log(Object.keys(this.R).length) // 4
}
for(var key in this.R){
console.log(key) //one two three four
}
}
Angular中通过setOption再次渲染ngx-echarts
- html
<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
- component
onChartInit(ec) {
this.echartsInstance = ec;
}
resizeChart() {
if (this.echartsInstance) {
this.echartsInstance.setOption(this.chartOptions);
}
}
Angular 渲染图片到canvas画布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanva" width="700" height="700"></canvas>
<script>
var canvas = document.getElementById("mycanva")
var ctx = canvas.getContext("2d")
var image = new Image()
image.src = "./star.jpg"
console.log(image.src)
image.onload = function(){
ctx.drawImage(image,100,100,50,50)
}
</script>
</body>
</html>
post 传参向后端发起请求
homeData(value): Observable<any> {
return this.http.post("http://10.43.148.209:8977/QueryHomeData",{value})
}
Angular非父子组件传值
1、公共的服务
2、Localstorage(大小约为5M)
3、Cookie
4、路由参数
5、rxjs中的Subject
echarts柱子不同颜色
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 20, 34, 39, 33, 22],
itemStyle: {
normal: {
color: function(params) {
var index_color = params.value;
if (index_color >= 50) {
return '#fe4365';
} else {
return '#25daba';
}
}
}
},
}
]
多属性数组排序
var arr1 = [
{ID: "4001104",pxId: 2001,dj: 1,bh: 4001104},
{ID: "4001105",pxId: 2005,dj: 1,bh: 4001105},
{ID: "4010102",pxId: 2001,dj: 10,bh: 4010102},
{ID: "4010103",pxId: 2005,dj: 10,bh: 4010103},
{ID: "4010104",pxId: 2001,dj: 10,bh: 4010104},
{ID: "4001102",pxId: 2001,dj: 1,bh: 4001102},
{ID: "4001103",pxId: 2002,dj: 1,bh: 4001103},
{ID: "4001106",pxId: 2003,dj: 1,bh: 4001106},
{ID: "4001101",pxId: 2001,dj: 2,bh: 4001101},
{ID: "4010101",pxId: 2001,dj: 10,bh: 4010101}
];
arr1.sort(function(a, b) {
if(a["pxId"] === b["pxId"]) {
if(a["dj"] > b["dj"]) {
return 1;
} else if(a["dj"] < b["dj"]) {
return -1;
} else {
return 0;
}
} else {
if(a["pxId"] > b["pxId"]) {
return 1;
} else {
return -1;
}
}
})
console.log(arr1);
下载excel表格
npm install file-saver --save
npm install @types/file-saver --save-dev
npm install xlsx --save
<!-- <button mat-raised-button color="primary" (click)="exportTable()">导出</button> -->
<button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出2</button>
<!-- <div id="exportableTable" class="hidden-table">
<table>
<thead>
<tr>
<th>就好多了</th>
<th>就好多了</th>
<th>就好多了</th>
<th>就好多了</th>
<th>就好多了</th>
<th>就好多了</th>
</tr>
</thead>
<tbody>
<tr>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
</tr>
<tr>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
<td>大家尽快</td>
</tr>
</tbody>
</table>
</div> -->
import { Component, OnInit } from '@angular/core';
import * as FileSaver from 'file-saver';
import { saveAs } from "file-saver";
import * as XLSX from 'xlsx';
@Component({
selector: 'app-history',
templateUrl: './history.component.html',
styleUrls: ['./history.component.scss']
})
export class HistoryComponent implements OnInit {
constructor() { }
ngOnInit(): void {}
// exportTable() {
// const blob = new Blob([document.getElementById('exportableTable').innerHTML], {
// type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
// });
// saveAs(blob, 'test.xls');
// }
jsonData: any = [
{
"姓名": "张三",
"工號": "22",
"英文名": "zhangsan",
"部门": "技术部",
"性别": "男",
"手机": "15177641999",
"个人邮箱": "610336688@qq.com"
}, {
"姓名": "李四",
"工號": "33",
"英文名": "李四",
"部门": "人事部",
"性别": "女",
"手机": "15177641988",
"个人邮箱": "978336688@qq.com"
}];
exportTable() {
const exportItem = this.jsonData;
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportItem);
console.log("worksheet",worksheet)
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
console.log("workbook",workbook)
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
console.log("excelBuffer",excelBuffer)
this.saveAsExcelFile(excelBuffer, 'report');
}
private saveAsExcelFile(buffer: any, fileName: string) {
const data: Blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
});
FileSaver.saveAs(data, fileName + '.xlsx');
}
}
<table *ngIf="heroes.length else empty" class="table table-striped table-hover text-center">
<thead>
<tr>
<th scope="col">姓名</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of heroes">
<th scope="row">{{ item.name }}</th>
<td class="actions">
<button routerLink="../update-hero" type="button" class="btn btn-primary btn-modify">修改</button>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
<ng-template #empty>
<p class="text-center">empty</p>
</ng-template>
<form (ngSubmit)="search()">
angular表单必填不生效
<form action="/example/html5/demo_form.asp" method="get" ngNativeValidate>
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" value="提交" />
</form>
GIT 清理远程已删除本地还存在的分支
git fetch --prune
import { Component, OnInit } from "@angular/core";
import { AxiosService } from "../../axios.service";
import * as FileSaver from "file-saver";
import * as moment from "moment";
import { Workbook } from "exceljs";
@Component({
selector: "app-ruku-manage",
templateUrl: "./ruku-manage.component.html",
styleUrls: ["./ruku-manage.component.scss"],
})
export class RukuManageComponent implements OnInit {
listOfData;
uploadOk; // 入库成功的数据
isShow = false; // 料號或廠商無法識別！
documentName; // 获取的上传文件名
docName; // 获取的上传文件信息({...})
uploadData; // base64数据流
downList: any[];
exportlist: any;
constructor(public axios: AxiosService) {}
ngOnInit(): void {
this.querydata();
}
// 获取上传文件的名称
handleChange(info: any) {
console.log(info);
this.documentName = info.target.files[0]["name"]; // 获取上传文件的名称
this.docName = info.target.files[0]; // 获取上传文件对象
console.log(this.documentName);
console.log(this.docName);
const reader = new FileReader();
reader.onload = () => {
if (reader.result) {
this.uploadData = reader.result;
console.log(this.uploadData);
}
};
reader.readAsDataURL(this.docName); // 将文件对象转为Base64格式
}
// 上传
upLoad() {
this.axios
.axiosPost("Upload", {
unionorder: "warehouse",
workorder: "",
filename: this.documentName,
filedata: this.uploadData,
})
.then((data) => {
if (data) {
alert("已上傳");
console.log(data);
if (data["order"].length !== 0) {
this.isShow = true;
for (let i = 0; i < data["order"].length; i++) {
console.log(data["order"][i].quatity);
data["order"][i].quatity = Number(
data["order"][i].quatity
).toFixed(3);
}
this.listOfData = data["order"];
console.log(this.listOfData);
}
}
})
.catch((err) => {
console.log(err);
});
}
// 获取入库成功的数据
querydata() {
// 备品信息
let beipinMsg = [];
// 厂商信息
let changshangMsg = [];
// 入庫成功的原始數據
this.axios
.axiosPost("QueryWarehouse", { offset: 0, count: 10000000 })
.then((data) => {
if (data) {
this.uploadOk = data["order"];
console.log(this.uploadOk.length);
// 获取备品信息中的名称和单位
this.axios.axiosPost("QueryBaseMaterial").then((data) => {
if (data) {
beipinMsg = data["order"];
console.log(beipinMsg);
// 获取厂商信息的税率
this.axios.axiosPost("QueryFirmInfo").then((data) => {
if (data) {
changshangMsg = data["order"];
console.log(changshangMsg);
for (let i = 0; i < this.uploadOk.length; i++) {
for (let j = 0; j < beipinMsg.length; j++) {
if (
this.uploadOk[i]["material_no"] ===
beipinMsg[j]["material_no"]
) {
this.uploadOk[i].name = beipinMsg[j].name;
this.uploadOk[i].unit = beipinMsg[j].unit;
}
}
for (let a = 0; a < changshangMsg.length; a++) {
if (
this.uploadOk[i].manufacturer ===
changshangMsg[a].fullname
) {
this.uploadOk[i].tax_rate = changshangMsg[a].tax_rate;
}
}
this.uploadOk[i].tax_price =
Number(this.uploadOk[i].price) /
(1 + Number(this.uploadOk[i].tax_rate));
}
}
});
}
});
}
})
.catch((err) => {
console.log(err);
});
}
// 下载入库成功的数据
downLoad() {
this.axios.axiosPost("AddDownloadCount")
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(err);
});
let exportlist = [];
console.log(this.uploadOk.length);
if (this.uploadOk.length == 0) {
alert("暫無數據");
} else {
for (let i = 0; i < this.uploadOk.length; i++) {
exportlist.push({
"PR NO": this.uploadOk[i].PR_NO,
"PO NO": this.uploadOk[i].PO_NO,
序號: this.uploadOk[i].SN,
料號: this.uploadOk[i].material_no,
數量: this.uploadOk[i].quatity,
含稅單價: this.uploadOk[i].price,
廠商: this.uploadOk[i].manufacturer,
幣別: this.uploadOk[i].currency,
卡口核放單號: this.uploadOk[i].check_no,
名稱: this.uploadOk[i].name,
單位: this.uploadOk[i].unit,
稅率: this.uploadOk[i].tax_rate,
入庫時間: this.uploadOk[i].timestamp,
未稅單價: this.uploadOk[i].tax_price.toFixed(2),
});
}
console.log(exportlist);
this.downList = [];
exportlist.forEach((row: any) => {
this.downList.push(Object.values(row))
})
let head = ["PR NO","PO NO","序號","料號","數量","含稅單價","廠商","幣別","卡口核放單號","名稱","單位","稅率","入庫時間","未稅單價"]
let reportData = {
title: '入庫管理',
headers : head,
data: this.downList,
};
this.saveAsExcelFile(reportData);
}
}
private saveAsExcelFile(excelData) {
const title = excelData.title;
const header = excelData.headers;
const data = excelData.data;
const workbook = new Workbook();
const worksheet = workbook.addWorksheet("入庫管理");
const headerRow = worksheet.addRow(header);
const worksheet1 = workbook.getWorksheet(1);
console.log(worksheet1);
headerRow.eachCell((cell) => {
cell.fill = {
type: "pattern",
pattern: "solid",
// 设置表头背景颜色
fgColor: { argb: "FFFFFF" },
};
cell.alignment = { vertical: "middle", horizontal: "center" };
cell.font = {
bold: true,
// 设置表头的字体颜色
color: { argb: "000000" },
size: 12,
};
cell.border = {
// 设置边框粗细
top: { style: "thin" },
left: { style: "thin" },
bottom: { style: "thin" },
right: { style: "thin" },
};
});
// 设置表格内容居中对齐
const contentarray = [];
data.forEach((ele) => {
contentarray.push(worksheet.addRow(ele));
});
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < contentarray.length; i++) {
contentarray[i].eachCell((cell) => {
cell.border = {
// 设置边框粗细
top: { style: "thin" },
left: { style: "thin" },
bottom: { style: "thin" },
right: { style: "thin" },
};
cell.fill = {
type: "pattern",
pattern: "solid",
// 设置表头背景颜色
fgColor: { argb: "FFFFFF" },
};
cell.alignment = { vertical: "middle", horizontal: "center" };
});
}
worksheet.getColumn(1).width = 15;
worksheet.getColumn(2).width = 15;
worksheet.getColumn(3).width = 6;
worksheet.getColumn(4).width = 16;
worksheet.getColumn(5).width = 10;
worksheet.getColumn(6).width = 10;
worksheet.getColumn(7).width = 10;
worksheet.getColumn(8).width = 6;
worksheet.getColumn(9).width = 35;
worksheet.getColumn(10).width = 45;
worksheet.getColumn(11).width = 6;
worksheet.getColumn(12).width = 6;
worksheet.getColumn(13).width = 25;
worksheet.getColumn(14).width = 10;
workbook.xlsx.writeBuffer().then((result) => {
const blob = new Blob([result], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
});
FileSaver.saveAs( blob, title + "_" + moment().format("YYYYMMDDHHmmss") + ".xlsx");
});
}
}
