1 line
14 KiB
JSON
1 line
14 KiB
JSON
{"remainingRequest":"G:\\project\\smart-power-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!G:\\project\\smart-power-ui\\src\\views\\personal\\device\\profile\\runStateTable.vue?vue&type=style&index=0&id=cda514e4&scoped=true&lang=scss&","dependencies":[{"path":"G:\\project\\smart-power-ui\\src\\views\\personal\\device\\profile\\runStateTable.vue","mtime":1620957270262},{"path":"G:\\project\\smart-power-ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1592876569350},{"path":"G:\\project\\smart-power-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1610504274351},{"path":"G:\\project\\smart-power-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1591751774425},{"path":"G:\\project\\smart-power-ui\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1612140853844},{"path":"G:\\project\\smart-power-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1591751767036},{"path":"G:\\project\\smart-power-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1610504274351}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5saXN0LWNvbnRhaW5lciB7CiAgb3ZlcmZsb3c6IGF1dG87CiAgaGVpZ2h0OiA1MHZoOwogIHBhZGRpbmctYm90dG9tOiAxMHB4Owp9Ci5zaG93LWRhdGEtZm9vdGVyIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgcGFkZGluZy10b3A6IDEwcHg7Cn0KLnNob3ctZGF0YS1oZWFkZXIgewogIG1hcmdpbi1ib3R0b206IDE1cHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGhlaWdodDogMzRweDsKICBsaW5lLWhlaWdodDogMzJweDsKICAuaGVhZGVyLXRpbWUgewogICAgZGlzcGxheTogZmxleDsKICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAudGltZS1zZWxlY3QgewogICAgICB3aWR0aDogMTAwcHg7CiAgICAgIG1hcmdpbi1yaWdodDogOHB4OwogICAgfQogICAgLnRpbWUtcGlja2VyIHsKICAgICAgd2lkdGg6IDM1MHB4OwogICAgfQogIH0KfQo="},{"version":3,"sources":["runStateTable.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"runStateTable.vue","sourceRoot":"src/views/personal/device/profile","sourcesContent":["<template>\n <div class=\"public-custom-dialog show-chart\" id=\"showChart\">\n <div class=\"show-data-header\">\n <div class=\"header-time\">\n <div class=\"time-select\">\n <el-select v-model=\"timeValue\" placeholder=\"请选择\" size=\"small\" @change=\"selectChange\">\n <el-option\n v-for=\"item in timeOptions\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n ></el-option>\n </el-select>\n </div>\n <div class=\"time-picker\">\n <el-date-picker\n @change=\"pickerChange\"\n v-if=\"timeValue === '4'\"\n size=\"small\"\n v-model=\"pickerValue1\"\n type=\"datetimerange\"\n range-separator=\"至\"\n start-placeholder=\"开始日期\"\n end-placeholder=\"结束日期\"\n ></el-date-picker>\n </div>\n </div>\n <div class=\"eader-radio\">\n <el-radio-group v-model=\"showType\" size=\"small\">\n <el-radio-button label=\"表格\" :disabled=\"showlistDisable\"></el-radio-button>\n <el-radio-button label=\"图表\" :disabled=\"showchartDisable\"></el-radio-button>\n </el-radio-group>\n </div>\n </div>\n <div class=\"show-data-body\">\n <div id=\"chart\" style=\"width:100%;height:400px;\" v-show=\"showType === '图表'\"></div>\n <div class=\"list-container\" v-show=\"showType === '表格'\">\n <el-table :data=\"tableData\" class=\"device-topic-list\" style=\"width: 100%\">\n <el-table-column prop=\"time\" label=\"时间\" width=\"250\"></el-table-column>\n <el-table-column prop=\"value\" label=\"原始值\">\n <template slot-scope=\"scope\">\n <div class style=\"text-align: center;\" v-if=\"dialogData.funDataType === 'IMAGE'\">\n <el-image\n :title=\"dialogData.fileName\"\n style=\"width: 40px; height: 30px; margin: 5px;cursor: default;\"\n :src=\"getIotFileUrl(scope.row.value)\"\n :preview-src-list=\"[getIotFileUrl(scope.row.value)]\"\n ></el-image>\n </div>\n <div v-else>\n <span>{{returnStr(scope.row.value)}}</span>\n <span\n style=\" cursor: default; position: relative; right: -10px; color: #3a8ee6;\"\n @click=\"copyOnClick(scope.row.value)\"\n >复制</span>\n </div>\n </template>\n </el-table-column>\n </el-table>\n <el-button\n @click=\"loadMoreData\"\n v-show=\"tableData.length > 0\"\n style=\"margin-top: 10px; margin-left: 44%;\"\n class=\"load-more\"\n size=\"small\"\n v-text=\"loadMoreText\"\n :disabled=\"loadMoredisable\"\n ></el-button>\n </div>\n </div>\n <div class=\"show-data-footer\">\n <el-pagination\n :small=\"true\"\n @size-change=\"handleSizeChange\"\n @current-change=\"handleCurrentChange\"\n :current-page=\"page.page\"\n :page-sizes=\"[100, 500, 1000]\"\n :page-size=\"page.pageSize\"\n layout=\"total, sizes, prev, pager, next, jumper\"\n :total=\"page.total\"\n ></el-pagination>\n </div>\n </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts';\n// import { listDeviceTimeData } from \"@/api/device/device\";\nimport { getIotFileUrl } from \"@/utils/hciot\";\nexport default {\n name: \"RunStateTable\",\n props: [\"deviceKey\", \"dialogShow\", \"pro_type\", \"prodId\"],\n data() {\n return {\n timeValue: \"1\",\n pickerValue1: \"\",\n tableData: [],\n loadMoreText: \"已经全部加载\",\n loadMoredisable: true,\n showType: \"图表\",\n showchartDisable: false,\n showlistDisable: false,\n showDialog: true,\n chart: null,\n row: {},\n page: {\n page: 1,\n pageSize: 100,\n total: 0\n },\n timeOptions: [\n {\n label: \"1小时\",\n value: \"1\"\n },\n {\n label: \"24小时\",\n value: \"2\"\n },\n {\n label: \"7天\",\n value: \"3\"\n },\n {\n label: \"自定义\",\n value: \"4\"\n }\n ]\n };\n },\n created() {\n this.timeValue = \"1\";\n },\n mounted() {\n /*this.$nextTick(function() {\n this.initDialog()\n })*/\n },\n watch: {\n /*dialogData(obj) {\n this.initDialog()\n }*/\n },\n methods: {\n getIotFileUrl,\n copyOnClick(val) {\n let self = this;\n this.$copyText(val).then(\n function() {\n self.$message({\n message: \"复制成功\",\n type: \"success\"\n });\n },\n function() {\n self.$message.error(\"复制失败\");\n }\n );\n },\n returnStr(val) {\n if (val.length > 47) {\n return val.substring(0, 47) + \"... \";\n } else {\n return val;\n }\n },\n drawLine() {\n let param = {};\n let time = {};\n switch (this.timeValue) {\n case \"1\":\n time.startTime = Date.parse(\n new Date(new Date().getTime() - 1 * 60 * 60 * 1000)\n );\n time.endTime = Date.parse(new Date());\n break;\n case \"2\":\n time.startTime = Date.parse(\n new Date(new Date().getTime() - 24 * 60 * 60 * 1000)\n );\n time.endTime = Date.parse(new Date());\n break;\n case \"3\":\n time.startTime = Date.parse(\n new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)\n );\n time.endTime = Date.parse(new Date());\n break;\n default:\n time.startTime = Date.parse(this.pickerValue1[0]);\n time.endTime = Date.parse(this.pickerValue1[1]);\n }\n let listWhere = [];\n listWhere.push(\n {\n field: \"time\",\n operator: \"gt\",\n val: time.startTime,\n valType: \"time\"\n },\n {\n field: \"time\",\n operator: \"lt\",\n val: time.endTime,\n valType: \"time\"\n }\n );\n param.deviceKey = this.deviceKey;\n param.prodId = this.prodId;\n param.field = this.dialogData.funKey;\n param.orderType = 1;\n param.page = this.page.page;\n param.pageSize = this.page.pageSize;\n param.listWhere = listWhere;\n listDeviceTimeData(param).then(res => {\n let timeData = res.data.records;\n this.page.total = res.data.total;\n this.setShowChart(timeData);\n /*if(this.page.total > this.page.pageSize){\n this.getMoreTimeData(param)\n }*/\n });\n },\n setShowChart(timeData) {\n for (let item of timeData) {\n let dataItem = {\n time: this.parseTime(new Date(item.time)),\n value: item.value\n };\n this.tableData.push(dataItem);\n }\n let chartData = [...this.tableData];\n // chartData.reverse()\n let valueData = [];\n let xData = [];\n for (let point of chartData) {\n xData.push(point.time);\n valueData.push(point.value);\n }\n if (!this.chart) {\n var o = document.getElementById(\"showChart\");\n var w = o.clientWidth || o.offsetWidth;\n document.getElementById(\"chart\").style.width = w + \"px\";\n this.chart = echarts.init(document.getElementById(\"chart\"));\n }\n this.chart.setOption({\n tooltip: {\n trigger: \"axis\"\n },\n xAxis: {\n type: \"category\",\n data: xData\n },\n yAxis: {\n type: \"value\"\n },\n series: [\n {\n data: valueData,\n type: \"line\"\n }\n ]\n });\n },\n loadMoreData() {},\n getMoreTimeData(param) {\n if (!this.showDialog) {\n return;\n }\n this.page.page += 1;\n param.page = this.page.page;\n listDeviceTimeData(param).then(res => {\n let timeData = res.data.data.records;\n this.page.total = res.data.data.total;\n this.setShowChart(timeData);\n if (this.page.total > this.page.pageSize * this.page.page) {\n this.getMoreTimeData(param);\n }\n });\n },\n initDialog(dialogData) {\n if (dialogData) {\n this.dialogData = dialogData;\n } else {\n return;\n }\n if (!this.dialogData.funDataType || !document.querySelector(\"#chart\")) {\n return;\n }\n this.timeValue = \"1\";\n this.showDialog = true;\n this.tableData = [];\n this.page = {\n page: 1,\n pageSize: 100,\n total: 0\n };\n if (\n this.dialogData.funDataType === \"TEXT\" ||\n this.dialogData.funDataType === \"DATE\" ||\n this.dialogData.funDataType === \"IMAGE\"\n ) {\n this.showchartDisable = true;\n this.showType = \"表格\";\n } else {\n this.showchartDisable = false;\n this.showType = \"图表\";\n }\n this.drawLine();\n },\n handleShowDialog() {},\n close() {\n this.timeValue = \"1\";\n this.showDialog = false;\n },\n selectChange(val) {\n if (val !== \"4\") {\n this.showDialog = true;\n this.tableData = [];\n this.page = {\n page: 1,\n pageSize: 100,\n total: 0\n };\n this.drawLine();\n }\n },\n pickerChange() {\n this.showDialog = true;\n this.tableData = [];\n this.page = {\n page: 1,\n pageSize: 100,\n total: 0\n };\n this.drawLine();\n },\n handleSizeChange(val) {\n this.page.pageSize = val;\n this.tableData = [];\n this.drawLine();\n },\n handleCurrentChange(val) {\n this.page.page = val;\n this.tableData = [];\n this.drawLine();\n }\n }\n};\n</script>\n\n<style scoped lang=\"scss\">\n.list-container {\n overflow: auto;\n height: 50vh;\n padding-bottom: 10px;\n}\n.show-data-footer {\n text-align: center;\n padding-top: 10px;\n}\n.show-data-header {\n margin-bottom: 15px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 34px;\n line-height: 32px;\n .header-time {\n display: flex;\n align-items: center;\n .time-select {\n width: 100px;\n margin-right: 8px;\n }\n .time-picker {\n width: 350px;\n }\n }\n}\n</style>\n<style lang=\"scss\">\n.public-custom-dialog.show-chart {\n .el-dialog__body {\n padding: 15px 20px;\n }\n .el-dialog__footer {\n padding-top: 0;\n }\n}\n</style>\n"]}]} |