1 line
15 KiB
JSON
1 line
15 KiB
JSON
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue","mtime":1677386980815},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport avgChart from \"../chart/avgChart.vue\";\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport pieChart from \"../chart/pieChart.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n name: 'typeChart',\n //类型组件\n props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n components: {\n lineChart: lineChart,\n barChart: barChart,\n tableShow: tableShow,\n detailDialog: detailDialog,\n regionTable: regionTable,\n pieChart: pieChart,\n avgChart: avgChart\n },\n data: function data() {\n return {\n // 类型数值\n total: 0,\n // 速度数值\n speed: 0,\n // 流量数值\n flow: 0,\n isRefer: true,\n valueShow: {},\n //排队数\n queue: ''\n };\n },\n created: function created() {\n console.log(this.title);\n },\n methods: {\n // 计算类型数量的总和\n getTotal: function getTotal(dataArr) {\n if (this.title == '类型') {\n return dataArr[0].type_data.reduce(function (prev, cur) {\n return cur.quantity + prev;\n }, 0);\n }\n },\n // 计算类型的数值\n getNewQueue: function getNewQueue(dataArr) {\n if (dataArr[0].timeMode == '触发') {\n this.queue = dataArr[0].n_queue;\n } else if (dataArr[0].timeMode == '周期统计') {\n this.queue = dataArr[0].ave_queue;\n } else if (dataArr[0].timeMode == '周期时刻') {}\n }\n },\n computed: {// 获取类型的总数量\n },\n mounted: function mounted() {},\n watch: {\n // 监听触发数据\n dataArr: {\n handler: function handler(newVal) {\n // console.log('dataArr', newVal);\n if (newVal != undefined && newVal.length != 0) {\n this.getNewQueue(newVal);\n }\n },\n immediate: true\n }\n }\n};",{"version":3,"sources":["typeChart.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6IA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,WADA;AACA;AACA,EAAA,KAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAFA;AAGA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,QAAA,EAAA,QAFA;AAGA,IAAA,SAAA,EAAA,SAHA;AAIA,IAAA,YAAA,EAAA,YAJA;AAKA,IAAA,WAAA,EAAA,WALA;AAMA,IAAA,QAAA,EAAA,QANA;AAOA,IAAA,QAAA,EAAA;AAPA,GAHA;AAYA,EAAA,IAZA,kBAYA;AACA,WAAA;AACA;AACA,MAAA,KAAA,EAAA,CAFA;AAGA;AACA,MAAA,KAAA,EAAA,CAJA;AAKA;AACA,MAAA,IAAA,EAAA,CANA;AAOA,MAAA,OAAA,EAAA,IAPA;AASA,MAAA,SAAA,EAAA,EATA;AAUA;AACA,MAAA,KAAA,EAAA;AAXA,KAAA;AAaA,GA1BA;AA2BA,EAAA,OA3BA,qBA2BA;AACA,IAAA,OAAA,CAAA,GAAA,CAAA,KAAA,KAAA;AACA,GA7BA;AA8BA,EAAA,OAAA,EAAA;AACA;AAEA,IAAA,QAHA,oBAGA,OAHA,EAGA;AACA,UAAA,KAAA,KAAA,IAAA,IAAA,EAAA;AACA,eAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,MAAA,CAAA,UAAA,IAAA,EAAA,GAAA,EAAA;AACA,iBAAA,GAAA,CAAA,QAAA,GAAA,IAAA;AACA,SAFA,EAEA,CAFA,CAAA;AAGA;AACA,KATA;AAUA;AACA,IAAA,WAXA,uBAWA,OAXA,EAWA;AAGA,UAAA,OAAA,CAAA,CAAA,CAAA,CAAA,QAAA,IAAA,IAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,QAAA,IAAA,MAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,QAAA,IAAA,MAAA,EAAA,CACA;AACA;AApBA,GA9BA;AAqDA,EAAA,QAAA,EAAA,CACA;AADA,GArDA;AAwDA,EAAA,OAxDA,qBAwDA,CAAA,CAxDA;AAyDA,EAAA,KAAA,EAAA;AACA;AACA,IAAA,OAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AACA;AACA,YAAA,MAAA,IAAA,SAAA,IAAA,MAAA,CAAA,MAAA,IAAA,CAAA,EAAA;AACA,eAAA,WAAA,CAAA,MAAA;AACA;AACA,OANA;AAQA,MAAA,SAAA,EAAA;AARA;AAFA;AAzDA,CAAA","sourcesContent":["<template>\r\n <!-- 触发类型 -->\r\n <div class=\"setion\">\r\n <!-- <p class=\"chartTitle\"><span class=\"titleIcon\"></span> {{ componentName }} {{ triggerType }}</p> -->\r\n <!-- 触发数据数值渲染 -->\r\n <div class=\"typeContent\">\r\n <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n <div v-if=\"title == '类型' && echartArr.includes('数值')\" style=\"display:flex\">\r\n <el-card v-for=\"(n, i) in dataArr[0].type_data\" :key=\"i\" style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n <div>\r\n <span style=\"font-size: 15px;\">{{ n.name }}</span\r\n ><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ n.quantity }}</span>\r\n </div>\r\n <div>\r\n <div>\r\n {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n </div>\r\n </div>\r\n </el-card>\r\n </div>\r\n </div>\r\n <el-card v-show=\"echartArr.includes('数值')\" style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n <div v-if=\"title == '类型'\">\r\n <span style=\"font-size: 15px;\">类型数量总和</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">\r\n {{ getTotal(dataArr) }}\r\n </span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '速度'\">\r\n <span style=\"font-size: 15px;\">速度</span><br />\r\n <!-- <span style=\"font-size: 30px; font-weight: bold\">{{ typeValue.speed }}</span> -->\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].speed? dataArr[0].speed : '' }}</span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '流量'\">\r\n <span style=\"font-size: 15px;\">流量</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].flow? dataArr[0].flow : '' }}</span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '车头时距'\">\r\n <span style=\"font-size: 15px;\">车头时距</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].headway?dataArr[0].headway:'' }}</span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '排队数'\">\r\n <span style=\"font-size: 15px;\">排队数</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ queue }}</span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '检测数'\">\r\n <span style=\"font-size: 15px;\">检测数</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].n_stay?dataArr[0].n_stay:'' }}</span>\r\n </div>\r\n <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '延误'\">\r\n <span style=\"font-size: 15px;\">延误</span><br />\r\n <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].ave_delay?dataArr[0].ave_delay:'' }}</span>\r\n </div>\r\n <div>\r\n <div>\r\n {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n </div>\r\n </div>\r\n </div>\r\n <div v-else>\r\n <el-empty :image-size=\"100\"></el-empty>\r\n </div>\r\n </el-card>\r\n </div>\r\n <div v-show=\"echartArr.includes('表格')\">\r\n <div class=\"tableTitle\" v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n <div>\r\n <span\r\n style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"\r\n ></span>\r\n <span style=\"font-size:18px;\">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>\r\n </div>\r\n <div class=\"tableTime\">\r\n {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n </div>\r\n </div>\r\n <div v-if=\"pageType == '断面'\" style=\"margin-bottom: 20px; border: 1px solid #e4e7ed\">\r\n <tableShow :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n </div>\r\n <div v-if=\"pageType == '区域'\">\r\n <regionTable :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n </div>\r\n </div>\r\n <div class=\"border\" v-if=\"echartArr.includes('曲线图')\">\r\n <detailDialog />\r\n <lineChart\r\n :componentName=\"componentName\"\r\n :chartName=\"chartName\"\r\n :pageType=\"pageType\"\r\n :list=\"dataArr\"\r\n :status=\"triggerType\"\r\n :title=\"title\"\r\n :typeValue=\"typeValue\"\r\n ref=\"lineChartRef\"\r\n />\r\n </div>\r\n <div class=\"border\" v-if=\"echartArr.includes('饼状图')\">\r\n <detailDialog />\r\n <pieChart\r\n :componentName=\"componentName\"\r\n :chartName=\"chartName\"\r\n :pageType=\"pageType\"\r\n :list=\"dataArr\"\r\n :status=\"triggerType\"\r\n :title=\"title\"\r\n :typeValue=\"typeValue\"\r\n ref=\"pieChartRef\"\r\n />\r\n </div>\r\n <div class=\"border\" v-if=\"echartArr.includes('均值图')\">\r\n <detailDialog />\r\n <avgChart\r\n ref=\"avgChartRef\"\r\n :componentName=\"componentName\"\r\n :chartName=\"chartName\"\r\n :pageType=\"pageType\"\r\n :list=\"dataArr\"\r\n :status=\"triggerType\"\r\n :title=\"title\"\r\n :typeValue=\"typeValue\"\r\n />\r\n </div>\r\n <div class=\"border\" v-if=\"echartArr.includes('直方图')\">\r\n <detailDialog />\r\n <barChart\r\n :componentName=\"componentName\"\r\n :chartName=\"chartName\"\r\n :pageType=\"pageType\"\r\n :list=\"dataArr\"\r\n :status=\"triggerType\"\r\n :title=\"title\"\r\n :typeValue=\"typeValue\"\r\n ref=\"barChartRef\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport avgChart from '../chart/avgChart.vue';\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport pieChart from '../chart/pieChart.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n name: 'typeChart', //类型组件\r\n props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n components: {\r\n lineChart,\r\n barChart,\r\n tableShow,\r\n detailDialog,\r\n regionTable,\r\n pieChart,\r\n avgChart\r\n },\r\n data() {\r\n return {\r\n // 类型数值\r\n total: 0,\r\n // 速度数值\r\n speed: 0,\r\n // 流量数值\r\n flow: 0,\r\n isRefer: true,\r\n\r\n valueShow: {},\r\n //排队数\r\n queue: ''\r\n };\r\n },\r\n created() {\r\n console.log(this.title);\r\n },\r\n methods: {\r\n // 计算类型数量的总和\r\n\r\n getTotal(dataArr) {\r\n if(this.title=='类型'){\r\n return dataArr[0].type_data.reduce(function(prev, cur) {\r\n return cur.quantity + prev;\r\n }, 0); \r\n }\r\n },\r\n // 计算类型的数值\r\n getNewQueue(dataArr) {\r\n \r\n\r\n if (dataArr[0].timeMode == '触发') {\r\n this.queue = dataArr[0].n_queue;\r\n } else if (dataArr[0].timeMode == '周期统计') {\r\n this.queue = dataArr[0].ave_queue;\r\n } else if (dataArr[0].timeMode == '周期时刻') {\r\n }\r\n }\r\n },\r\n\r\n computed: {\r\n // 获取类型的总数量\r\n },\r\n mounted() {},\r\n watch: {\r\n // 监听触发数据\r\n dataArr: {\r\n handler(newVal) {\r\n // console.log('dataArr', newVal);\r\n if (newVal != undefined && newVal.length != 0) {\r\n this.getNewQueue(newVal);\r\n }\r\n },\r\n\r\n immediate: true\r\n }\r\n }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n background: #f7f8fa;\r\n margin-bottom: 5px;\r\n padding: 8px;\r\n}\r\n\r\n.typeContent {\r\n box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n width: 100%;\r\n margin-bottom: 20px;\r\n position: relative;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/target"}]} |