|
@@ -0,0 +1,178 @@
|
|
|
+#set(title="数据查询与统计")
|
|
|
+#@header()
|
|
|
+<body>
|
|
|
+<div id="app" v-cloak>
|
|
|
+ <el-form :inline="true" label-width="auto">
|
|
|
+ <el-form-item label="实验部门" prop="state">
|
|
|
+ <el-cascader
|
|
|
+ v-model="param.value"
|
|
|
+ :options="options"
|
|
|
+ :props="props"
|
|
|
+ @change="handleChange"
|
|
|
+ :show-all-levels="false"
|
|
|
+ clearable>
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品线选择">
|
|
|
+ <el-select placeholder="请选择" v-model="param.item_pro_type">
|
|
|
+ <el-option v-for="(item,index) in prouname" :key="index" :value="item.ITEM_DIC_PROUNAME" :label="item.ITEM_DIC_PROUNAME"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="实验名称">
|
|
|
+ <el-input placeholder="请输入实验名称" v-model="param.item_test_name" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="样机型号">
|
|
|
+ <el-input placeholder="请输入样机型号" v-model="param.item_pro_num" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="param.created"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="float:right;">耗时: {{param.time}}</div>
|
|
|
+ </el-form>
|
|
|
+ <div id="echart" class="bar"></div>
|
|
|
+ <el-dialog title="数据查询与统计" width="87%" :visible.sync="dialogVisible" top="2%" append-to-body>
|
|
|
+ <el-table :data="tableData" style="width: 100%;">
|
|
|
+ <el-table-column prop="ITEM_WT_NUM" label="委托单号"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_TEST_NAME" align="center" label="试验名称"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_PRO_NUM" align="center" label="样机型号"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_PRO_TYPE" align="center" label="产品线"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_SJ_VALUE" align="center" label="设计参数"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_VALUE" align="center" label="结果值"></el-table-column>
|
|
|
+ <el-table-column prop="ITEM_REMARKS" align="center" label="备注"></el-table-column>
|
|
|
+ <el-table-column prop="CREATED" align="center" label="创建时间"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+<script src="#(path)/static/js/jquery.min.js"></script>
|
|
|
+<script src="#(path)/static/js/layer/layer.js"></script>
|
|
|
+<script src="#(path)/static/js/vue.js"></script>
|
|
|
+<script src="#(path)/static/js/common.js"></script>
|
|
|
+<script src="#(path)/static/js/echarts.min.js"></script>
|
|
|
+<script src="#(path)/static/js/element-ui.js"></script>
|
|
|
+<script>
|
|
|
+ let myChart = null;
|
|
|
+ let vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ dialogVisible: false,
|
|
|
+ tableData: [],
|
|
|
+ param: {
|
|
|
+ DOMAINID: '#(DOMAINID)',
|
|
|
+ ID: '#(ID)',
|
|
|
+ value: ['#(value)'],
|
|
|
+ begin: '#(begin)',
|
|
|
+ end: '#(end)',
|
|
|
+ created: ['#(begin)', '#(end)'],
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: 'ID',
|
|
|
+ label: 'NAME',
|
|
|
+ checkStrictly: true
|
|
|
+ },
|
|
|
+ prouname:#(prouname),
|
|
|
+ options: #(department)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ myChart = echarts.init(document.getElementById('echart'));
|
|
|
+ myChart.on('click', function (params) {
|
|
|
+ vm.dialogVisible = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(value) {
|
|
|
+ this.param.ID = value[value.length - 1]
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.param.begin = this.param.created[0];
|
|
|
+ this.param.end = this.param.created[1];
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ sendAjax("#(path)/report/data", this.param, res => {
|
|
|
+ cancelLoding();
|
|
|
+ vm.tableData = res.data;
|
|
|
+ vm.initEcharts(res.data);
|
|
|
+ vm.param.time = res.time;
|
|
|
+ vm.tableData = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initEcharts(data) {
|
|
|
+ let legend = [];
|
|
|
+ let series = [];
|
|
|
+ data.forEach(item => {
|
|
|
+ legend.push(item.ITEM_TEST_NAME);
|
|
|
+ series.push(item.ITEM_VALUE);
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '数据查询与统计',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: legend
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: series,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 15,
|
|
|
+ showSymbol: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#F44336'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: '#b14239'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+</html>
|