| | |
| | | </div> |
| | | </el-col> --> |
| | | <el-col> |
| | | <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px"> |
| | | <el-form :model="queryParams" ref="queryRef" :inline="true" label-position="left"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="统计日期" style="width: 50%;"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="统计日期" :style="{ width: '100%' }"> |
| | | <el-date-picker |
| | | v-model="totalDay" |
| | | value-format="YYYY-MM" |
| | |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" style="text-align: right;"> |
| | | <el-form-item> |
| | | <!-- <el-col :span="16" style="text-align: right;"> |
| | | <el-form-item class="column-with-margin"> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="Refresh" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-col> --> |
| | | </el-row> |
| | | </el-form> |
| | | </el-col> |
| | | <el-col> |
| | | <div ref="chartRef" v-show="showSearch" :style="{ width:width,height:height }"></div> |
| | | <div ref="chartRef" :style="{ width:width,height:height,border: '1px solid #ccc' }" v-loading="loading"> |
| | | <div style="text-align: center;margin-top: 50px;color: #999;">暂无数据</div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | <script setup name="WeldSeamEcharts"> |
| | | import * as echarts from 'echarts'; |
| | | import { weldSeamEchartsList} from "@/api/mainPlan/weldSeamEcharts/weldSeamEcharts"; |
| | | const totalDay = ref([]); |
| | |
| | | const width = ref(document.documentElement.clientWidth - 240 + "px"); |
| | | |
| | | const showSearch = ref(false); |
| | | const loading = ref(false); |
| | | |
| | | /* const dataList = [ |
| | | ['product', '南通-订单-管路', '南通-订单-气柜', '南通-预测-管路', '南通-预测-气柜', '南通-预测-管路1', '南通-预测-气柜1', '南通-预测-管路2', '南通-预测-气柜2', '南通-预测-管路3', '南通-预测-气柜3', '南通-预测-管路4', '南通-预测-气柜4'], |
| | |
| | | show: true, |
| | | feature: { |
| | | saveAsImage: {}, |
| | | magicType: { |
| | | /* magicType: { |
| | | show: true, |
| | | type: ['line','bar','stack','tiled'], |
| | | }, |
| | | restore: {//还原原始图表 |
| | | show: true |
| | | }, |
| | | }, */ |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 使用配置项显示图表 |
| | | myChart.setOption(option); |
| | | loading.value = false; |
| | | }; |
| | | |
| | | /** 搜索按钮操作 */ |
| | |
| | | } |
| | | |
| | | function getList() { |
| | | loading.value = true; |
| | | clearChart(); |
| | | queryParams.value.params = {}; |
| | | if (null != totalDay && '' != totalDay) { |
| | | if (null != totalDay.value && '' != totalDay.value) { |
| | | queryParams.value.params["startDay"] = totalDay.value[0]; |
| | | queryParams.value.params["endDay"] = totalDay.value[1]; |
| | | } |
| | |
| | | if (myChart) { |
| | | myChart.dispose(); |
| | | myChart = null; |
| | | chartRef.value.innerHTML = '<div style="text-align: center;margin-top: 50px;color: #999;">暂无数据</div>'; |
| | | } |
| | | } |
| | | </script> |
| | | </script> |
| | | <style scoped> |
| | | .column-with-margin { |
| | | margin-right: 0px; |
| | | } |
| | | </style> |