daikun1@bosssoft.com.cn
1 year ago
8 changed files with 1106 additions and 1 deletions
@ -0,0 +1,11 @@ |
|||||
|
import request from '@/config/axios' |
||||
|
|
||||
|
// 查询统计分析数据
|
||||
|
export const getZcnlInfos = async (params) => { |
||||
|
return await request.get({ url: `/tjanalysis/getZcnlInfos` , params }) |
||||
|
} |
||||
|
|
||||
|
// 查询统计分析数据
|
||||
|
export const getZcnlEcharts = async (params) => { |
||||
|
return await request.get({ url: `/tjanalysis/getZcnlEcharts` , params }) |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,326 @@ |
|||||
|
<template> |
||||
|
<div v-if="dialogVisible"> |
||||
|
<div id="ztEcharts" style="width: 80vw; height: 300px"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import * as echarts from 'echarts' |
||||
|
import * as math from './math' |
||||
|
|
||||
|
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const open = (_data , _lowLimit , _upLimit) => { |
||||
|
initData(_data , _lowLimit , _upLimit) |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
|
||||
|
function func(x, u, a) { |
||||
|
return ( |
||||
|
(1 / Math.sqrt(2 * Math.PI)) * |
||||
|
a * |
||||
|
Math.exp((-1 * ((x - u) * (x - u))) / (2 * a * a)) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const initData = async (data , xMin , xMax) => { |
||||
|
var mean = math.mean(data) //平均值 计算方法来自math.js |
||||
|
var stdev = math.std(data) //方差 |
||||
|
var threeSigUp = mean + 3 * stdev |
||||
|
var threeSigLow = mean - 3 * stdev |
||||
|
|
||||
|
const resNum = await getResNum(data) |
||||
|
const xArr = await getXArr(resNum) |
||||
|
const fArr = await getFArr(xArr , resNum) |
||||
|
const yArr = await getYArr(xMax , xMin , mean , stdev) |
||||
|
|
||||
|
setEchartData(xMin , xMax , yArr , fArr , threeSigLow , threeSigUp) |
||||
|
} |
||||
|
|
||||
|
const getResNum = async (datas) => { |
||||
|
var resNum = {} |
||||
|
const dataSec = datas.sort((a, b) => { |
||||
|
return a - b; |
||||
|
}) |
||||
|
|
||||
|
for (var m = 0; m < dataSec.length; m++) { |
||||
|
var key = parseFloat(dataSec[m]); |
||||
|
if (parseFloat(key + '') === 0) continue; |
||||
|
if (resNum[key]) resNum[key] += 1 |
||||
|
else resNum[key] = 1 |
||||
|
} |
||||
|
|
||||
|
return resNum |
||||
|
} |
||||
|
|
||||
|
const getXArr = async (resNum) => { |
||||
|
var xArr = [] //横坐标值 |
||||
|
for (var k in resNum) { |
||||
|
xArr.push(parseFloat(k)) |
||||
|
} |
||||
|
xArr = xArr.sort((a, b) => { |
||||
|
return a - b; |
||||
|
}) |
||||
|
return xArr |
||||
|
} |
||||
|
|
||||
|
const getFArr = async (xArr , resNum) => { |
||||
|
var fArr = [] //频数 |
||||
|
//计算x值对应的频数 |
||||
|
for (var i = 0; i < xArr.length; i++) { |
||||
|
var xNy = [xArr[i], resNum[xArr[i]]] |
||||
|
fArr.push(xNy) |
||||
|
} |
||||
|
return fArr |
||||
|
} |
||||
|
|
||||
|
const getYArr = async (xMax , xMin , mean , stdev) => { |
||||
|
var yArr = [] //正态值 |
||||
|
//计算x值对应的正态分布值 |
||||
|
var distance = xMax - xMin //为了更好看，设置正态曲线起止位置 |
||||
|
for (var j = xMin + distance / 4; j < xMax - distance / 4; j += 0.01) { |
||||
|
var xy = [j, func(j, mean, stdev)] |
||||
|
yArr.push(xy) |
||||
|
} |
||||
|
return yArr |
||||
|
} |
||||
|
|
||||
|
// 渲染echarts图表 |
||||
|
function setEchartData(xMin , xMax , yArr , fArr , threeSigLow , threeSigUp) { |
||||
|
var dom = document.getElementById("ztEcharts") |
||||
|
var myChart = echarts.init(dom, null, { |
||||
|
renderer: "canvas", |
||||
|
useDirtyRect: false |
||||
|
}) |
||||
|
var option = { |
||||
|
//backgroundColor: "#12141e", |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "shadow" |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: "vertical", |
||||
|
x: "right", |
||||
|
y: "top", |
||||
|
top: "5px", |
||||
|
data: ["频数", "正态分布"], |
||||
|
textStyle: { |
||||
|
color: "rgba(255,255,255,1)", |
||||
|
fontSize: "12" |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "2%", |
||||
|
top: "18px", |
||||
|
right: "2%", |
||||
|
bottom: "2%", |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
|
min: xMin, |
||||
|
max: xMax, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
color: "rgba(255,255,255,1)", |
||||
|
fontSize: 10 |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(255,255,255,1)" |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "value", //数值轴 |
||||
|
name: "正态曲线", |
||||
|
position: "right", |
||||
|
axisTick: { show: true }, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "rgba(255,255,255,1)" |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: "rgba(255,255,255,1)", |
||||
|
fontSize: 10 |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: "value", |
||||
|
name: "频数", |
||||
|
position: "left", |
||||
|
axisLabel: { |
||||
|
//formatter: '{value} %' |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: "rgba(255,255,255,1)", |
||||
|
fontSize: "12" |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(0,0,0,.1)", |
||||
|
width: 1, |
||||
|
type: "solid" |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: "rgba(255,255,255,.3)" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "正态分布", |
||||
|
type: "line", |
||||
|
smooth: true, |
||||
|
yAxisIndex: 0, |
||||
|
symbol: "circle", |
||||
|
symbolSize: 5, |
||||
|
showSymbol: false, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
color: "#ceb664", |
||||
|
width: 2 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "#ceb664", |
||||
|
borderColor: "rgba(221, 220, 107, .1)", |
||||
|
borderWidth: 10 |
||||
|
} |
||||
|
}, |
||||
|
data: yArr, |
||||
|
markLine: { |
||||
|
symbol: ["none"], |
||||
|
lineStyle: { |
||||
|
type: "dotted", |
||||
|
color: "yellow" |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
color: "black" |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: "end" |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
name: "3σ", |
||||
|
xAxis: threeSigLow.toFixed(2), |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: "3σ" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: "3σ", |
||||
|
xAxis: threeSigUp.toFixed(2), |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: "3σ" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: "频数", |
||||
|
type: "bar", |
||||
|
yAxisIndex: 1, |
||||
|
xAxisIndex: 0, |
||||
|
barWidth: 8, |
||||
|
barGap: 1, |
||||
|
symbol: "solid", |
||||
|
symbolSize: 5, |
||||
|
showSymbol: true, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "#0184d5", |
||||
|
opacity: 1, |
||||
|
barBorderRadius: 3 |
||||
|
} |
||||
|
}, |
||||
|
data: fArr, |
||||
|
markLine: { |
||||
|
symbol: ["none"], |
||||
|
lineStyle: { |
||||
|
type: "dotted", |
||||
|
color: "red" |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
color: "black" |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: "middle" |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
name: "LowLimit", |
||||
|
xAxis: xMin.toFixed(2), |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: "Low" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: "High", |
||||
|
xAxis: xMax.toFixed(2), |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: "High" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
if (option && typeof option === "object") { |
||||
|
myChart.setOption(option) |
||||
|
} |
||||
|
|
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
myChart.resize() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
@ -0,0 +1,752 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<ContentWrap class="search"> |
||||
|
<el-form |
||||
|
:inline="true" |
||||
|
:model="queryParams" |
||||
|
class="demo-form-inline" |
||||
|
style="margin-bottom: -17px" |
||||
|
label-width="100px" |
||||
|
> |
||||
|
<el-form-item label="项目" style="width: calc(20% - 32px)"> |
||||
|
<el-select |
||||
|
v-model="queryParams.proCode" |
||||
|
placeholder="请选择项目" |
||||
|
clearable |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-option v-for=" (item) in projectList" :key="item" :label="item.name" :value="item.code" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="物料" style="width: calc(20% - 32px)"> |
||||
|
<el-select |
||||
|
v-model="queryParams.itemCode" |
||||
|
placeholder="请选择物料" |
||||
|
clearable |
||||
|
style="width: 100%" |
||||
|
@change="detectionItemChange" |
||||
|
> |
||||
|
<el-option v-for=" (item) in itemList" :key="item" :label="item.name" :value="item.code" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="物料类型" style="width: calc(20% - 32px)"> |
||||
|
<el-select |
||||
|
v-model="queryParams.detectionType" |
||||
|
placeholder="请选择检测类型" |
||||
|
clearable |
||||
|
style="width: 100%" |
||||
|
@change="detectionItemChange" |
||||
|
> |
||||
|
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="检测项" style="width: calc(20% - 32px)"> |
||||
|
<el-select |
||||
|
v-model="queryParams.detectionItemContentId" |
||||
|
placeholder="请选择检测项" |
||||
|
clearable |
||||
|
style="width: 100%" |
||||
|
@change="deItemChange" |
||||
|
> |
||||
|
<el-option v-for=" (item) in detectionItemList" :key="item" :label="item.name" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="检测日期" style="width: calc(20% - 32px)"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.detectionDate" |
||||
|
type="date" |
||||
|
placeholder="请选择日期" |
||||
|
clearable |
||||
|
value-format="YYYY-MM-DD" |
||||
|
@change="deDateChange" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item> |
||||
|
<el-button type="info" plain @click="handleQuery"> |
||||
|
<Icon class="mr-5px" icon="ep:search" /> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
</el-form-item> --> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
<ContentWrap class="search"> |
||||
|
<div class="title">制程能力指数（CPK）</div> |
||||
|
<div class="cpk" v-loading="pnaLoading"> |
||||
|
<div class="cpk-item"> |
||||
|
<div class="cpk-item-1"> |
||||
|
<div class="cpk-item-label">CP</div> |
||||
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cp : '' }}</div> |
||||
|
</div> |
||||
|
<div class="cpk-item-1"> |
||||
|
<div class="cpk-item-label">CPK</div> |
||||
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cpk : '' }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cpk-item"> |
||||
|
<div class="cpk-item-1"> |
||||
|
<div class="cpk-item-label">PP</div> |
||||
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.pp : '' }}</div> |
||||
|
</div> |
||||
|
<div class="cpk-item-1"> |
||||
|
<div class="cpk-item-label">PPK</div> |
||||
|
<div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.ppk : '' }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cpk-item1"> |
||||
|
<div class="cpk-item-2"> |
||||
|
<div class="cpk-item-label"><span>零件号</span> <span>{{ datas.tzrv != null? datas.tzrv.itemCode : '' }}</span></div> |
||||
|
<div class="cpk-item-label"><span>检测内容</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemContents : '' }}</span></div> |
||||
|
</div> |
||||
|
<div class="cpk-item-2"> |
||||
|
<div class="cpk-item-label"><span>公差下限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemDownLimt : '' }}</span></div> |
||||
|
<div class="cpk-item-label"><span>公差上限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemUpLimit : '' }}</span></div> |
||||
|
</div> |
||||
|
<div class="cpk-item-2"> |
||||
|
<div class="cpk-item-label"><span>X中值</span> <span>{{ datas.tzrv != null? datas.tzrv.xavg : '' }}</span></div> |
||||
|
<div class="cpk-item-label"><span>R中值</span> <span>{{ datas.tzrv != null? datas.tzrv.ravg : '' }}</span></div> |
||||
|
</div> |
||||
|
<div class="cpk-item-2"> |
||||
|
<div class="cpk-item-label"><span>UCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.uclx : '' }}</span></div> |
||||
|
<div class="cpk-item-label"><span>LCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.lclx : '' }}</span></div> |
||||
|
</div> |
||||
|
<div class="cpk-item-2"> |
||||
|
<div class="cpk-item-label"><span>UCLn</span> <span>{{ datas.tzrv != null? datas.tzrv.ucln : '' }}</span></div> |
||||
|
<div class="cpk-item-label"><span>LCLn</span> <span>{{ datas.tzrv != null? datas.tzrv.lcln : '' }}</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<table border="1" width="100%" align="center" border-collapse="collapse" v-loading="tabLoading"> |
||||
|
<tr class="td-bg"> |
||||
|
<td colspan="2">样本</td> |
||||
|
<td>1</td> |
||||
|
<td>2</td> |
||||
|
<td>3</td> |
||||
|
<td>4</td> |
||||
|
<td>5</td> |
||||
|
<td>6</td> |
||||
|
<td>7</td> |
||||
|
<td>8</td> |
||||
|
<td>9</td> |
||||
|
<td>10</td> |
||||
|
<td>12</td> |
||||
|
<td>13</td> |
||||
|
<td>14</td> |
||||
|
<td>15</td> |
||||
|
<td>16</td> |
||||
|
<td>17</td> |
||||
|
<td>18</td> |
||||
|
<td>19</td> |
||||
|
<td>20</td> |
||||
|
<td>21</td> |
||||
|
<td>22</td> |
||||
|
<td>23</td> |
||||
|
<td>24</td> |
||||
|
<td>25</td> |
||||
|
</tr> |
||||
|
<tr v-for="(item , index) in datas.tvList" :key="item"> |
||||
|
<td v-if="index == 0" rowspan="8" class="td-bg">检测记录</td> |
||||
|
<td v-if="index == 5" class="td-bg">合计值</td> |
||||
|
<td v-else-if="index == 6" class="td-bg">平均值</td> |
||||
|
<td v-else-if="index == 7" class="td-bg">极差值</td> |
||||
|
<td v-else class="td-bg">{{ index + 1 }}</td> |
||||
|
<td>{{ item.oneDv }}</td> |
||||
|
<td>{{ item.twoDv }}</td> |
||||
|
<td>{{ item.thrDv }}</td> |
||||
|
<td>{{ item.fouDv }}</td> |
||||
|
<td>{{ item.fivDv }}</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</ContentWrap> |
||||
|
<ContentWrap class="search"> |
||||
|
<div class="tabs"> |
||||
|
<div class="title" :class="tabIndex == 0 ? 'active' : ''" @click="changTabIndex(0)">控制图</div> |
||||
|
<div class="title" :class="tabIndex == 1 ? 'active' : ''" @click="changTabIndex(1)">CPK分析图</div> |
||||
|
<div class="title" :class="tabIndex == 2 ? 'active' : ''" @click="changTabIndex(2)">样本运行图</div> |
||||
|
<div class="title" :class="tabIndex == 3 ? 'active' : ''" @click="changTabIndex(3)">均值运行图</div> |
||||
|
</div> |
||||
|
<div class="charts" v-show="tabIndex == 0"> |
||||
|
<div id="myEcharts1" :style="{ width: '50%', height: '300px' }" v-loading="ec1Loading"></div> |
||||
|
<div id="myEcharts2" :style="{ width: '50%', height: '300px' }" v-loading="ec2Loading"></div> |
||||
|
</div> |
||||
|
<div class="charts" v-show="tabIndex == 1"> |
||||
|
<div id="myEcharts3" :style="{ width: '80vw', height: '300px' }" v-loading="ec3Loading"></div> |
||||
|
</div> |
||||
|
<div class="charts" v-show="tabIndex == 2"> |
||||
|
<div id="myEcharts4" :style="{ width: '80vw', height: '300px' }" v-loading="ec4Loading"></div> |
||||
|
</div> |
||||
|
<div class="charts" v-show="tabIndex == 3"> |
||||
|
<div id="myEcharts5" :style="{ width: '80vw', height: '300px' }" v-loading="ec5Loading"></div> |
||||
|
</div> |
||||
|
</ContentWrap> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import * as echarts from 'echarts' |
||||
|
import * as ZlnalysisAPI from '@/api/tjanalysis/zlanalysis' |
||||
|
import * as ProjecAPI from '@/api/spc/project' |
||||
|
import * as ItembasicApi from '@/api/spc/itembasic' |
||||
|
import * as TemplateItemDetailsApi from '@/api/spc/templateItemDetails' |
||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
|
import {formatDate} from '@/utils/formatTime' |
||||
|
// import { listSimpleDictData } from '@/api/system/dict/dict.data' |
||||
|
|
||||
|
|
||||
|
let echart = echarts |
||||
|
// 项目列表 |
||||
|
const projectList = ref() |
||||
|
// 物料列表 |
||||
|
const itemList = ref() |
||||
|
// 检测项列表 |
||||
|
const detectionItemList = ref() |
||||
|
const pnaLoading = ref(true) |
||||
|
const tabLoading = ref(true) |
||||
|
const ec1Loading = ref(true) |
||||
|
const ec2Loading = ref(true) |
||||
|
const ec3Loading = ref(true) |
||||
|
const ec4Loading = ref(true) |
||||
|
const ec5Loading = ref(true) |
||||
|
|
||||
|
|
||||
|
const queryParams = reactive({ |
||||
|
proCode: '', |
||||
|
itemCode: '', |
||||
|
detectionType: '', |
||||
|
detectionItemContentId: null, |
||||
|
detectionDate: formatDate(new Date() , 'YYYY-MM-DD'), |
||||
|
ecTab: '1' |
||||
|
}) |
||||
|
|
||||
|
const datas = reactive({ |
||||
|
tvList : null, |
||||
|
tzrv: null, |
||||
|
echatrtData: null, |
||||
|
ranData: null |
||||
|
}) |
||||
|
|
||||
|
const tabIndex = ref(0) |
||||
|
|
||||
|
// 设置延期未交付数据 |
||||
|
function setChart1(datavv) { |
||||
|
let chart = echart.init(document.getElementById('myEcharts1'), 'light') |
||||
|
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
|
title: { |
||||
|
text: 'RANGE CHART' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: datavv != null? datavv.legend : [], |
||||
|
top: '0', |
||||
|
right: '3%' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: datavv != null? datavv.xDatas : [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[0] : '', |
||||
|
data: datavv != null? datavv.yDatas[0] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[1] : '', |
||||
|
data: datavv != null? datavv.yDatas[1] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[2] : '', |
||||
|
data: datavv != null? datavv.yDatas[2] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[3] : '', |
||||
|
data: datavv != null? datavv.yDatas[3] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[4] : '', |
||||
|
data: datavv != null? datavv.yDatas[4] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: datavv != null? datavv.legend[5] : '', |
||||
|
data: datavv != null? datavv.yDatas[5] : [], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
function setChart2(rangeData) { |
||||
|
let chart = echart.init(document.getElementById('myEcharts2'), 'light') |
||||
|
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
|
title: { |
||||
|
text: 'RANGE CHART' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: rangeData != null ? rangeData.legend : [], |
||||
|
top: '0', |
||||
|
right: '3%' |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: rangeData != null ? rangeData.xDatas : [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: rangeData != null ? rangeData.legend[0] : '', |
||||
|
data: rangeData != null ? rangeData.yDatas[0] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: rangeData != null ? rangeData.legend[1] : '', |
||||
|
data: rangeData != null ? rangeData.yDatas[1] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: rangeData != null ? rangeData.legend[2] : '', |
||||
|
data: rangeData != null ? rangeData.yDatas[2] : [], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: rangeData != null ? rangeData.legend[3] : '', |
||||
|
data: rangeData != null ? rangeData.yDatas[3] : [], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
function setChart3() { |
||||
|
let chart = echart.init(document.getElementById('myEcharts3'), 'light') |
||||
|
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
crossStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['Evaporation', 'Precipitation', 'Temperature'] |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: 'Precipitation', |
||||
|
min: 0, |
||||
|
max: 250, |
||||
|
interval: 50, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ml' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: 'Temperature', |
||||
|
min: 0, |
||||
|
max: 25, |
||||
|
interval: 5, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} °C' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '原数据频率', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' ml' |
||||
|
} |
||||
|
}, |
||||
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
||||
|
}, |
||||
|
{ |
||||
|
name: '正态分布', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 1, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' °C' |
||||
|
} |
||||
|
}, |
||||
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
function setChart4(ybData) { |
||||
|
let chart = echart.init(document.getElementById('myEcharts4'), 'light') |
||||
|
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
|
// title: { |
||||
|
// text: '样本运行图' |
||||
|
// }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: ['Highest', 'Lowest'], |
||||
|
// top: '0', |
||||
|
// right: '3%' |
||||
|
// }, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ybData != null ? ybData.xDatas : [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '检测值', |
||||
|
data: ybData != null ? ybData.yDatas : [], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
function setChart5(jzData) { |
||||
|
let chart = echart.init(document.getElementById('myEcharts5'), 'light') |
||||
|
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
|
// title: { |
||||
|
// text: '均值运行图' |
||||
|
// }, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
// legend: { |
||||
|
// data: ['Highest', 'Lowest'], |
||||
|
// top: '0', |
||||
|
// right: '3%' |
||||
|
// }, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: jzData != null ? jzData.xDatas : [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '均值', |
||||
|
data: jzData != null ? jzData.yDatas : [], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const detectionItemChange = async()=> { |
||||
|
detectionItemList.value = null |
||||
|
queryParams.detectionItemContentId = null |
||||
|
const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType) |
||||
|
if (_detectionItemList != null && _detectionItemList.length != 0) { |
||||
|
detectionItemList.value = _detectionItemList |
||||
|
queryParams.detectionItemContentId = _detectionItemList[0].value |
||||
|
} |
||||
|
initData() |
||||
|
} |
||||
|
|
||||
|
const deItemChange = async(value)=> { |
||||
|
queryParams.detectionItemContentId = value |
||||
|
initData() |
||||
|
} |
||||
|
|
||||
|
const deDateChange = async (value) => { |
||||
|
initData() |
||||
|
} |
||||
|
|
||||
|
const changTabIndex = async (tIndexV) => { |
||||
|
ec1Loading.value = true |
||||
|
ec2Loading.value = true |
||||
|
ec3Loading.value = true |
||||
|
ec4Loading.value = true |
||||
|
ec5Loading.value = true |
||||
|
tabIndex.value = tIndexV |
||||
|
queryParams.ecTab = tIndexV |
||||
|
const dvDatas = await ZlnalysisAPI.getZcnlEcharts(queryParams) |
||||
|
if (dvDatas != null) { |
||||
|
if (tIndexV == 0) { |
||||
|
setChart1(dvDatas.menMap) |
||||
|
setChart2(dvDatas.ranMap) |
||||
|
ec1Loading.value = false |
||||
|
ec2Loading.value = false |
||||
|
} else if (tIndexV == 1) { |
||||
|
|
||||
|
} else if (tIndexV == 2) { |
||||
|
setChart4(dvDatas.ybMap) |
||||
|
ec4Loading.value = false |
||||
|
} else if (tIndexV == 3) { |
||||
|
setChart5(dvDatas.jzMap) |
||||
|
ec5Loading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const initData = async () => { |
||||
|
await resetDats() |
||||
|
const _datas = await ZlnalysisAPI.getZcnlInfos(queryParams) |
||||
|
if (_datas != null) { |
||||
|
datas.tvList = _datas.tvList |
||||
|
datas.tzrv = _datas.tzrv |
||||
|
setChart1(_datas.menMap) |
||||
|
setChart2(_datas.ranMap) |
||||
|
} else { |
||||
|
setChart1(null) |
||||
|
setChart2(null) |
||||
|
} |
||||
|
|
||||
|
pnaLoading.value = false |
||||
|
tabLoading.value = false |
||||
|
ec1Loading.value = false |
||||
|
ec2Loading.value = false |
||||
|
} |
||||
|
|
||||
|
const initQuerys = async () => { |
||||
|
const dictOptions = await getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE) |
||||
|
if (dictOptions != null && dictOptions.length != 0) { |
||||
|
queryParams.detectionType = dictOptions[0].value + '' |
||||
|
} |
||||
|
const _projectList = await ProjecAPI.selectAllPros() |
||||
|
if (_projectList != null && _projectList.length != 0) { |
||||
|
projectList.value = _projectList |
||||
|
} |
||||
|
const _itemList = await ItembasicApi.selectItems() |
||||
|
if (_itemList != null && _itemList.length != 0) { |
||||
|
itemList.value = _itemList |
||||
|
queryParams.itemCode = _itemList[0].code |
||||
|
} |
||||
|
const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType) |
||||
|
if (_detectionItemList != null && _detectionItemList.lenght != 0) { |
||||
|
detectionItemList.value = _detectionItemList |
||||
|
queryParams.detectionItemContentId = _detectionItemList[0].value |
||||
|
} |
||||
|
|
||||
|
initData() |
||||
|
} |
||||
|
|
||||
|
function resetDats() { |
||||
|
pnaLoading.value = true |
||||
|
tabLoading.value = true |
||||
|
ec1Loading.value = true |
||||
|
ec2Loading.value = true |
||||
|
ec3Loading.value = true |
||||
|
ec4Loading.value = true |
||||
|
ec5Loading.value = true |
||||
|
|
||||
|
datas.tvList = null |
||||
|
datas.tzrv = null |
||||
|
datas.echatrtData = null |
||||
|
datas.ranData = null |
||||
|
} |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
initQuerys() |
||||
|
}) |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.search { |
||||
|
background: white; |
||||
|
} |
||||
|
::v-deep.el-form-item--default .el-form-item__label { |
||||
|
padding: 0px 20px !important; |
||||
|
background: rgb(53, 158, 256) !important; |
||||
|
color: white !important; |
||||
|
} |
||||
|
.title { |
||||
|
margin-bottom: 20px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.cpk { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.cpk-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 10%; |
||||
|
margin-right: 10px; |
||||
|
background: rgb(235, 243, 255); |
||||
|
border: 1px solid rgb(44, 135, 255); |
||||
|
height: 60px; |
||||
|
justify-content: center; |
||||
|
.cpk-item-1 { |
||||
|
text-align: center; |
||||
|
margin: 0px 10px; |
||||
|
.cpk-item-label { |
||||
|
color: #a8a8a8; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.cpk-item-value { |
||||
|
color: #000000; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.cpk-item1 { |
||||
|
background: rgb(245, 245, 245); |
||||
|
flex: 1; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
height: 60px; |
||||
|
.cpk-item-2 { |
||||
|
.cpk-item-label { |
||||
|
color: #a8a8a8; |
||||
|
font-size: 12px; |
||||
|
span { |
||||
|
&:nth-child(1) { |
||||
|
width: 60px; |
||||
|
display: inline-block; |
||||
|
text-align: right; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
margin-right: 6px; |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
table { |
||||
|
width: 100%; |
||||
|
/*居中*/ |
||||
|
margin: 20px auto 0px; |
||||
|
/*边框*/ |
||||
|
/* border: 1px solid black; */ |
||||
|
|
||||
|
border-collapse: collapse; |
||||
|
/*设置背景颜色*/ |
||||
|
/* background-color: #bfa; */ |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* 设置边框 |
||||
|
*/ |
||||
|
td, |
||||
|
th { |
||||
|
border: 1px solid rgb(200, 200, 200); |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* 设置隔行变色 |
||||
|
*/ |
||||
|
// tbody > tr:nth-child(even) { |
||||
|
// background-color: #bfa; |
||||
|
// } |
||||
|
|
||||
|
/* |
||||
|
* 鼠标移入到tr以后，改变颜色 |
||||
|
*/ |
||||
|
// tr:hover { |
||||
|
// background-color: #ff0; |
||||
|
// } |
||||
|
.td-bg { |
||||
|
background: rgb(231, 244, 248); |
||||
|
} |
||||
|
.tabs { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
> div { |
||||
|
height: 30px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.active { |
||||
|
color: rgb(44, 135, 255); |
||||
|
font-weight: bold; |
||||
|
border-bottom: 2px solid rgb(44, 135, 255); |
||||
|
} |
||||
|
} |
||||
|
.charts { |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue