monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit e6a36a511c306dff75e8f2e6a25aea6c33a4044e 2 parents c5610efe 7e053405

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 6 changed files with 1262 additions and 0 deletions
  1 +//工作汇报表单
  2 +layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect', 'laydate', 'upload'], function (exports) {
  3 + var $ = layui.$;
  4 + var form = layui.form;
  5 + var layer = layui.layer;
  6 + var admin = layui.admin;
  7 + var table = layui.table;
  8 + var common = layui.common;
  9 + var session = layui.sessions;
  10 + var laydate = layui.laydate;
  11 + var upload = layui.upload;
  12 + var domainName = common.domainName;
  13 + var xmSelect = layui.xmSelect;
  14 +
  15 + //对外暴露的接口
  16 + exports('assetsRepairAdd', function (data) {
  17 + var accessToken = session.getToken()['access_token']
  18 + var userSelect = "";
  19 + var currentDate = {}
  20 + var hitDate = {}
  21 + var uploadInst = {}
  22 + var defaultUser = []
  23 + var attachmentIds = []
  24 + var id = data.id
  25 + var cols = []
  26 + var where = {}
  27 + var currentResourceType = ''
  28 + var resTypeSele
  29 +
  30 +
  31 + var viewType = data && data.viewType ? data.viewType : '';
  32 +
  33 + //渲染表单
  34 + form.render(null, 'add-repair-form')
  35 + init()
  36 +
  37 + //保存
  38 + form.on('submit(repair-form-save-id)', function (res) {
  39 + var value = $('#attachmentInput').val()
  40 + if (value != '') {
  41 + $('#upload_btn').click()
  42 + } else {
  43 + saveForm()
  44 + }
  45 + })
  46 +
  47 + //保存
  48 + function saveForm() {
  49 + layer.load(2)
  50 + var data = form.val('add-repair-form')
  51 + var params = {}
  52 + params.attachmentIds = attachmentIds.toString()
  53 + delete data['file']
  54 + delete data['select']
  55 + params.workReport = JSON.stringify(data)
  56 + admin.req({
  57 + url: domainName + '/api-web/bResource/assetsrepair/save?access_token=' + accessToken,
  58 + data: JSON.stringify(params),
  59 + type: 'post',
  60 + contentType: "application/json; charset=utf-8",
  61 + done: function (res) {
  62 + if (res.success) {
  63 + layer.msg(res.msg, {
  64 + offset: '15px',
  65 + icon: 1,
  66 + time: 1000,
  67 + }, function () {
  68 + layer.closeAll()
  69 + })
  70 + } else {
  71 + layer.msg(res.msg, {
  72 + offset: '15px',
  73 + icon: 7,
  74 + time: 1000,
  75 + })
  76 + }
  77 + }
  78 + })
  79 + return false
  80 + }
  81 +
  82 + //页面初始化
  83 + function init() {
  84 + loadSelect()
  85 + initDatePlus()
  86 + initUploadPlus()
  87 +
  88 +
  89 + if (viewType == 'view') {
  90 + initViewMode();
  91 + }
  92 + }
  93 +
  94 + // 初始化下拉框
  95 + function loadSelect() {
  96 + admin.req({
  97 + url: domainName + '/api-web/bResource/findAssetsRepairList'
  98 + }).done(function (response) {
  99 + var options = "<option value=''>=归属单位=</option>";
  100 + $.each(response.data, function (i, v) {
  101 + options += "<option value='" + v.orgCode + "'>" + v.orgName + "</option>"
  102 + });
  103 + $('#slt-repairadd-org').html(options);
  104 + form.render();
  105 + });
  106 + admin.req({
  107 + url: domainName + '/api-web/bWorkreportGroup/findManufacturerList'
  108 + }).done(function (response) {
  109 + var options = "<option value=''>=选择厂商=</option>";
  110 + $.each(response.data, function (i, v) {
  111 + options += "<option value='" + v.id + "'>" + v.manufacturerName + "</option>"
  112 + });
  113 + $('#slt-repairadd-group').html(options);
  114 + form.render();
  115 + });
  116 + admin.req({
  117 + url: domainName + '/api-web/bResource/getInfoByAssetsType',
  118 + }).done(function (response) {
  119 + var options = "<option value=''>=设备类型=</option>";
  120 + $.each(response.data, function (i, v) {
  121 + options += "<option value='" + v.resTypeCode + "'>" + v.resTypeName + "</option>"
  122 + });
  123 + $('#slt-repairadd-res').html(options);
  124 + form.render();
  125 + })
  126 + $.ajax({
  127 + url: domainName + '/api-web/bResource/getGroupByAdmin?theirType=1&access_token=' + accessToken,
  128 + success: function (res) {
  129 + if (!res.map) {
  130 + layer.msg("没有上传权限，请去添加权限")
  131 + return;
  132 + } else {
  133 + var map = res.map;
  134 + $("#createUser").val(map.admin);
  135 + }
  136 + fromAssignment()
  137 + form.render();
  138 + }
  139 + })
  140 +
  141 + }
  142 +
  143 +
  144 + //初始化日期插件
  145 + function initDatePlus() {
  146 + currentDate = laydate.render({
  147 + elem: '#createtime', //指定元素
  148 + value: new Date(),
  149 + type: 'datetime',
  150 + isInitValue: true,
  151 + max: 0,
  152 + });
  153 + hitDate = laydate.render({
  154 + elem: '#hitchtime', //指定元素
  155 + value: new Date(),
  156 + type: 'datetime',
  157 + isInitValue: true,
  158 + max: 0,
  159 + });
  160 + }
  161 +
  162 + //初始化上传插件
  163 + function initUploadPlus() {
  164 + var param = {"access_token": accessToken}
  165 + var fileName = []
  166 + uploadInst = upload.render({
  167 + elem: '#attachment', //绑定元素
  168 + url: common.domainName + '/api-web/bResource/assetsrepair/upload',
  169 + data: param,
  170 + multiple: true,
  171 + auto: false, //选择文件后不自动上传
  172 + bindAction: '#upload_btn',//指定按钮触发上传
  173 + accept: 'file',
  174 + exts: 'xls|doc|pdf|docx|xlsx|jpg|png',
  175 + choose: function (obj) {
  176 + //选择文件后回调
  177 + var files = this.files = obj.pushFile();
  178 + obj.preview(function (index, file, result) {
  179 + fileName.push(file.name)
  180 + $('#attachmentInput').val(fileName.toString())
  181 + })
  182 + },
  183 + done: function (res) {
  184 + //单次上传成功
  185 + attachmentIds.push(res.str)
  186 + },
  187 + allDone: function (obj) {
  188 + //全部上传成功后
  189 + saveForm()
  190 + },
  191 + error: function (index, upload) {
  192 + // 上传失败
  193 + layer.msg('文件上传时发生故障，请稍后再试！', {
  194 + icon: 7, time: 3000
  195 + });
  196 + }
  197 + });
  198 + }
  199 +
  200 +
  201 + // 初始化查看模式
  202 + function initViewMode() {
  203 + $('form[lay-filter="add-workReport-form"]').find('input, textarea').attr('readonly', true);
  204 + $('form[lay-filter="add-workReport-form"]').find('select').attr('disabled', true);
  205 + $.each(xmSelect.get(), function (i, v) {
  206 + v.update({disabled: true});
  207 + });
  208 + $('#attachmentInput').parent().parent().parent().addClass('hide');
  209 + $('#table-report-add-attachment').removeClass('hide');
  210 + $('#form-item-repTitle').removeClass('hide');
  211 + //渲染附件表格
  212 + var attachmentTable = table.render({
  213 + elem: '#table-repair-add-attachment',
  214 + url: domainName + '/api-web/bResource/assetsrepair/getAttaById',
  215 + where: {
  216 + access_token: accessToken,
  217 + id: data.id
  218 + },
  219 + height: 'full',
  220 + page: {
  221 + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
  222 + , theme: '#1E9FFF'//自定义分页主题颜色
  223 + },
  224 + end: function (e) {
  225 + form.render()
  226 + },
  227 + limit: common.limit,
  228 + limits: common.limits,
  229 + even: true,
  230 + cols: [[
  231 + {type: 'numbers', title: '序号'},
  232 + {
  233 + field: 'name', title: '文件名称', align: 'center', minWith: 200,
  234 + },
  235 + {
  236 + field: 'suffix', title: '文件后缀', align: 'center', minWith: 150,
  237 + },
  238 + {
  239 + field: 'size', title: '文件大小', align: 'center', minWith: 150,
  240 + templet: function (d) {
  241 + var str = (d.size / 1000).toFixed(2)
  242 + return `<div><span>${str}KB</span></div>`
  243 + }
  244 + },
  245 + {
  246 + title: '操作', align: "center", width: 120,
  247 + templet: '<div><span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link preview-attachment-btn">预览</span></div>'
  248 + }
  249 + ]],
  250 + done: function () {
  251 + $('.preview-attachment-btn').on('click', function () {
  252 + var id = $(this).data('id')
  253 + var suffix = $(this).data('suffix')
  254 + if (suffix == 'jpg' || suffix == 'png' || suffix == 'JPG' || suffix == 'PNG') { //图片类型
  255 + var srcUrl = domainName + `/api-web/openoffice/readImage/${id}?access_token=` + accessToken
  256 + layer.open({
  257 + type: 1,
  258 + content: `<div><img src="${srcUrl}" width="100%" height="100%" /></div>`,
  259 + title: '图片预览',
  260 + area: ['60%', '90%']
  261 + })
  262 + } else {
  263 + //附件为文档类型
  264 + common.openReport(id)
  265 + }
  266 + })
  267 + }
  268 + })
  269 + form.render();
  270 + }
  271 +
  272 + //表单赋值
  273 + function fromAssignment() {
  274 + if (data && data.id) {
  275 + $('#add-repair-form-atta').show()
  276 + //编辑表单时禁用日志类型修改和时间选择
  277 + $('#add-repair-form').find("select[name='hitchtime']").attr("disabled", "disabled")
  278 + $('#add-repair-form').find("input[name='createtime']").attr("disabled", "disabled")
  279 + //编辑表单时取消显示默认值
  280 + currentDate.config.isInitValue = false
  281 + hitDate.config.isInitValue = false
  282 + initDatePlus()
  283 + admin.req({
  284 + url: domainName + `/api-web/bResource/assetsrepair/getById`,
  285 + data: {id: data.id},
  286 + async: false,
  287 + }).done(function (res) {
  288 + form.val('add-repair-form', res.object)
  289 + if (res.object.attachmentList) {
  290 + $.each(res.object.attachmentList, function (i, v) {
  291 + writeTagsInfo(v.id, v.originalName)
  292 + })
  293 + }
  294 + })
  295 + }
  296 + }
  297 +
  298 + //写入标签内容
  299 + function writeTagsInfo(id, name) {
  300 + var tags = '<span id="tags_span_' + id + '" data-id="' + id + '"><em>' + name + '</em>' +
  301 + '<button type="button" value="' + id + '" class="tagsclose close">×</button></span>';
  302 + if ($("#tags_span_" + id).length == 0) {
  303 + //拼接标签
  304 + $("#selecte_content_id").append(tags);
  305 + //绑定标签的删除事件
  306 + bindTagesDelEvent();
  307 + }
  308 + }
  309 +
  310 + //删除标签事件
  311 + function bindTagesDelEvent() {
  312 + //删除已选主体的页签
  313 + $("button.tagsclose").on("click", function () {
  314 + var attachId = $(this).attr("value");
  315 + //确认提示框
  316 + layer.confirm('附件删除后将无法恢复，您确定要删除吗？', {
  317 + btn: ['确定', '取消'] //按钮
  318 + }, function () {
  319 + $.ajax({
  320 + url: domainName + `/api-web/workreport/deleteAttachment/${id}/${attachId}?access_token=` + accessToken,
  321 + type: "get",
  322 + }).done(function (res) {
  323 + layer.msg('删除成功', {
  324 + offset: '15px'
  325 + , icon: 1
  326 + , time: 1000
  327 + }, function () {
  328 + $("#tags_span_" + attachId).remove();
  329 + });
  330 + }).error(function (error) {
  331 + console.log(error);
  332 + });
  333 + });
  334 + });
  335 + }
  336 + })
  337 +})
  1 +/** 资产维修记录查看 */
  2 +layui.define(['table', 'form', 'sessions', 'admin', 'common', 'echarts','laydate','element'], function (exports) {
  3 + var $ = layui.$;
  4 + var form = layui.form;
  5 + var table = layui.table;
  6 + var admin = layui.admin;
  7 + var common = layui.common;
  8 + var laydate = layui.laydate;
  9 + var element = layui.element;
  10 +
  11 + exports('assetsrepair', function () {
  12 + var sessions = layui.sessions;
  13 + var accessToken = sessions.getToken().access_token;
  14 + var domainName = common.domainName;
  15 + var companyChart = echarts.init(document.getElementById('chart-company-report'));
  16 + var resTypeChart = echarts.init(document.getElementById('chart-restype-report'));
  17 +
  18 + var dateLimit = ""
  19 + var createTime = ""
  20 + var currentResourceTypeTreeNodeId = ""
  21 + var resTypeSelect;
  22 +
  23 +
  24 + //日期范围选择
  25 + laydate.render({
  26 + elem: '#dateLimit'
  27 + ,range: '~',
  28 + done: function (value) {
  29 + dateLimit = value
  30 + if (dateLimit == '') {
  31 + $('[data-period="thisWeek"]').click()
  32 + } else {
  33 + $.each($("button.date"),function (i,e) {
  34 + var $dom = $(e);
  35 + if($dom.hasClass("active")){
  36 + $dom.removeClass("active")
  37 + }
  38 + })
  39 + reloadAllChange()
  40 + }
  41 + }
  42 + });
  43 +
  44 + form.render();
  45 + loadCompanyReport();
  46 + loadResTypeReport();
  47 + loadWorkReportTable();
  48 + loadConditionSelect();
  49 +
  50 +
  51 + //监听Esc事件
  52 + $(document).keyup(function(event){
  53 + if(event.keyCode === 27 || event.keyCode === 96){
  54 + layer.closeAll();
  55 + }
  56 + });
  57 +
  58 +
  59 + // 日期方式选择
  60 + $('#btns-repair-time button').click(function () {
  61 + $.each($("button.date"),function (i,e) {
  62 + var $dom = $(e);
  63 + if($dom.hasClass("active")){
  64 + $dom.removeClass("active")
  65 + }
  66 + })
  67 + $("#dateLimit").val('')
  68 + dateLimit = ''
  69 + $("#btns-repair-time button").removeClass("active");
  70 + $(this).addClass("active");
  71 + createTime = ($(this).data("period"))
  72 + reloadAllChange();
  73 + });
  74 +
  75 + // 回车搜索
  76 + $('[lay-filter="form-repair-condition"] input').keydown(function (e) {
  77 + if (e.keyCode === 13) {
  78 + reloadAllChange();
  79 + }
  80 + });
  81 +
  82 + // 下拉框改变搜索
  83 + form.on('select(slt-repair-group)', reloadAllChange);
  84 + form.on('select(slt-repair-user)', reloadAllChange);
  85 + form.on('select(slt-repair-org)', reloadAllChange);
  86 +
  87 +
  88 + // 加载工作汇报表格
  89 + function loadWorkReportTable() {
  90 + var conditions = form.val('form-repair-condition');
  91 +
  92 + Object.assign(conditions, {access_token: accessToken, createtime: createTime, viewMode: 'true',dateLimit:dateLimit});
  93 + table.render({
  94 + elem: '#table-repair-view',
  95 + url: domainName + '/api-web/bResource/getAssetsRepairForPage',
  96 + where: conditions,
  97 + height: 'full-360',
  98 + page: {
  99 + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
  100 + theme: '#1E9FFF'
  101 + },
  102 + end: function (e) {
  103 + form.render()
  104 + },
  105 + limit: common.limit,
  106 + limits: common.limits,
  107 + even: true,
  108 + cols: [[{
  109 + type: 'checkbox'
  110 + }, {
  111 + type: 'numbers', title: '序号'
  112 + }, {
  113 + field: 'title', title: '标题', align: 'center', minWidth: 200,event: 'serRead',
  114 + templet: '<div><span data-id="{{d.id}}" class="layui-table-link view-repair-title" >{{d.title}}</span></div>'
  115 + }, {
  116 + field: 'resTypeName', title: '资产类型', align: 'center',
  117 + }, {
  118 + field: 'resourceSN', title: '设备序列号', align: 'center',
  119 + },{
  120 + field: 'ip', title: 'ip段', align: 'center',
  121 + },{
  122 + field: 'orgName', title: '归属单位', align: 'center',
  123 + },{
  124 + field: 'attachmentList', title: '附件数量', align: 'center',
  125 + templet: '<div><span data-id="{{d.id}}" class="layui-table-link view-repair-attachment">{{d.attachmentList.length}}</span></div>'
  126 + },{
  127 + field: 'groupName', title: '上报人', align: 'center',
  128 + }, {
  129 + field: 'manufacturerName', title: '厂商', align: 'center',
  130 + },{
  131 + field: 'hitchtime', title: '故障时间', align: 'center',
  132 + },{
  133 + field: 'createtime', title: '维修时间', align: 'center',
  134 + }]],
  135 + done: function () {
  136 + //点击标题编辑表单
  137 + $('.view-repair-title').on('click', function () {
  138 + openWorkReportForm( $(this).data('id'))
  139 + })
  140 +
  141 + //获取附件列表
  142 + $('.view-repair-attachment').on('click', function () {
  143 + openWorkReportList('attachment', $(this).data('id'))
  144 + })
  145 +
  146 + }
  147 + });
  148 + }
  149 + //新增日报
  150 + $('#repair_create').on('click', function () {
  151 + openWorkReportForm()
  152 + })
  153 +
  154 + //新增/编辑表单
  155 + function openWorkReportForm(id) {
  156 + var title = id ? '编辑' : '新增'
  157 + common.openWin('assets/add', title, {id: id}, ['保存', '取消'], function f() {
  158 + $("#repair-form-save-id").trigger("click");
  159 + })
  160 + }
  161 +
  162 + //查看附件/接收人列表
  163 + function openWorkReportList(type, id) {
  164 +
  165 + var title = '附件'
  166 +
  167 + common.openWin('assets/repairlist', title, {id: id, type: type}, ['确定', '取消'])
  168 + }
  169 +
  170 + // 加载查询条件下拉框
  171 + function loadConditionSelect() {
  172 + admin.req({
  173 + url: domainName + '/api-web/bResource/findAssetsRepairList'
  174 + }).done(function (response) {
  175 + var options = "<option value=''>=归属单位=</option>";
  176 + console.log(response.data)
  177 + $.each(response.data, function (i, v) {
  178 +
  179 + options += "<option value='" + v.orgCode + "'>" + v.orgName + "</option>"
  180 + });
  181 + $('#slt-repair-org').html(options);
  182 + form.render();
  183 + });
  184 + admin.req({
  185 + url: domainName + '/api-web/bWorkreportGroup/findManufacturerList'
  186 + }).done(function (response) {
  187 + var options = "<option value=''>=选择厂商=</option>";
  188 + $.each(response.data, function (i, v) {
  189 + options += "<option value='" + v.id + "'>" + v.manufacturerName + "</option>"
  190 + });
  191 + $('#slt-repair-group').html(options);
  192 + form.render();
  193 + });
  194 + $.ajax({
  195 + url: domainName + '/api-user/users/getAll',
  196 + data: {
  197 + access_token: accessToken
  198 + },
  199 + success: function (response) {
  200 + var options = "<option value=''>=选择汇报人=</option>";
  201 + $.each(response, function (i, v) {
  202 + options += "<option value='" + v.username + "'>" + v.nickname + "</option>"
  203 + });
  204 + $('#slt-repair-user').html(options);
  205 + form.render();
  206 + }
  207 + });
  208 + admin.req({
  209 + url:common.domainName + '/api-web/home/resType/getTree?hardwareFlag=Y',
  210 + }).done(function (res) {
  211 + resTypeSelect = xmSelect.render({
  212 + el: '#hardware-layui-select',
  213 + name: "resType",
  214 + tips: '==资产类型==',
  215 + filterable: true,
  216 + radio: true,
  217 + clickClose: false,
  218 + layVerify: 'required',
  219 + height: '20px',
  220 + tree: {
  221 + show: true,
  222 + showFolderIcon: true,
  223 + showLine: true,
  224 + strict: true,
  225 + indent: 20
  226 + },
  227 + model: {
  228 + label: {
  229 + type: 'text'
  230 + }
  231 + },
  232 + height: 'auto',
  233 + data: res.data,
  234 + hide:function () {
  235 + var str = resTypeSelect.getValue('valueStr');
  236 + if(!str){
  237 + str = 'all';
  238 + }
  239 + currentResourceTypeTreeNodeId=str;
  240 + reloadAllChange();
  241 + }
  242 + });
  243 + form.render();
  244 + })
  245 + }
  246 +
  247 +
  248 + // 各单位维修情况
  249 + function loadCompanyReport() {
  250 + var conditions = form.val('form-repair-condition');
  251 + Object.assign(conditions, {access_token: accessToken, createtime: createTime, viewMode: '',dateLimit:dateLimit,groupBy: 'orgName'});
  252 + admin.req({
  253 + url: domainName + '/api-web/bResource/getAssetsRepairForGroup',
  254 + data: conditions
  255 + }).done(function (response) {
  256 + var chartData = response.map;
  257 + var groupList = chartData.groupList;
  258 + var countList = chartData.countList;
  259 + var xData = [];
  260 + var groupData = [];
  261 + $.each(groupList, function (i, v) {
  262 + xData.push(v);
  263 + groupData.push({
  264 + name: v,
  265 + value: 1
  266 + });
  267 + });
  268 + var series = [{
  269 + name: '维修数',
  270 + data: countList,
  271 + barWidth: 20,
  272 + type: 'bar',
  273 + label: {
  274 + show: true,
  275 + position: 'top',
  276 + textStyle: {
  277 + color: '#555'
  278 + },
  279 + formatter:function (data) {
  280 + return countList[data.dataIndex]
  281 + }
  282 + },
  283 + itemStyle: {
  284 + normal: {
  285 + color: (params) => {
  286 + var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
  287 + return colors[params.dataIndex % 3]
  288 + }
  289 + }
  290 + },
  291 + xAxisIndex: 0,
  292 + yAxisIndex: 0
  293 + }];
  294 + /**
  295 + 双X轴标签对应，伪实现思路：
  296 + 底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
  297 + */
  298 + var option = {
  299 + tooltip: {
  300 + trigger: 'axis',
  301 + axisPointer: {
  302 + type: 'shadow'
  303 + }
  304 + },
  305 + grid: [{
  306 + top: 20,
  307 + bottom: 70,
  308 + right: 5
  309 + }, {
  310 + height: 30,
  311 + bottom: 30,
  312 + right: 5
  313 + }],
  314 + xAxis: [{
  315 + type: 'category',
  316 + data: xData,
  317 + gridIndex: 0,
  318 + axisLabel: {
  319 + color: '#333',
  320 + show: true,
  321 + interval:0,
  322 + rotate:25
  323 + },
  324 + axisLine: {
  325 + lineStyle: {
  326 + color: '#e7e7e7'
  327 + }
  328 + },
  329 + axisTick: {
  330 + lineStyle: {
  331 + color: '#e7e7e7'
  332 + }
  333 + },
  334 + zlevel: 2
  335 + }, {
  336 + type: 'category',
  337 + gridIndex: 1,
  338 + axisLine: {
  339 + show: false
  340 + },
  341 + zlevel: 1
  342 + }],
  343 + yAxis: [{
  344 + type: 'value',
  345 + gridIndex: 0,
  346 + axisLabel: {
  347 + color: '#333'
  348 + },
  349 + splitLine: {
  350 + lineStyle: {
  351 + type: 'dashed'
  352 + }
  353 + },
  354 + axisLine: {
  355 + lineStyle: {
  356 + color: '#ccc'
  357 + }
  358 + },
  359 + axisTick: {
  360 + lineStyle: {
  361 + color: '#ccc'
  362 + }
  363 + }
  364 + }, {
  365 + type: 'value',
  366 + gridIndex: 1,
  367 + axisLabel: {
  368 + show: false
  369 + },
  370 + axisLine: {
  371 + show: false
  372 + },
  373 + splitLine: {
  374 + show: false
  375 + },
  376 + axisTick: {
  377 + show: false
  378 + }
  379 + }],
  380 + series: series
  381 + };
  382 + companyChart.setOption(option)
  383 + });
  384 + }
  385 +
  386 + // 按资源类型统计
  387 + function loadResTypeReport() {
  388 + var conditions = form.val('form-repair-condition');
  389 + Object.assign(conditions, {access_token: accessToken, createtime: createTime, viewMode: '',dateLimit:dateLimit,groupBy: 'resTypeName'});
  390 + admin.req({
  391 + url: domainName + '/api-web/bResource/getAssetsRepairForGroup',
  392 + data: conditions
  393 + }).done(function (response) {
  394 + var chartData = response.map;
  395 + var groupList = chartData.groupList;
  396 + var countList = chartData.countList;
  397 + var xData = [];
  398 + var groupData = [];
  399 + $.each(groupList, function (i, v) {
  400 + xData.push(v);
  401 + groupData.push({
  402 + name: v,
  403 + value: 1
  404 + });
  405 + });
  406 + var series = [{
  407 + name: '维修数',
  408 + data: countList,
  409 + barWidth: 20,
  410 + type: 'bar',
  411 + label: {
  412 + show: true,
  413 + position: 'top',
  414 + textStyle: {
  415 + color: '#555'
  416 + },
  417 + formatter:function (data) {
  418 + return countList[data.dataIndex]
  419 + }
  420 + },
  421 + itemStyle: {
  422 + normal: {
  423 + color: (params) => {
  424 + var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
  425 + return colors[params.dataIndex % 3]
  426 + }
  427 + }
  428 + },
  429 + xAxisIndex: 0,
  430 + yAxisIndex: 0
  431 + }];
  432 + /**
  433 + 双X轴标签对应，伪实现思路：
  434 + 底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
  435 + */
  436 + var option = {
  437 + tooltip: {
  438 + trigger: 'axis',
  439 + axisPointer: {
  440 + type: 'shadow'
  441 + }
  442 + },
  443 + grid: [{
  444 + top: 20,
  445 + bottom: 70,
  446 + right: 5
  447 + }, {
  448 + height: 30,
  449 + bottom: 30,
  450 + right: 5
  451 + }],
  452 + xAxis: [{
  453 + type: 'category',
  454 + data: xData,
  455 + gridIndex: 0,
  456 + axisLabel: {
  457 + color: '#333',
  458 + show: true,
  459 + interval:0,
  460 + rotate:25
  461 + },
  462 + axisLine: {
  463 + lineStyle: {
  464 + color: '#e7e7e7'
  465 + }
  466 + },
  467 + axisTick: {
  468 + lineStyle: {
  469 + color: '#e7e7e7'
  470 + }
  471 + },
  472 + zlevel: 2
  473 + }, {
  474 + type: 'category',
  475 + gridIndex: 1,
  476 + axisLine: {
  477 + show: false
  478 + },
  479 + zlevel: 1
  480 + }],
  481 + yAxis: [{
  482 + type: 'value',
  483 + gridIndex: 0,
  484 + axisLabel: {
  485 + color: '#333'
  486 + },
  487 + splitLine: {
  488 + lineStyle: {
  489 + type: 'dashed'
  490 + }
  491 + },
  492 + axisLine: {
  493 + lineStyle: {
  494 + color: '#ccc'
  495 + }
  496 + },
  497 + axisTick: {
  498 + lineStyle: {
  499 + color: '#ccc'
  500 + }
  501 + }
  502 + }, {
  503 + type: 'value',
  504 + gridIndex: 1,
  505 + axisLabel: {
  506 + show: false
  507 + },
  508 + axisLine: {
  509 + show: false
  510 + },
  511 + splitLine: {
  512 + show: false
  513 + },
  514 + axisTick: {
  515 + show: false
  516 + }
  517 + }],
  518 + series: series
  519 + };
  520 + resTypeChart.setOption(option)
  521 + });
  522 + }
  523 +
  524 +
  525 +
  526 + // 图表，表格重新加载
  527 + function reloadAllChange() {
  528 + loadWorkReportTable();
  529 + loadCompanyReport();
  530 + loadResTypeReport();
  531 +
  532 + }
  533 + });
  534 +});
  1 +//工作汇报
  2 +layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function (exports) {
  3 + var $ = layui.$;
  4 + var form = layui.form;
  5 + var layer = layui.layer;
  6 + var admin = layui.admin;
  7 + var table = layui.table;
  8 + var common = layui.common;
  9 + var session = layui.sessions
  10 + var domainName = common.domainName;
  11 +
  12 + //对外暴露的接口
  13 + exports("repairlist", function (d) {
  14 + var accessToken = session.getToken()['access_token']
  15 + if (d.type == 'attachment') {
  16 + $('#attachmentTable').show()
  17 +
  18 + createAttachmentTable()
  19 + }
  20 +
  21 +
  22 + //渲染附件表格
  23 + function createAttachmentTable() {
  24 + var attachmentTable = table.render({
  25 + elem: '#attachmentTable',
  26 + url: domainName + '/api-web/bResource/assetsrepair/getAttaById',
  27 + where: {
  28 + access_token: accessToken,
  29 + id: d.id
  30 + },
  31 + height: 'full',
  32 + page: {
  33 + layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
  34 + , theme: '#1E9FFF'//自定义分页主题颜色
  35 + },
  36 + end: function (e) {
  37 + form.render()
  38 + },
  39 + limit: common.limit,
  40 + limits: common.limits,
  41 + even: true,
  42 + cols: [[
  43 + {type: 'numbers', title: '序号'},
  44 + {
  45 + field: 'name', title: '文件名称', align: 'center', minWith: 200,
  46 + }, {
  47 + field: 'originalName', title: '原始名称', align: 'center', minWith: 200,
  48 + }, {
  49 + field: 'suffix', title: '文件后缀', align: 'center', minWith: 150,
  50 + },
  51 + {
  52 + field: 'size', title: '文件大小', align: 'center', minWith: 150,
  53 + templet: function (d) {
  54 + var str = (d.size / 1000).toFixed(2)
  55 + return `<div><span>${str}KB</span></div>`
  56 + }
  57 + },
  58 + {
  59 + title: '操作', align: "center", width: 120,
  60 + templet: '<div><span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link preview-attachment-btn">预览</span>' +
  61 + '<span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link attachment-download-btn" style="margin-left: 10px">下载</span></div>'
  62 + }
  63 + ]],
  64 + done: function () {
  65 + $('.preview-attachment-btn').on('click', function () {
  66 + var id = $(this).data('id')
  67 + var suffix = $(this).data('suffix')
  68 + if (suffix == 'jpg' || suffix == 'png' || suffix == 'JPG' || suffix == 'PNG') { //图片类型
  69 + var srcUrl = domainName + `/api-web/openoffice/readImage/${id}?access_token=` + accessToken
  70 + layer.open({
  71 + type: 1,
  72 + content: `<div><img src="${srcUrl}" width="100%" height="100%" /></div>`,
  73 + title: '图片预览',
  74 + area: ['60%', '90%']
  75 + })
  76 + } else {
  77 + //附件为文档类型
  78 + common.openReport(id)
  79 + }
  80 + })
  81 +
  82 + $('.attachment-download-btn').on('click',function () {
  83 + var id = $(this).data('id')
  84 + var suffix = $(this).data('suffix')
  85 + var url = domainName + `/api-web/openoffice/download/${id}?access_token=` + accessToken
  86 + window.open(url)
  87 + })
  88 + }
  89 + })
  90 + }
  91 +
  92 + })
  93 +})
  1 +<!--工作汇报表单-->
  2 +<article>
  3 + <div class="layui-card-body">
  4 + <fieldset class="layui-elem-field layui-field-title">
  5 + <legend>维修信息</legend>
  6 + </fieldset>
  7 + <form class="layui-form layui-form-pane" lay-filter="add-repair-form"
  8 + id="add-repair-form" onsubmit="return false;">
  9 + <input hidden name="id" id="id" lay-verify="checkReportIsExist">
  10 + <div class="layui-form-item">
  11 + <div class="layui-inline inline-half">
  12 + <label class="layui-form-label">设备类型</label>
  13 + <div class="layui-input-inline">
  14 + <select name="resType" id="slt-repairadd-res"
  15 + lay-filter="slt-repairadd-res">
  16 + <option value="">=设备类型=</option>
  17 + </select>
  18 + </div>
  19 + </div>
  20 + <div class="layui-inline inline-half">
  21 + <label class="layui-form-label">设备序列号</label>
  22 + <div class="layui-input-inline">
  23 + <input type="text" class="layui-input" name="resourceSN" id="resourceSN">
  24 + </div>
  25 + </div>
  26 + </div>
  27 + <div class="layui-form-item">
  28 + <div class="layui-inline inline-half">
  29 + <label class="layui-form-label">故障时间</label>
  30 + <div class="layui-input-inline">
  31 + <input type="text" class="layui-input" name="hitchtime" id="hitchtime">
  32 + </div>
  33 + </div>
  34 + <div class="layui-inline inline-half">
  35 + <label class="layui-form-label">维修时间</label>
  36 + <div class="layui-input-inline">
  37 + <input type="text" class="layui-input" name="createtime" id="createtime">
  38 + </div>
  39 + </div>
  40 + </div>
  41 + <div class="layui-form-item hide" id="form-item-repTitle">
  42 + <div class="layui-inline inline-half">
  43 + <label class="layui-form-label">标题</label>
  44 + <div class="layui-input-inline">
  45 + <input type="text" class="layui-input" name="title">
  46 + </div>
  47 + </div>
  48 + <div class="layui-inline inline-half">
  49 + <label class="layui-form-label">汇报人</label>
  50 + <div class="layui-input-inline">
  51 + <input type="text" class="layui-input" name="createBy" id= "createUser" readonly="readonly">
  52 + </div>
  53 + </div>
  54 + </div>
  55 + <div class="layui-form-item">
  56 + <div class="layui-inline inline-half">
  57 + <label class="layui-form-label">归属单位</label>
  58 + <div class="layui-input-inline">
  59 + <select name="orgId" id="slt-repairadd-org"
  60 + lay-filter="slt-repairadd-org">
  61 + <option value="">=归属单位=</option>
  62 + </select>
  63 + </div>
  64 + </div>
  65 + <div class="layui-inline inline-half">
  66 + <label class="layui-form-label">选择厂商</label>
  67 + <div class="layui-input-inline">
  68 + <select name="manufacturerId" id="slt-repairadd-group"
  69 + lay-filter="slt-repairadd-group" >
  70 + <option value="">=选择厂商=</option>
  71 + </select>
  72 + </div>
  73 + </div>
  74 + </div>
  75 + <div class="layui-form-item">
  76 + <div class="layui-inline inline-half">
  77 + <label class="layui-form-label">受影响系统</label>
  78 + <div class="layui-input-inline">
  79 + <input type="text" class="layui-input" name="affected" id="affected">
  80 + </div>
  81 + </div>
  82 + <div class="layui-inline inline-half">
  83 + <label class="layui-form-label">所属ip</label>
  84 + <div class="layui-input-inline">
  85 + <input type="text" class="layui-input" name="ip" id="ip">
  86 + </div>
  87 + </div>
  88 + </div>
  89 + <div class="layui-form-item">
  90 + <div class="layui-inline" style="width: 90%">
  91 + <label class="layui-form-label">选择附件</label>
  92 + <div class="layui-input-block attachment">
  93 + <input type="text" class="layui-input" readonly id="attachmentInput">
  94 + </div>
  95 + </div>
  96 + <div class="layui-inline">
  97 + <button class="layui-btn layui-btn-normal" id="attachment">附件</button>
  98 + <button id="upload_btn" hidden>附件</button>
  99 + </div>
  100 + </div>
  101 + <div class="layui-form-item" style="display: none" id="add-repair-form-atta">
  102 + <label class="layui-form-label">已存附件</label>
  103 + <div class="layui-input-inline"
  104 + style="width: 90% !important;max-height: 130px;overflow-y: auto;margin-left: 10px;">
  105 + <div class="tags" id="selecte_content_id"></div>
  106 + </div>
  107 + </div>
  108 +
  109 + <div class="layui-form-item">
  110 + <label class="layui-form-label textarea-label">故障现象描述</label>
  111 + <div class="layui-input-block">
  112 + <textarea class="layui-textarea" name="phenomenon"></textarea>
  113 + </div>
  114 + </div>
  115 + <div class="layui-form-item">
  116 + <label class="layui-form-label textarea-label">解决过程描述</label>
  117 + <div class="layui-input-block">
  118 + <textarea class="layui-textarea" name="solveprocess"></textarea>
  119 + </div>
  120 + </div>
  121 + <div class="layui-form-item">
  122 + <label class="layui-form-label textarea-label">处理结果</label>
  123 + <div class="layui-input-block">
  124 + <textarea class="layui-textarea" name="result"></textarea>
  125 + </div>
  126 + </div>
  127 + <div class="layui-form-item">
  128 + <label class="layui-form-label textarea-label">经验总结</label>
  129 + <div class="layui-input-block">
  130 + <textarea class="layui-textarea" name="experience"></textarea>
  131 + </div>
  132 + </div>
  133 + <button type="submit" lay-submit lay-filter="repair-form-save-id" class="layui-btn hide"
  134 + id="repair-form-save-id">保存
  135 + </button>
  136 + <table id="table-repair-add-attachment" class="hide"></table>
  137 + </form>
  138 + </div>
  139 +</article>
  140 +<script>
  141 + layui.use('assetsRepairAdd', function (fn) {
  142 + fn({{d}})
  143 + })
  144 +</script>
  145 +
  146 +<style>
  147 + #add-repair-form .layui-form-label {
  148 + width: 120px;
  149 + /* padding: 8px 12px; */
  150 + text-align: left !important;
  151 + }
  152 + #add-repair-form .layui-input-block{
  153 + margin-left: 120px !important;
  154 + }
  155 + .tags{
  156 + margin-top:5px;
  157 + }
  158 + .tags span {
  159 + height: 20px;
  160 + margin-right: 10px;
  161 + margin-bottom: 3px;
  162 + padding: 5px 10px 5px 10px;
  163 + float: left;
  164 + white-space: nowrap;
  165 + color:#fff;
  166 + background-color:#009688;
  167 + text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
  168 + }
  169 + .tags .close {
  170 + font-weight: bold;
  171 + line-height: 20px;
  172 + margin-left:10px;
  173 + cursor: pointer;
  174 + text-align: center;
  175 + color: #fff;
  176 + border: 0 none;
  177 + background: transparent none repeat scroll 0 0;
  178 + }
  179 +</style>
  1 +<title>资产维修记录</title>
  2 +<article class="page-container">
  3 + <div class="page-panel ">
  4 + <div class="main">
  5 + <div class="layui-card">
  6 + <div class="layui-card-header">
  7 + <div class="layui-status">
  8 + <form class="layui-form layui-card-header" onsubmit="return false"
  9 + lay-filter="form-repair-condition">
  10 + <div class="layui-form-item">
  11 + <div class="layui-inline">
  12 + <div class="layui-input-inline layui-input-inline--long">
  13 + <input type="text" id="monitor_keyword" name="title"
  14 + placeholder="标题搜索，支持内容模糊匹配" autocomplete="off" class="layui-input">
  15 + </div>
  16 + </div>
  17 + <div class="layui-inline">
  18 + <div class="layui-input-inline">
  19 + <select name="orgId" id="slt-repair-org"
  20 + lay-filter="slt-repair-org" lay-search>
  21 + <option value="">=归属单位=</option>
  22 + </select>
  23 + </div>
  24 + </div>
  25 + <div class="layui-inline">
  26 + <div class="layui-input-inline">
  27 + <select name="manufacturerId" id="slt-repair-group"
  28 + lay-filter="slt-repair-group" lay-search>
  29 + <option value="">=选择厂商=</option>
  30 + </select>
  31 + </div>
  32 + </div>
  33 + <div class="layui-inline">
  34 + <div class="layui-input-inline ">
  35 + <div id="hardware-layui-select" class="xm-select"></div>
  36 + </div>
  37 + </div>
  38 + <div class="layui-inline">
  39 + <div class="layui-input-inline">
  40 + <select name="createBy" id="slt-repair-user"
  41 + lay-filter="slt-repair-user" lay-search>
  42 + <option value="">=选择汇报人=</option>
  43 + </select>
  44 + </div>
  45 + </div>
  46 +
  47 + <div class="layui-btn-group time-group" id="btns-repair-time" style="padding: 0">
  48 + <button type="button" class="layui-btn layui-btn-primary layui-btn-xs date"
  49 + data-period="today">今天
  50 + </button>
  51 + <button type="button" class="layui-btn layui-btn-primary layui-btn-xs date"
  52 + data-period="lastWeek">上周
  53 + </button>
  54 + <button type="button" class="layui-btn layui-btn-primary layui-btn-xs active date"
  55 + data-period="thisWeek">本周
  56 + </button>
  57 + <button type="button" class="layui-btn layui-btn-primary layui-btn-xs date"
  58 + data-period="lastMonth">上月
  59 + </button>
  60 + <button type="button" class="layui-btn layui-btn-primary layui-btn-xs date"
  61 + data-period="thisMonth">本月
  62 + </button>
  63 + </div>
  64 + <div class="layui-inline" style="margin-left: 10px">
  65 + <div class="layui-input-inline" style="width: auto">
  66 + <input type="text" name="dateLimit" id="dateLimit" autocomplete="off"
  67 + class="layui-input" readonly placeholder="其他日期范围">
  68 + </div>
  69 + </div>
  70 + </div>
  71 + </form>
  72 + </div>
  73 + </div>
  74 + <div style="display: flex" class="layui-card-echart">
  75 + <div style="flex-grow: 3;width: 45%!important;">
  76 + <h5 class="lay-row-title">按单位统计</h5>
  77 + <div class="pie-chart" id="chart-company-report" style="min-height: 240px"></div>
  78 + </div>
  79 + <div style="flex-grow: 3;width: 45%!important;">
  80 + <h5 class="lay-row-title">按资产类型统计</h5>
  81 + <div class="pie-chart" id="chart-restype-report" style="min-height: 240px"></div>
  82 + </div>
  83 + </div>
  84 + <div class="layui-card-body" style="margin-top: 10px;">
  85 + <div class="warn-btns">
  86 + <button class="layui-btn layui-btn-sm layui-btn-normal active" data-type="" id="repair_create">
  87 + 新增
  88 + </button>
  89 + </div>
  90 + <table id="table-repair-view" lay-filter="table-repair-view"></table>
  91 + </div>
  92 + </div>
  93 + </div>
  94 + </div>
  95 +</article>
  96 +<script>
  97 + layui.use('assetsrepair', function (fn) {
  98 + fn();
  99 + });
  100 +</script>
  1 +<article class="page-container">
  2 + <div class="page-panel">
  3 + <div class="main">
  4 + <div class="layui-card">
  5 + <div class="layui-card-header">
  6 + </div>
  7 + <div class="layui-card-body">
  8 + <table id="attachmentTable" lay-filter="attachmentTable"></table>
  9 + </div>
  10 + </div>
  11 + </div>
  12 + </div>
  13 +</article>
  14 +
  15 +<script>
  16 + layui.use('repairlist', function (fn) {
  17 + fn({{d}})
  18 + });
  19 +</script>