右侧滑动 数据分析窗口
鼠标左侧移动，显示窗口，输入款号，查询，然后引用相关数据。
create.blade.php
<style>
.contactusdiyou{
width: 700px;
}
.contactusdiyou .conter{
margin-top: 1% !important;
margin-left: 5px !important;
width: 100%;
}
</style>
<!-- TODO 右侧滑动 数据分析窗口 -->
{
{--<div class="contactusdiyou">--}}
<div style="right: -650px;" class="contactusdiyou">
<div class="hoverbtn">
<span>数</span>
<span>据</span>
<span>分</span>
<span>析</span>
</div>
<div class="conter">
<div class="box-header col-md-12 form-horizontal" style="padding-bottom: 0px">
<div class="form-group" >
{
{-- 预估下单数量 --}}
<div class="col-md-3" style="width: 260px">
<label class="col-sm-3 control-label"> 款号</label>
<div class="col-sm-9">
<input type="text" name="exploit_no" class="form-control exploit_no" placeholder="款号" >
</div>
</div>
<div class="col-md-3" style="width: 75px;padding-top: 5px">
<a class="btn btn-info btn-sm js-search-for" onclick="jsSearchFor()"><i class="fa fa-search"></i> 搜索</a>
</div>
</div>
</div>
<table class="table table-hover" style="margin-bottom: 0;width: 690px">
<thead>
<tr>
<th class="column-pic_front">款式图</th>
<th class="column-exploit_no" style="color:{
{ system_color()['exploitStyle']['color'] }};">款号</th>
<th>车缝单价</th>
<th>后整单价</th>
<th>裁剪单价</th>
<th>车缝SAM</th>
<th>工厂倍率</th>
<th>指导效率</th>
<th>操作</th>
</tr>
</thead>
<tbody class="js-units-lists">
@foreach($style_ok_list as $k => $v)
<tr>
<td class="column-pic_front_box">
<a href="{!! env('APP_URL').$v->exploit_color->pic_front !!}" class="grid-popup-link">
<img src="{!! env('APP_URL').$v->exploit_color->pic_front !!}" style="max-width:30px;max-height:30px" class="img img-thumbnail">
</a>
</td>
<td style="color:{
{ system_color()['exploitStyle']['color'] }};">{!! $v->exploit->exploit_no !!}</td>
<td style="text-align: center">{
{ $v->labour_cost->tailor_price }}</td>
<td style="text-align: center">{
{ $v->labour_cost->crop_price }}</td>
<td style="text-align: center">{
{ $v->labour_cost->tidy_price }}</td>
<td style="text-align: center">{
{ $v->labour_cost->tailor_sam }}</td>
<td style="text-align: center">{
{ $v->labour_cost->factory_rate }}</td>
<td style="text-align: center">{
{ $v->labour_cost->guide_rate*100 }}%</td>
<td>
<a href="javascript:void(0);" onclick="selectOkCostInfo({
{$v->id}})" class="btn btn-sm btn-default">引用</a>
</td>
</tr>
@endforeach
</tbody>
<template class="template-tpl">
<tr class="init_row">
<td class="column-pic_front_box">
<a href="" class="grid-popup-link pic_front___LA_KEY__">
<img src="" style="max-width:30px;max-height:30px" class="img img-thumbnail pic_fronts___LA_KEY__">
</a>
</td>
<td style="color:{
{ system_color()['exploitStyle']['color'] }};" class="exploit_no___LA_KEY__"></td>
<td style="text-align: center" class="tailor_price___LA_KEY__"></td>
<td style="text-align: center" class="crop_price___LA_KEY__"></td>
<td style="text-align: center" class="tidy_price___LA_KEY__"></td>
<td style="text-align: center" class="tailor_sam___LA_KEY__"></td>
<td style="text-align: center" class="factory_rate___LA_KEY__"></td>
<td style="text-align: center" class="guide_rate___LA_KEY__"></td>
<td>
<a href="javascript:void(0);" onclick="selectOkCostInfo(id___LAS_KEY__)" class="btn btn-sm btn-default">引用</a>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<script>
$(function () {
$('.key-select').iCheck({checkboxClass:'icheckbox_minimal-blue'}).on('ifChanged', function () {
if (this.checked) {
$(this).closest('tr').css('background-color', '#ffffd5');
} else {
$(this).closest('tr').css('background-color', '');
}
selectedRows();
});
$('.key-select-all').iCheck({checkboxClass:'icheckbox_minimal-blue'}).on('ifChanged', function(event) {
if (this.checked) {
$('.key-select').iCheck('check');
} else {
$('.key-select').iCheck('uncheck');
}
selectedRows();
});
var selectedRows = function () {
var selected = [{
{ $data->id }}];
$('.key-select:checked').each(function(){
selected.push($(this).data('key'));
});
$('.lot_predict_id').val(selected)
};
selectedRows();
$('.btn-primary').click(function (e) {
var p_submit = $(e.target).attr('value');
$('.status').val(p_submit)
});
$('.grid-popup-link').magnificPopup({"type":"image"});
$(".bulkcate_id").select2({"allowClear":true,"placeholder":{"id":"","text":"款式品类"}});
$(".bulkplace_id").select2({"allowClear":true,"placeholder":{"id":"","text":"款式品名"}});
$(document).on('change', ".bulkcate_id", function () {
initbulkplace(this.value);
});
/**
* TODO 侧边滑动
**/
$(".contactusdiyou").hover(function() {
$(".hoverimg").attr("src","images/hoverbtnbg1.gif");
$('.diyoumask').fadeIn();
$('.contactusdiyou').animate({right:'0'},300);
}, function() {
$(".hoverimg").attr("src","images/hoverbtnbg.gif");
$('.contactusdiyou').animate({right:'-680'},300,function(){});
$('.diyoumask').fadeOut();
});
})
function initbulkplace(bulkcate_id) {
var bulkplace_id = $(".bulkplace_id");
$.get("/admin/predict/api",{q : bulkcate_id}, function (data) {
bulkplace_id.find("option").remove();
$(bulkplace_id).select2({
placeholder: {"id":"","text":"选择品名"},
allowClear: 1,
data: $.map(data, function (d) {
d.id = d.id;
d.text = d.text;
return d;
}),
}).trigger('change');
});
}
/**
* 实例化控件
**/
function validationNumber(e, num,maxNum) {
var regu = /^[0-9]+\.?[0-9]*$/;
if (e.value != "") {
if (!regu.test(e.value)) {
e.value = e.value.substring(0, e.value.length - 1);
e.focus();
}else if (e.value>=maxNum){
e.value = maxNum;
e.focus();
}else {
if (num == 0) {
if (e.value.indexOf('.') > -1) {
e.value = e.value.substring(0, e.value.length - 1);
e.focus();
}
}
if (e.value.indexOf('.') > -1) {
if (e.value.split('.')[1].length > num) {
e.value = e.value.substring(0, e.value.length - 1);
e.focus();
}
}
}
}
sumTotalAndCost();
}
function sumTotalAndCost(){
var tailor_price = $('#tailor_price').val()?$('#tailor_price').val():0;
var crop_price = $('#crop_price').val()?$('#crop_price').val():0;
var tidy_price = $('#tidy_price').val()?$('#tidy_price').val():0;
var tailor_sam = $('#tailor_sam').val()?$('#tailor_sam').val():0; //车缝SAM
var tct_total = (parseFloat(tailor_price) + parseFloat(crop_price) + parseFloat(tidy_price)).toFixed(3);
$('#tct_total').val(tct_total); //工价合计 = 裁剪单价+车缝单件+后整单价
var factory_rate = $('#factory_rate').val()?$('#factory_rate').val():0;
var guide_rate = $('#guide_rate').val()?$('#guide_rate').val():0;
var labour_cost = (tct_total*factory_rate).toFixed(3); // 加工费 = 工价合计*工厂倍率
$('#labour_cost').val(labour_cost);
//人均台产 等于600分钟/车缝SAM*指导效率*加工费
var yield_salary = (600/tailor_sam*(guide_rate/100)*labour_cost).toFixed(3);
$("#yield_salary").val(yield_salary);
//车工日薪 等于600分钟/车缝SAM*指导效率*车缝单价
var yield_adam = (600/tailor_sam*(guide_rate/100)*tailor_price).toFixed(3);
var yield_bgColor = "#eee";
var yield_fontColor = "#0096d0";
if(yield_adam < 100){
yield_bgColor = "#f70000";
yield_fontColor = '#FFF'
}else if(yield_adam > 130){
yield_bgColor = "#0066ff";
yield_fontColor = '#FFF'
}
$("#yield_adam").val(yield_adam).css('background-color',yield_bgColor).css('color',yield_fontColor);
//人均产能
var per_capacity = (600 / parseFloat(tailor_sam) * (parseFloat(guide_rate)/100)).toFixed(1);
$("#per_capacity").val(per_capacity);
}
// 选择品类 修改倍率
function changeBulkcaye(e){
var cate_id = $(e).val();
var factory_rate = '1.93';
if(cate_id == 5){
factory_rate = '1.73'
}else if (cate_id == 69){
factory_rate = '';
}else{
factory_rate = '1.93'
}
$('.factory_rate').val(factory_rate)
}
// 选择 引用报价
function selectOkCostInfo(id){
$.get('{
{ route('get_predict_cost_info') }}',{id : id}, function (data) {
if (data.status == 100){
var list = data.data;
$('.tailor_price').val(list.tailor_price)
$('.crop_price').val(list.crop_price)
$('.tidy_price').val(list.tidy_price)
$('.tct_total').val(list.tct_total)
$('.factory_rate').val(list.factory_rate)
$('.labour_cost').val(list.labour_cost)
$('.tailor_sam').val(list.tailor_sam)
$('.guide_rate').val(list.guide_rate*100)
$('.offer_smv').val(list.offer_smv)
$('.remark').val(list.remark)
sumTotalAndCost();
}
});
}
// TODO 初始化右侧部件列表 HTML
var tpl = $('template.template-tpl');
var index = 0;
function addUnitsHtml(list=null){
index ++;
var template = tpl.html().replace(/__LA_KEY__/g, index).replace(/id___LAS_KEY__/g, list.id);
$('.js-units-lists').append(template);
$('.pic_front_'+index).attr('href',list.exploit_color.pic_front);
$('.pic_fronts_'+index).attr('src',list.exploit_color.pic_front);
$('.exploit_no_'+index).text(list.exploit.exploit_no);
$('.tailor_price_'+index).text(list.labour_cost.tailor_price);
$('.crop_price_'+index).text(list.labour_cost.crop_price);
$('.tidy_price_'+index).text(list.labour_cost.tidy_price);
$('.tailor_sam_'+index).text(list.labour_cost.tailor_sam);
$('.factory_rate_'+index).text(list.labour_cost.factory_rate);
$('.guide_rate_'+index).text(list.labour_cost.guide_rate);
}
// TODO 搜索
function jsSearchFor() {
var exploit_no = $('.exploit_no').val();
if(exploit_no.length < 4){
swal('查询请输入4位以上款号')
}else{
$('.js-units-lists').empty();
var data = {
'exploit_no': exploit_no,
'_token': LA.token,
};
$.ajax({
url: '{
{ route('get_exploit_search') }}',
type: "GET",
data: data,
dataType: 'json',
success: function (data) {
if (data.count >= 1){
for (var i = 0; i < data.list.length; i++) {
addUnitsHtml(data.list[i]);
}
}
}
});
}
}
</script>控制器代码：
RyhPredictController.php
// 获取 引用同款报价
public function get_predict_cost_info(Request $request){
$data = RyhLabourCost::where(['predict_id'=>$request->id])->first();
if($data){
$status = 100;
$message = '引用完成,请核对';
}else{
$status = 400;
$message = '无可引用数据';
}
return response()->json(['status'=>$status,'message'=>$message,'data'=>$data]);
}
// 查询 同款报价信息
public function get_exploit_search(Request $request){
$exploit = RyhExploitStyle::where('exploit_no','like','%'.$request->exploit_no.'%')->first();
$data = [];
if(isset($exploit)){
$data = RyhPredict::with(['labour_cost','exploit_color','exploit'])->where('cost_status',1)->where('style_id',$exploit->id)->get();
}
$status = 100;
$count = count($data);
return response()->json(['status'=>$status,'count'=>$count,'list'=>$data]);
}
public function api (Request $request)
{
$id = $request->get('q');
return PubBulkCategory::where(['parent_id'=>$id])->get(['id', DB::raw('title as text')])->toArray();
}路由代码：
routes.php
$router->get('api', RyhPredictController::class.'@api');
$router->get('get_predict_cost_info', RyhPredictController::class.'@get_predict_cost_info')->name('get_predict_cost_info'); // 获取 引用同款报价
$router->get('get_exploit_search', RyhPredictController::class.'@get_exploit_search')->name('get_exploit_search'); // 查询 同款报价信息