1 line
15 KiB
JSON
1 line
15 KiB
JSON
{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\routeDetail.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\routeDetail.vue","mtime":1689642397092},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\nimport axios from \"axios\";\r\nlet docx = require(\"docx-preview\");\r\nwindow.JSZip = require(\"jszip\");\r\nexport default {\r\n name: \"routeDetail\",\r\n props: [\"routeItem\"],\r\n data() {\r\n return {\r\n // titleList:['班组','故障路线','故障状态','故障类型','故障时间','故障描述','故障处理']\r\n wordShow: false,\r\n };\r\n },\r\n mounted() {\r\n console.log(this.routeItem, \"sssssssssssss\");\r\n },\r\n methods: {\r\n closeWord() {\r\n // word文档的显隐\r\n this.wordShow = false;\r\n },\r\n handleClose() {\r\n this.$parent.routeShow = \"\";\r\n this.$parent.routeItem = null;\r\n },\r\n detailBtn(url) {\r\n // console.log(url, \"word下载链接\");\r\n var url = \"/\" + url.split(\"/\")[3] + \"/\" + url.split(\"/\")[4];\r\n var that = this;\r\n axios({\r\n url: \"/app\" + url,\r\n responseType: \"blob\",\r\n }).then(({ data }) => {\r\n console.log(data, \"数据\");\r\n\r\n that.$nextTick(() => {\r\n // doc.renderAsync(data,that.$refs.word)\r\n docx\r\n .renderAsync(data, that.$refs.word, null, {\r\n className: \"docx\", //默认和文档样式类的类名/前缀\r\n inWrapper: true, //启用围绕文档内容呈现包装器\r\n ignoreWidth: true, //禁用页面的渲染宽度\r\n ignoreHeight: true, //禁用页面的渲染高度\r\n ignoreFonts: false, //禁用字体渲染\r\n breakPages: true, //在分页符上启用分页\r\n ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页\r\n experimental: false, //启用实验功能（制表符停止计算）\r\n trimXMLDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明\r\n useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL\r\n useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。\r\n showChanges: true, //启用文档更改的实验渲染（插入/删除）\r\n debug: false, //启用额外的日志记录\r\n })\r\n .then((res) => {\r\n that.wordShow = true;\r\n });\r\n });\r\n });\r\n },\r\n created() {\r\n // console.log(this.routeItem, \"故障详情\");\r\n // console.log(this.routeItem, \"路线详细数据\");\r\n // var arr = Object.keys(this.routeItem);\r\n // console.log(arr);\r\n },\r\n },\r\n};\r\n",{"version":3,"sources":["routeDetail.vue"],"names":[],"mappings":";AA6DA;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;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA","file":"routeDetail.vue","sourceRoot":"src/component","sourcesContent":["<template>\r\n <div class=\"route\">\r\n <div class=\"word\" v-show=\"wordShow\">\r\n <div class=\"wordBox\" ref=\"word\"></div>\r\n </div>\r\n <!-- 关闭word的按钮 -->\r\n <div class=\"closeWord\" @click=\"closeWord\" v-show=\"wordShow\">\r\n <img src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n </div>\r\n <div class=\"close\">\r\n <img @click=\"handleClose\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n </div>\r\n <div class=\"route-title\"><span class=\"text\">故障详情</span></div>\r\n <div class=\"route-main\">\r\n <div class=\"mainLeft\">\r\n <div class=\"route-item\">\r\n <div class=\"item-title\">班组:</div>\r\n <div>{{ routeItem.bz }}</div>\r\n </div>\r\n <div class=\"route-item\">\r\n <div class=\"item-title\">故障状态:</div>\r\n <div style=\"color: #b16f18\">{{ routeItem.gz_state_dsc }}</div>\r\n </div>\r\n <div class=\"route-item\">\r\n <div class=\"item-title1\">故障发生时间:</div>\r\n <div style=\"margin-left: 0px\">{{ routeItem.gz_time }}</div>\r\n </div>\r\n <div class=\"route-item\">\r\n <div class=\"item-title1\">处理完成时间:</div>\r\n <div style=\"margin-left: 0px\">{{ routeItem.gz_time_deal }}</div>\r\n </div>\r\n <div class=\"route-item\" style=\"width: 100%\">\r\n <div class=\"item-title1\">影响时户数:</div>\r\n <div style=\"color: #3ebaa7\">{{ routeItem.yxshs }}</div>\r\n </div>\r\n <div class=\"route-item\" style=\"width: 100%\">\r\n <div class=\"item-title1\">故障处理与分析:</div>\r\n <div @click=\"detailBtn(routeItem.file_url)\" class=\"detailBtn\"></div>\r\n </div>\r\n </div>\r\n <div class=\"mainRight\">\r\n <div class=\"route-item\">\r\n <div class=\"item-title\">故障线路:</div>\r\n <div style=\"color: #b16f18\">{{ routeItem.gzxl }}</div>\r\n </div>\r\n\r\n <div class=\"route-item\">\r\n <div class=\"item-title\">故障类型:</div>\r\n <div>{{ routeItem.gz_type_dsc }}</div>\r\n </div>\r\n\r\n <div class=\"route-item\" style=\"display: flex; align-items: flex-start\">\r\n <div class=\"item-title\">故障描述:</div>\r\n <div style=\"text-align: left\">{{ routeItem.dsc }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport axios from \"axios\";\r\nlet docx = require(\"docx-preview\");\r\nwindow.JSZip = require(\"jszip\");\r\nexport default {\r\n name: \"routeDetail\",\r\n props: [\"routeItem\"],\r\n data() {\r\n return {\r\n // titleList:['班组','故障路线','故障状态','故障类型','故障时间','故障描述','故障处理']\r\n wordShow: false,\r\n };\r\n },\r\n mounted() {\r\n console.log(this.routeItem, \"sssssssssssss\");\r\n },\r\n methods: {\r\n closeWord() {\r\n // word文档的显隐\r\n this.wordShow = false;\r\n },\r\n handleClose() {\r\n this.$parent.routeShow = \"\";\r\n this.$parent.routeItem = null;\r\n },\r\n detailBtn(url) {\r\n // console.log(url, \"word下载链接\");\r\n var url = \"/\" + url.split(\"/\")[3] + \"/\" + url.split(\"/\")[4];\r\n var that = this;\r\n axios({\r\n url: \"/app\" + url,\r\n responseType: \"blob\",\r\n }).then(({ data }) => {\r\n console.log(data, \"数据\");\r\n\r\n that.$nextTick(() => {\r\n // doc.renderAsync(data,that.$refs.word)\r\n docx\r\n .renderAsync(data, that.$refs.word, null, {\r\n className: \"docx\", //默认和文档样式类的类名/前缀\r\n inWrapper: true, //启用围绕文档内容呈现包装器\r\n ignoreWidth: true, //禁用页面的渲染宽度\r\n ignoreHeight: true, //禁用页面的渲染高度\r\n ignoreFonts: false, //禁用字体渲染\r\n breakPages: true, //在分页符上启用分页\r\n ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页\r\n experimental: false, //启用实验功能（制表符停止计算）\r\n trimXMLDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明\r\n useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL\r\n useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。\r\n showChanges: true, //启用文档更改的实验渲染（插入/删除）\r\n debug: false, //启用额外的日志记录\r\n })\r\n .then((res) => {\r\n that.wordShow = true;\r\n });\r\n });\r\n });\r\n },\r\n created() {\r\n // console.log(this.routeItem, \"故障详情\");\r\n // console.log(this.routeItem, \"路线详细数据\");\r\n // var arr = Object.keys(this.routeItem);\r\n // console.log(arr);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n.route {\r\n position: fixed;\r\n top: 0;\r\n margin: auto;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: url(\"../assets/images/baojingxinxiKuang.png\");\r\n width: 1034px;\r\n height: 608px;\r\n background-size: 100% 100%;\r\n padding: 20px 26px;\r\n box-sizing: border-box;\r\n .word {\r\n position: fixed;\r\n z-index: 999;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n width: 1511px;\r\n height: 1071px;\r\n background: url(\"../assets/images/ringMainUnitKuang.png\") no-repeat;\r\n background-size: 100% 100%;\r\n -webkit-animation: fadeInDown 0.3s;\r\n animation: fadeInDown 0.3s;\r\n padding: 15px 25px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-content: space-between;\r\n .wordBox {\r\n margin-top: 3.1%;\r\n height: 94%;\r\n width: 100%;\r\n overflow: scroll;\r\n }\r\n }\r\n\r\n .closeWord {\r\n top: -33%;\r\n right: -20%;\r\n z-index: 1001;\r\n position: absolute;\r\n }\r\n .wordBox::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .route-main {\r\n height: 90%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-left: 30px;\r\n overflow: auto;\r\n .mainLeft{\r\n width:50%;\r\n height:100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n .route-item {\r\n width: 100%;\r\n // height: 100%;\r\n margin-top: 40px;\r\n display: flex;\r\n align-items: center;\r\n .detailBtn {\r\n width: 128px;\r\n height: 37px;\r\n background-image: url(\"../assets/images/detailBtn.png\");\r\n background-size: 100% 100%;\r\n }\r\n .item-title {\r\n letter-spacing: 2px;\r\n // height: 65px;\r\n width: 150px;\r\n line-height: 30px;\r\n background-size: 100% 100%;\r\n font-size: 22px;\r\n color: #fff;\r\n // font-weight: 900;\r\n // letter-spacing: ;\r\n text-align: left;\r\n white-space: nowrap;\r\n }\r\n .item-title1 {\r\n width: 168px;\r\n line-height: 30px;\r\n background-size: 100% 100%;\r\n font-size: 22px;\r\n color: #fff;\r\n // font-weight: 900;\r\n // letter-spacing: ;\r\n text-align: left;\r\n }\r\n & > div:nth-child(2) {\r\n vertical-align: middle;\r\n margin-left: 30px;\r\n font-size: 23px;\r\n color: #fff;\r\n // margin-left: 20px;\r\n letter-spacing: 3px;\r\n }\r\n }\r\n }\r\n .mainRight{\r\n width:50%;\r\n height:100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n .route-item {\r\n width: 100%;\r\n // height: 100%;\r\n margin-top: 40px;\r\n display: flex;\r\n align-items: center;\r\n .detailBtn {\r\n width: 128px;\r\n height: 37px;\r\n background-image: url(\"../assets/images/detailBtn.png\");\r\n background-size: 100% 100%;\r\n }\r\n .item-title {\r\n letter-spacing: 2px;\r\n // height: 65px;\r\n width: 150px;\r\n line-height: 30px;\r\n background-size: 100% 100%;\r\n font-size: 22px;\r\n color: #fff;\r\n // font-weight: 900;\r\n // letter-spacing: ;\r\n text-align: left;\r\n white-space: nowrap;\r\n }\r\n .item-title1 {\r\n width: 168px;\r\n line-height: 30px;\r\n background-size: 100% 100%;\r\n font-size: 22px;\r\n color: #fff;\r\n // font-weight: 900;\r\n // letter-spacing: ;\r\n text-align: left;\r\n }\r\n & > div:nth-child(2) {\r\n vertical-align: middle;\r\n margin-left: 30px;\r\n font-size: 23px;\r\n color: #fff;\r\n // margin-left: 20px;\r\n letter-spacing: 3px;\r\n }\r\n }\r\n }\r\n \r\n }\r\n .route-title {\r\n font-size: 28px;\r\n height: 10%;\r\n width: 91%;\r\n display: flex;\r\n align-items: center;\r\n margin-left: 50px;\r\n // justify-content: center;\r\n // display: flex;\r\n align-content: flex-start;\r\n\r\n .text {\r\n // font-weight: 900;\r\n color: transparent;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(86, 244, 254));\r\n }\r\n }\r\n .close {\r\n position: absolute;\r\n right: 5%;\r\n top: 6%;\r\n }\r\n}\r\n::-webkit-scrollbar {\r\n display: none;\r\n}\r\n/deep/ .docx span {\r\n // font-size: 25px !important;\r\n color: #fff !important;\r\n}\r\n/deep/ .docx-wrapper {\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n // background-image: url(\"../assets/images/wordBg1.png\");\r\n background-size: 100% 100%;\r\n}\r\n/deep/ .docx {\r\n width: 100% !important;\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n/deep/ .docx table {\r\n width: 100% !important;\r\n}\r\n// /deep/ .docx p {\r\n// text-align: center !important;\r\n// }\r\n// /deep/ p.docx_a3 {\r\n// border-bottom: none !important;\r\n// }\r\n/deep/ .docx p {\r\n // text-align: unset !important;\r\n line-height: unset !important;\r\n background-color: transparent !important;\r\n border: unset !important;\r\n // text-indent: unset !important;\r\n}\r\n// /dee/ .docx img{\r\n// margin: 0 auto !important;\r\n// }\r\n// /deep/ .docx_normalcharacter>div{\r\n// margin: 0 auto !important;\r\n\r\n// }\r\n/deep/ p:before {\r\n color: #fff;\r\n}\r\n</style>\r\n"]}]} |