huatao-spc
/
huatao-spc-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

统计分析图表

master
daikun1@bosssoft.com.cn 1 year ago
parent
d618ef5eaf
commit
ad9ce08b85
8 changed files with 1106 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/spc/itembasic/index.ts
  2. 4
      src/api/spc/project/index.ts
  3. 4
      src/api/spc/templateItemDetails/index.ts
  4. 11
      src/api/tjanalysis/zlanalysis/index.ts
  5. 3
      src/utils/dict.ts
  6. 3
      src/views/tjanalysis/zlanalysis/components/math.js
  7. 326
      src/views/tjanalysis/zlanalysis/components/ztfbview.vue
  8. 752
      src/views/tjanalysis/zlanalysis/index.vue

4
src/api/spc/itembasic/index.ts
View File

@ -77,3 +77,7 @@ export const exportItembasic = async (params) => {
export const importTemplate = () => {
return request.download({ url: '/spc/itembasic/get-import-template' })
}
export const selectItems = async () => {
return await request.get({ url: `/spc/itembasic/selectItems`})
}

4
src/api/spc/project/index.ts
View File

@ -54,3 +54,7 @@ export const exportProject = async (params) => {
export const importTemplate = () => {
return request.download({ url: '/spc/project/get-import-template' })
}
export const selectAllPros = async () => {
return await request.get({ url: `/spc/project/selectAllPros`})
}

4
src/api/spc/templateItemDetails/index.ts
View File

@ -61,3 +61,7 @@ export const exportTemplateItemDetails = async (params) => {
export const importTemplate = () => {
return request.download({ url: '/spc/template-item-details/get-import-template' })
}
export const selectDetectionItems = async (itemCode: String , detectionType: String) => {
return await request.get({ url: `/spc/template-item-details/selectDetectionItems?itemCode=` + itemCode + `&detectionType=` + detectionType })
}

11
src/api/tjanalysis/zlanalysis/index.ts
View File

@ -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 })
}

3
src/utils/dict.ts
View File

@ -30,7 +30,8 @@ export const getIntDictOptions = (dictType: string) => {
dictOptions.forEach((dict: DictDataType) => {
dictOption.push({
...dict,
value: parseInt(dict.value + '')
// value: parseInt(dict.value + '')
value: dict.value + ''
})
})
return dictOption

3
src/views/tjanalysis/zlanalysis/components/math.js
View File

File diff suppressed because one or more lines are too long

326
src/views/tjanalysis/zlanalysis/components/ztfbview.vue
View File

@ -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>

752
src/views/tjanalysis/zlanalysis/index.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save