163 lines
6.8 KiB
HTML
163 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
|
||
<title>行列转换统计</title>
|
||
<script src="../lib/jquery/dist/jquery.js"></script>
|
||
<script src="../lib/linq.js/Content/Scripts/linq-vsdoc.js"></script>
|
||
<script src="../lib/linq.js/Content/Scripts/linq.js"></script>
|
||
<script src="../lib/echarts/echarts.min.js"></script>
|
||
<script src="../lib/vuejs/vue.js"></script>
|
||
<script src="../lib/vuejs/axios.min.js"></script>
|
||
<script src="../lib/elementui/index.js"></script>
|
||
<link href="../lib/elementui/index.css" rel="stylesheet" />
|
||
<script src="lib/linq.js/Content/Scripts/linq.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app">
|
||
<div id="app">
|
||
<!--{{abc}}-->
|
||
|
||
<el-table :data="spxl_jcxm"
|
||
style="width: 100%">
|
||
<el-table-column prop="SP_XL"
|
||
label="食品小类"
|
||
widtlh="150">
|
||
</el-table-column>
|
||
<el-table-column v-for="(item,index) in tables" :key="item.key" :prop="item.prop" :label="item.label" width="220">
|
||
<el-table-column label="">
|
||
<el-table-column :prop=item.body1.prop
|
||
:label=item.body1.label
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column :prop=item.body2.prop
|
||
:label=item.body2.label
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column :prop=item.body3.prop
|
||
:label=item.body3.label
|
||
width="50">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
|
||
|
||
|
||
</el-table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
<script>
|
||
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
spxl_jcxm: [], //整体最关键的
|
||
arr_total: [],
|
||
arr_zonghe: [],
|
||
tables: [] //有用的
|
||
}
|
||
},
|
||
mounted() {
|
||
//加载提示页面显示
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
var _this = this; //this指向vue
|
||
|
||
//设置三个访问地址axios类
|
||
let sendArr = [
|
||
axios.get('./data/alltotal.txt'),
|
||
axios.get('./data/badsum.txt'),
|
||
axios.get('./data/badrate.txt')
|
||
]
|
||
|
||
|
||
var _this = this; //this指向vue
|
||
axios.all(sendArr).then(axios.spread(function (res1,res2,res3) {
|
||
//获取到三个数据的信息，进行赋值
|
||
_this.arr_alltotal = JSON.parse(res1.data)
|
||
_this.arr_badsum = JSON.parse(res2.data)
|
||
_this.arr_badrate = JSON.parse(res3.data)
|
||
|
||
//先把表头给生成
|
||
var curTableIndex = 0;
|
||
for (var key in _this.arr_alltotal[1]) {
|
||
//这里的循环需要把SP_XL食品小类不要出现在新的赋值里面
|
||
if (key != 'SP_XL') {
|
||
//设置显示的表头json值
|
||
var curTableHeader = { key: curTableIndex, prop: "", label: key }
|
||
var curTableBody1 = { key: curTableIndex + 10000, prop: "t_" + curTableIndex, label: "总数" }
|
||
var curTableBody2 = { key: curTableIndex + 10001, prop: "s_" + curTableIndex, label: "不合格数" }
|
||
var curTableBody3 = { key: curTableIndex + 10002, prop: "r_" + curTableIndex, label: "不合格率" }
|
||
curTableHeader.body1 = curTableBody1
|
||
curTableHeader.body2 = curTableBody2
|
||
curTableHeader.body3 = curTableBody3
|
||
_this.tables.push(curTableHeader)
|
||
curTableIndex += 1;
|
||
}
|
||
}
|
||
|
||
|
||
//循环获取每一行的具体数据
|
||
for (var i = 2; i <= 5; i++) {
|
||
var curZongShu = _this.arr_alltotal[i]
|
||
var curBuHeGeShu = _this.arr_badsum[i]
|
||
var curBuHeGeLv = _this.arr_badrate[i]
|
||
|
||
//开始拼接json字符串
|
||
var curObj = "{\"SP_XL\":\"" + curZongShu.SP_XL + "\",";
|
||
//为了key的具体名称，需要一个循环获取
|
||
var curIndex = 0;
|
||
for (var key in curZongShu) {
|
||
//这里的循环需要把SP_XL食品小类不要出现在新的赋值里面
|
||
if (key != 'SP_XL') {
|
||
//拼接一行显示的json数据集
|
||
var curObj = curObj + "\"t_" + curIndex + "\":\"" + curZongShu[key] + "\",\"s_" + curIndex + "\":\"" + curBuHeGeShu[key] + "\",\"r_" + curIndex + "\":\"" + curBuHeGeLv[key] + "\","
|
||
|
||
////设置显示的表头json值
|
||
//var curTableHeader = { key: curIndex, prop: "", label: key }
|
||
//var curTableBody1 = { key: curIndex + 10000, prop: "t_" + curIndex, label: "总数" }
|
||
//var curTableBody2 = { key: curIndex + 10001, prop: "s_" + curIndex, label: "不合格数" }
|
||
//var curTableBody3 = { key: curIndex + 10002, prop: "r_" + curIndex, label: "不合格率" }
|
||
//curTableHeader.body1 = curTableBody1
|
||
//curTableHeader.body2 = curTableBody2
|
||
//curTableHeader.body3 = curTableBody3
|
||
//_this.tables.push(curTableHeader)
|
||
|
||
|
||
curIndex += 1;
|
||
}
|
||
}
|
||
|
||
|
||
var strJson = curObj.substr(0, curObj.length - 1) + "}"
|
||
_this.spxl_jcxm.push(JSON.parse(strJson));
|
||
|
||
}
|
||
//console.log('spxl_jcxm', _this.spxl_jcxm)
|
||
console.log('tables', _this.tables);
|
||
|
||
//加载提示页面显示
|
||
loading.close();
|
||
}))
|
||
|
||
}
|
||
})
|
||
|
||
|
||
</script> |