|
|
|
@ -5,39 +5,34 @@
|
|
|
|
|
:label-width=" locale ? '100px':'140px'">
|
|
|
|
|
<el-form-item label="外胎号" prop="outerTireNumber">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.outerTireNumber"
|
|
|
|
|
placeholder="请输入外胎号"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
clearable
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
v-model="queryParams.outerTireNumber"
|
|
|
|
|
placeholder="请输入外胎号"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
clearable
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="时间" style="width: 308px;">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateRange"
|
|
|
|
|
value-format="YYYY-MM-DD"
|
|
|
|
|
type="daterange"
|
|
|
|
|
range-separator="-"
|
|
|
|
|
start-placeholder="开始日期"
|
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
|
v-model="dateRange"
|
|
|
|
|
value-format="YYYY-MM-DD"
|
|
|
|
|
type="daterange"
|
|
|
|
|
range-separator="-"
|
|
|
|
|
start-placeholder="开始日期"
|
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
|
></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
|
<el-form-item label="轮位" prop="outerTireNumber">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="position"
|
|
|
|
|
:disabled="true">
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
|
|
|
<temp />
|
|
|
|
|
<temp ref="tempRef"/>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row :gutter="32">
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8" @click="handleTyreMileage">
|
|
|
|
@ -47,12 +42,12 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<pie-chart />
|
|
|
|
|
<pie-chart ref="pieRef"/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<bar-chart />
|
|
|
|
|
<bar-chart ref="barRef"/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
@ -60,77 +55,82 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup name="basetyre">
|
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
import Temp from '@/views/dashboard/Temp'
|
|
|
|
|
import RaddarChart from '@/views/dashboard/RaddarChart'
|
|
|
|
|
import PieChart from '@/views/dashboard/PieChart'
|
|
|
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
|
|
|
import {getTempdata} from "@/api/report/report";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
provide('echart', echarts)
|
|
|
|
|
const {t} = useI18n();
|
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
|
// 搜索区域开关标识
|
|
|
|
|
const showSearch = ref(true);
|
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
import Temp from '@/views/dashboard/Temp'
|
|
|
|
|
import RaddarChart from '@/views/dashboard/RaddarChart'
|
|
|
|
|
import PieChart from '@/views/dashboard/PieChart'
|
|
|
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
|
|
|
import {getTempdata} from "@/api/report/report";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
provide('echart', echarts)
|
|
|
|
|
const {t} = useI18n();
|
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
|
// 搜索区域开关标识
|
|
|
|
|
const showSearch = ref(true);
|
|
|
|
|
const dateRange = ref([]);
|
|
|
|
|
const tempRef = ref();
|
|
|
|
|
const pieRef = ref();
|
|
|
|
|
const barRef = ref()
|
|
|
|
|
|
|
|
|
|
// 搜索参数
|
|
|
|
|
const queryParams = ref({
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
})
|
|
|
|
|
// 搜索参数
|
|
|
|
|
const queryParams = ref({
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 表单验证规则
|
|
|
|
|
const rules = {
|
|
|
|
|
outerTireNumber: [{required: true, message: "胎号不能为空", trigger: "blur"}],
|
|
|
|
|
}
|
|
|
|
|
// 表单验证规则
|
|
|
|
|
const rules = {
|
|
|
|
|
outerTireNumber: [{required: true, message: "胎号不能为空", trigger: "blur"}],
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 表单数据
|
|
|
|
|
const form = ref({});
|
|
|
|
|
/** 表单重置 */
|
|
|
|
|
function reset() {
|
|
|
|
|
form.value = {
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
};
|
|
|
|
|
proxy.resetForm("postRef");
|
|
|
|
|
}
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
function handleQuery() {
|
|
|
|
|
getTempdata(queryParams.value).then(response => {
|
|
|
|
|
console.log(response)
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
});
|
|
|
|
|
//getList();
|
|
|
|
|
}
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
function handleTyreMileage() {
|
|
|
|
|
// 表单数据
|
|
|
|
|
const form = ref({});
|
|
|
|
|
/** 表单重置 */
|
|
|
|
|
function reset() {
|
|
|
|
|
form.value = {
|
|
|
|
|
outerTireNumber: null,
|
|
|
|
|
};
|
|
|
|
|
proxy.resetForm("postRef");
|
|
|
|
|
}
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
function handleQuery() {
|
|
|
|
|
getTempdata(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
|
|
|
|
|
tempRef.value.setData(response.data);
|
|
|
|
|
pieRef.value.setData(response?.data?.WarnData);
|
|
|
|
|
barRef.value.setData(response?.data?.patternTextureList)
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
//loading.value = false;
|
|
|
|
|
});
|
|
|
|
|
//getList();
|
|
|
|
|
}
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
function handleTyreMileage() {
|
|
|
|
|
|
|
|
|
|
// this.$tab.openPage("用户管理", "/system/user");
|
|
|
|
|
}
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
proxy.resetForm("queryRef");
|
|
|
|
|
handleQuery();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
proxy.resetForm("queryRef");
|
|
|
|
|
handleQuery();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.dashboard-editor-container {
|
|
|
|
|
padding: 32px;
|
|
|
|
|
background-color: rgb(240, 242, 245);
|
|
|
|
|
position: relative;
|
|
|
|
|
.dashboard-editor-container {
|
|
|
|
|
padding: 32px;
|
|
|
|
|
background-color: rgb(240, 242, 245);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 16px 16px 0;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
}
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 16px 16px 0;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width:1024px) {
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width:1024px) {
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|