public partial class App : Application{public App(){//Add Custom assembly resolverAppDomain.CurrentDomain.AssemblyResolve += Resolver;//Any CefSharp references have to be in another method with NonInlining// attribute so the assembly rolver has time to do it's thing.
            InitializeCefSharp();}[MethodImpl(MethodImplOptions.NoInlining)]private static void InitializeCefSharp(){var settings = new CefSettings();// Set BrowserSubProcessPath based on app bitness at runtimesettings.BrowserSubprocessPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,Environment.Is64BitProcess ? "x64" : "x86","CefSharp.BrowserSubprocess.exe");// Make sure you set performDependencyCheck falseCef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null);}// Will attempt to load missing assembly from either x86 or x64 subdir// Required by CefSharp to load the unmanaged dependencies when running using AnyCPUprivate static Assembly Resolver(object sender, ResolveEventArgs args){if (args.Name.StartsWith("CefSharp")){string assemblyName = args.Name.Split(new[] { ',' }, 2)[0] + ".dll";string archSpecificPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,Environment.Is64BitProcess ? "x64" : "x86",assemblyName);return File.Exists(archSpecificPath)? Assembly.LoadFile(archSpecificPath): null;}return null;}private void Application_Startup(object sender, StartupEventArgs e){}}

<configuration><runtime><assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"><probing privatePath="x86"/></assemblyBinding></runtime></...>

 public static ChromiumWebBrowser cefSha { get; set; }public Visualization(){InitializeComponent();}private void Page_Loaded(object sender, RoutedEventArgs e){cefSha = new ChromiumWebBrowser(Environment.CurrentDirectory + "/../../Pages/STORE/VisualizationHtml/StoreData.html");// 页面加载完毕后打开开发者工具cefSha.KeyboardHandler = new CEFKeyBoardHander();CefSharpSettings.LegacyJavascriptBindingEnabled = true;NewMutliPage();this.grid.Children.Add(cefSha);//初始化}

public void NewMutliPage(){cefSha.JavascriptObjectRepository.ResolveObject += (s, eve) =>{var repo = eve.ObjectRepository;if (eve.ObjectName == "bound"){repo.Register("bound", new JsEvent(), isAsync: true,options: new BindingOptions(){CamelCaseJavascriptNames = false});}};}

public void OldSinglePage(){// 新版本默认为 falseCefSharpSettings.LegacyJavascriptBindingEnabled = true;// 把 TestClass 注入到单个页面，名称为 test_chromiumWebBrowser.RegisterJsObject("testold", new TestClass());}

public class JsEvent{/// <summary>/// 根据货架列代码区查相关信息/// </summary>/// <param name="Sline_code"></param>public void GetobjBySline_Code(string Sline_code){Visualization.cefSha.ExecuteScriptAsync($@"getgoods({Newtonsoft.Json.JsonConvert.SerializeObject(VisualizationDAL.GetList(Sline_code))});");}/// <summary>/// 获取货架信息/// </summary>/// <param name="Sline_code"></param>public void GetShelveDetail(string Sline_code){//1.找到那列的所有货架ObservableCollection<STORE_SHELVE> shelveList = XDAL.STORE_SHELVE_DAL.GetListByLineName(Sline_code);//2.找到关于该列下所有的商品信息ObservableCollection<STORe_DetailVm> detailList = new ObservableCollection<STORe_DetailVm>();foreach (var item in shelveList){XDAL.STORE_goods_Detail.GetGoodsDetail(item.Shelve_code).ToList().ForEach(obj =>{detailList.Add(obj);});}#regionList<VisualShelveVm> VisualList = new List<VisualShelveVm>();for (int i = 0; i < shelveList.Count; i++){//循环最大粒子，在这个最大粒子当中来组织Jsonfor (int g = 0; g < 4; g++){for (int l = 0; l < 4; l++){var store_detail = detailList.FirstOrDefault(a => a.grid == g.ToString()&& a.Shelve_code == shelveList[i].Shelve_code&& a.layer == l.ToString());//如果未出库的里没有这个 那就可以添加if (store_detail != null){VisualList.Add(new VisualShelveVm(){shelve_grid = g.ToString(),shelve_layer = l.ToString(),shelve_code = shelveList[i].Shelve_code,shelve_name = shelveList[i].Shelve_name,isHas = true,goods_code = store_detail.Goods_code,goods_name = store_detail.Goods_name});}else{VisualList.Add(new VisualShelveVm(){isHas = false,shelve_grid = g.ToString(),shelve_layer = l.ToString(),});}}}}#endregionVisualization.cefSha.ExecuteScriptAsync($@"GetShelve({Newtonsoft.Json.JsonConvert.SerializeObject(VisualList)});");}

<script>window.onload = function () {loadScrollWidth(2);// 新式注入CefSharp.BindObjectAsync("bound");}
</script>

bound.GetobjBySline_Code(Sline_Code);

<body><div class="container" id="app" style="max-width: 1600px;"><div class="row"><div class="col-lg-3"><div class="card"><h3 class="card-img-top headtext">清单</h3><div class="card-body"><table class="table table-striped"><thead><tr><th scope="col">分类名称</th><th scope="col">数量</th></tr></thead><tbody><tr v-for="(item,index) in goods_item"><th scope="row">{{item.goods_Name}}</th><td>{{item.num}}</td></tr></tbody></table></div></div></div><div class="col-lg-9" style="overflow: scroll;"><div class="row line_div"><div class="row" style="font-size: 20px;background-color: #CCC;width: 100%;"><ul class="nav nav-pills nav-fill" id="nav_list"><li class="nav-item" v-for="(item,index) in line_item"><!-- 如果 index 1--><a class="nav-link active" key="item.Sline_code"  @click="toggle(index,item)" v-if="index==0">{{item.Sline_name}}</a><!-- index 2 n --><a class="nav-link" key="item.Sline_code"  @click="toggle(index,item)" v-if="index!=0">{{item.Sline_name}}</a></li></ul></div><div class="row" style="margin-left: 0;" id="VisualBody"><div class="colums" v-for="item in reversedMessage"><div class="row"><img src="tx_3.png"><div class="table_div"><table class="custormTable" style="margin-top: 40px;" :id="item.code"></table></div></div><div class="row"style="background-image: url('tx_2.png');width: 556px;height:464px;background-repeat: repeat-y;"></div><div class="row"><img src="tx_1.png"><div class="hj_center"><h3>{{item.name}}</h3></div></div></div></div></div></div></div></div>
</body>
<script>window.onload = function () {loadScrollWidth(2);// 新式注入CefSharp.BindObjectAsync("bound");}
</script>
<script>function loadScrollWidth(num) {var tags = document.getElementsByClassName('line_div')[0];tags.style.width = num * 590 + 'px';}function changedom(listdata,shelvedata) {var num = 1;$(".custormTable").html("");shelvedata.shift();for (var i = 0; i < shelvedata.length; i++) {var shelve_code = shelvedata[i].shelve_code;//不管如何都是循环4X4for (var y = 0; y < 4; y++) {var goodshtml = '<tbody><tr class="store_goodsName">';var numhtml = '<tr class="store_goodsId">'numhtml += "<td>" + num + "</td>";numhtml += "<td>" + (num + 1) + "</td>";numhtml += "<td>" + (num + 2) + "</td>";numhtml += "<td>" + (num + 3) + "</td>";numhtml = numhtml + '</tr>';for (var g = 0; g < 4; g++) {var obj = listdata.find(item => item.shelve_layer == y && item.shelve_grid == g && item.shelve_code == shelve_code);if (obj != null) {if (obj.isHas == true) {goodshtml = goodshtml + "<td>" + obj.goods_name + "</td>";}} else {goodshtml = goodshtml + "<td></td>";}}goodshtml = goodshtml + '</tr>' + numhtml + '</tbody>';var my_element = $("#" + shelve_code);$("#" + shelve_code).append(goodshtml);num = num + 4;}}}</script>
</html>
<script>var app = new Vue({el: "#app",data: {m: "hello",line_item: [],//列goods_item: [],//商品列表+numshelve_list: [],//货架列表Listdata: [],//商品列表
},mounted() {//全局钩子引用window.getalert = this.getalert;window.getgoods = this.getgoods;window.GetShelve = this.GetShelve;window.DBTwo = this.DBTwo;},methods: {getalert: function (list) {this.line_item = typeof list == 'string' ? JSON.parse(list) : list;},toggle:function(index,item){$(".nav-item a").each(function () {$(this).removeClass("active");});$(".nav-item a").eq(index).addClass('active');//item 对象 Sline_Code 【字段】var Sline_Code = item.Sline_code;//调用完之后C#会找我们的一个方法然后将参数带过来
                bound.GetShelveDetail(Sline_Code);//请求后台，让后台直接调用一个方法去加载列表。
                bound.GetobjBySline_Code(Sline_Code);this.Wecas(index, item);},Wecas: function (index, item) {$(".nav-item a").each(function () {$(this).removeClass("active");});$(".nav-item a").eq(index).addClass('active');//item 对象 Sline_Code 【字段】var Sline_Code = item.Sline_code;//调用完之后C#会找我们的一个方法然后将参数带过来
                bound.GetShelveDetail(Sline_Code);//请求后台，让后台直接调用一个方法去加载列表。
                bound.GetobjBySline_Code(Sline_Code);},getgoods: function (goods_list) { //该方法是返回货架有的物品this.goods_item = typeof goods_list == 'string' ? JSON.parse(goods_list) : goods_list;}, GetShelve: function (list) {this.Listdata = list;let obj = {};list = list.reduce((cur, next) => {obj[next.shelve_code] ? "" : obj[next.shelve_code] = true && cur.push(next);return cur;}, []);this.shelve_list = typeof list == 'string' ? JSON.parse(list) : list;changedom(this.Listdata, this.shelve_list);}}, computed: {//所有的货架列出来
            reversedMessage: function () {var array = [];for(var i=0;i<this.shelve_list.length;i++){//判断是否name是不是有if (this.shelve_list[i].shelve_name != null) {var obj = {name: this.shelve_list[i].shelve_name,code : this.shelve_list[i].shelve_code}array.push(obj);}}if (array.length < 2) {loadScrollWidth(2);} else {loadScrollWidth(array.length);}return array;}}});
</script>

 class CEFKeyBoardHander : IKeyboardHandler{public bool OnKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey){if (type == KeyType.KeyUp && Enum.IsDefined(typeof(Keys), windowsKeyCode)){var key = (Keys)windowsKeyCode;switch (key){case Keys.F12:browser.ShowDevTools();break;}}return false;}public bool OnPreKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey, ref bool isKeyboardShortcut){return false;}}

public void Show(string Code){App.Current.Dispatcher.Invoke((Action)(() =>{
。。。。。。。。。}
}